zoukankan      html  css  js  c++  java
  • css3 放大缩小代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3圆圈动画放大缩小循环动画效果</title>
    <style>
     
    .dot {
    margin:150px auto;
    width:200px;
    height:200px;
    background-color:#E3E3E3;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 2s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率,和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/
    -webkit-animation-direction: alternate;/*定义动画方式*/
    }
     
    @keyframes ripple {
    0% {
     
    opacity:0.35;
    width:190px;
    height:190px;
    }
    100% {
     
    opacity: 0.9;
    width:250px;
    height:250px;
    }
    }
     
     
     
     
    </style>
    </head>
     
    <body>
        <div class="dot"></div>
    </body>
    </html>

  • 相关阅读:
    前端 CSS 与HTML 学习笔记详细讲解
    Python-Django之DRF
    Flask
    flask
    Python
    Python爬虫
    前端开发规范
    为什么 [] == ![] 输出是true?
    javascript准确判断各种数据类型
    JavaScript数组扁平化常用方法总结
  • 原文地址:https://www.cnblogs.com/ylcms/p/7424724.html
Copyright © 2011-2022 走看看