水波效果

下载代码

html

css

分享到微信朋友圈

html

css

html, body {
  background-color: #252222;
  width: 100%;
  height: 100%;
}

.sound-container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -70px;
}

.sound {
  position: relative;
  width: 140px;
  height: 140px;
  padding: 0;
  border-radius: 200px;
  list-style: none;
  overflow: hidden;
  z-index: 2;
}
.sound li {
  background: #f16880;
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 0%;
  height: 0%;
  border-radius: 50%;
}
.sound li:nth-child(1) {
  opacity: 0.2;
  -webkit-animation: zoom1 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
          animation: zoom1 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.sound li:nth-child(2) {
  opacity: 0.3;
  -webkit-animation: zoom2 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
          animation: zoom2 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sound li:nth-child(3) {
  opacity: 0.5;
  -webkit-animation: zoom3 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
          animation: zoom3 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.sound li:nth-child(4) {
  opacity: 0.6;
  -webkit-animation: zoom4 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
          animation: zoom4 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes zoom1 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 100%;
    height: 100%;
  }
  50% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
}

@keyframes zoom1 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 100%;
    height: 100%;
  }
  50% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
}
@-webkit-keyframes zoom2 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 75%;
    height: 75%;
  }
  50% {
    opacity: 0;
    width: 75%;
    height: 75%;
  }
  100% {
    opacity: 0;
    width: 75%;
    height: 75%;
  }
}
@keyframes zoom2 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 75%;
    height: 75%;
  }
  50% {
    opacity: 0;
    width: 75%;
    height: 75%;
  }
  100% {
    opacity: 0;
    width: 75%;
    height: 75%;
  }
}
@-webkit-keyframes zoom3 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 50%;
    height: 50%;
  }
  50% {
    opacity: 0;
    width: 50%;
    height: 50%;
  }
  100% {
    opacity: 0;
    width: 50%;
    height: 50%;
  }
}
@keyframes zoom3 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 50%;
    height: 50%;
  }
  50% {
    opacity: 0;
    width: 50%;
    height: 50%;
  }
  100% {
    opacity: 0;
    width: 50%;
    height: 50%;
  }
}
@-webkit-keyframes zoom4 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 25%;
    height: 25%;
  }
  50% {
    opacity: 0;
    width: 25%;
    height: 25%;
  }
  100% {
    opacity: 0;
    width: 25%;
    height: 25%;
  }
}
@keyframes zoom4 {
  0% {
    width: 0%;
    height: 0%;
  }
  35% {
    width: 25%;
    height: 25%;
  }
  50% {
    opacity: 0;
    width: 25%;
    height: 25%;
  }
  100% {
    opacity: 0;
    width: 25%;
    height: 25%;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg