[CSS]用CSS animation实现圆圈向外扩展的动画效果_圆圈往外扩展的样式css-CSDN博客

安宇雨 - 随手采集
2023-10-12 17:37:27
随手采集
0000-未整理-等待研究

圆圈实现向外扩展的动画效果，代码如下：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>    <title> CSS3实现涟漪呼吸扩散动画效果 </title>    </head><style>body{    background: #ccc;}.live{    border: 1px solid red;   position: relative;   width: 100px;   height: 100px;   margin:50px auto;}.live .span1{   border:1px solid blue;   width: 100px;   height: 100px;   border-radius: 50%;   z-index: 0;   margin-top: 0px;}@keyframes animate {    0%{        transform: scale(1);        opacity: 0.5;      }    50%{        transform: scale(1.5);          opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/    }    100%{        transform: scale(1);        opacity: 0.5;    }}.live span{    position: absolute;    width: 100px;    height: 100px;    left: 0;    bottom: 0;    background: #fff;    border-radius: 50%;    -webkit-animation: animate 3s linear infinite;    z-index: -1;}.live span:nth-child(2){    -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/}</style><body>    <div class="live">         <!-- 这里的p标签可以换成一个img标签，用一个圆形的图片放在中间，周围实现扩散的效果图-->         <!-- <img src="" alt=""> -->         <p class="span1"></p>         <span></span>         <span></span>     </div> <script type="text/javascript"> </script></body></html>

原网址: 访问
创建于: 2023-10-12 17:37:27
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到