纯css实现涟漪动画效果

zhuanbike 2022-8-30 652

CSS部分:

body{
    background-color: rgb(62, 178, 224);
  }
  .content{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 100px;  /*width和height必须设置,不然就不是从中间向外扩散了*/
    height: 100px;
    margin: 175px auto;
  }
  .wave{
    display: flex;
    justify-content: center;
    align-items:center;
    border: white 1px solid;
  }
  .wave1 {
    animation:wave1 1.5s linear infinite;
  }
  .wave2{
    animation:wave2 1.5s linear infinite;
  }
  .wave3{
    animation:wave3 1.5s linear infinite;
  }
  @keyframes wave3{
    from{width: 2px;height: 2px;border-radius: 1px;}
    to{width: 20px;height: 20px;border-radius: 10px;}
  } 
  @keyframes wave2{
    from{width: 20px;height: 20px;border-radius: 10px;}
    to{width: 50px;height: 50px;border-radius: 25px;}
  } 
  @keyframes wave1{
    from{width: 50px;height: 50px;border-radius: 25px;}
    to{width: 100px;height: 100px;border-radius: 50px;}
  }

html部分:

<body>
  <div class="content">
    <div class="wave wave1">
      <div class="wave wave2">
        <div class="wave wave3"></div>
      </div>
    </div>
  </div>
</body>


最新回复 (0)
发新帖