css圆形扩散动画

最新推荐文章于 2024-05-24 12:56:59 发布

niesiyuan000

最新推荐文章于 2024-05-24 12:56:59 发布

阅读量1.3k

点赞数 2

分类专栏： Javascript 文章标签： css css3 html

本文链接：https://blog.csdn.net/niesiyuan000/article/details/128144061

版权

Javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title> CSS3实现涟漪呼吸扩散动画效果 </title>
</head>
<style>
  body{
    background: papayawhip;
  }
  .coning{
    width: 526px;
    height: 526px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #E7C8FF;
    backdrop-filter: blur(5px);
    margin: 198px auto 0;
    position: relative;
  }
  .coning .animateCont{
    width: 263px;
    height: 263px;
    background: #9B15FF;
    position: absolute;
    left: 25%;
    top: 25%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    -webkit-animation: animate 3s linear infinite;
    z-index: -1;
  }
  @keyframes animate {
    0%{
      transform: scale(1);
      opacity: 0.3;  
    }
    50%{
      transform: scale(2);  
      opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
    }
    100%{
      transform: scale(1);
      opacity: 0.3;
    }
  }
</style>
<body>
  
  <div class="coning">
    <div class="animateCont"></div>
  </div>
</body>
</html>