纯CSS绘制好看的波浪动画效果

寻梦xunm| 495| 收集

2年前

超过947天温馨提示

本文最后更新于2022年04月19日，已超过947天没有更新，若内容或图片失效，请留言反馈。

html

<div class='container'>

  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
</div>

css

* {

  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);overflow: hidden
}

.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}

body {
  background: #2c3e50;
}

.container {
  position: relative;
  width: 10em;
  height: 5em;
  font-size: 50px;
  overflow: hidden;
}
.wave {
  border-width: 0.1em;
  border-style: solid;
  position: absolute;
  -webkit-animation: wave 1500ms infinite alternate;
          animation: wave 1500ms infinite alternate;
  transform: rotate(-44.5deg);
}
.wave:nth-child(1) {
  width: 9.5125em;
  height: 9.5125em;
  bottom: -4.75625em;
  left: 0.24375em;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
  border-color: transparent transparent #1abc9c #1abc9c;
  border-radius: 9.5125em;
}
.wave:nth-child(2) {
  width: 9.025em;
  height: 9.025em;
  bottom: -4.5125em;
  left: 0.4875em;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.90476) rgba(26, 188, 156, 0.90476);
  border-radius: 9.025em;
}
.wave:nth-child(3) {
  width: 8.5375em;
  height: 8.5375em;
  bottom: -4.26875em;
  left: 0.73125em;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.85714) rgba(26, 188, 156, 0.85714);
  border-radius: 8.5375em;
}
.wave:nth-child(4) {
  width: 8.05em;
  height: 8.05em;
  bottom: -4.025em;
  left: 0.975em;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.80952) rgba(26, 188, 156, 0.80952);
  border-radius: 8.05em;
}
.wave:nth-child(5) {
  width: 7.5625em;
  height: 7.5625em;
  bottom: -3.78125em;
  left: 1.21875em;
  -webkit-animation-delay: 375ms;
          animation-delay: 375ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.7619) rgba(26, 188, 156, 0.7619);
  border-radius: 7.5625em;
}
.wave:nth-child(6) {
  width: 7.075em;
  height: 7.075em;
  bottom: -3.5375em;
  left: 1.4625em;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.71429) rgba(26, 188, 156, 0.71429);
  border-radius: 7.075em;
}
.wave:nth-child(7) {
  width: 6.5875em;
  height: 6.5875em;
  bottom: -3.29375em;
  left: 1.70625em;
  -webkit-animation-delay: 525ms;
          animation-delay: 525ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.66667) rgba(26, 188, 156, 0.66667);
  border-radius: 6.5875em;
}
.wave:nth-child(8) {
  width: 6.1em;
  height: 6.1em;
  bottom: -3.05em;
  left: 1.95em;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.61905) rgba(26, 188, 156, 0.61905);
  border-radius: 6.1em;
}
.wave:nth-child(9) {
  width: 5.6125em;
  height: 5.6125em;
  bottom: -2.80625em;
  left: 2.19375em;
  -webkit-animation-delay: 675ms;
          animation-delay: 675ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.57143) rgba(26, 188, 156, 0.57143);
  border-radius: 5.6125em;
}
.wave:nth-child(10) {
  width: 5.125em;
  height: 5.125em;
  bottom: -2.5625em;
  left: 2.4375em;
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.52381) rgba(26, 188, 156, 0.52381);
  border-radius: 5.125em;
}
.wave:nth-child(11) {
  width: 4.6375em;
  height: 4.6375em;
  bottom: -2.31875em;
  left: 2.68125em;
  -webkit-animation-delay: 825ms;
          animation-delay: 825ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.47619) rgba(26, 188, 156, 0.47619);
  border-radius: 4.6375em;
}
.wave:nth-child(12) {
  width: 4.15em;
  height: 4.15em;
  bottom: -2.075em;
  left: 2.925em;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.42857) rgba(26, 188, 156, 0.42857);
  border-radius: 4.15em;
}
.wave:nth-child(13) {
  width: 3.6625em;
  height: 3.6625em;
  bottom: -1.83125em;
  left: 3.16875em;
  -webkit-animation-delay: 975ms;
          animation-delay: 975ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.38095) rgba(26, 188, 156, 0.38095);
  border-radius: 3.6625em;
}
.wave:nth-child(14) {
  width: 3.175em;
  height: 3.175em;
  bottom: -1.5875em;
  left: 3.4125em;
  -webkit-animation-delay: 1050ms;
          animation-delay: 1050ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.33333) rgba(26, 188, 156, 0.33333);
  border-radius: 3.175em;
}
.wave:nth-child(15) {
  width: 2.6875em;
  height: 2.6875em;
  bottom: -1.34375em;
  left: 3.65625em;
  -webkit-animation-delay: 1125ms;
          animation-delay: 1125ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.28571) rgba(26, 188, 156, 0.28571);
  border-radius: 2.6875em;
}
.wave:nth-child(16) {
  width: 2.2em;
  height: 2.2em;
  bottom: -1.1em;
  left: 3.9em;
  -webkit-animation-delay: 1200ms;
          animation-delay: 1200ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.2381) rgba(26, 188, 156, 0.2381);
  border-radius: 2.2em;
}
.wave:nth-child(17) {
  width: 1.7125em;
  height: 1.7125em;
  bottom: -0.85625em;
  left: 4.14375em;
  -webkit-animation-delay: 1275ms;
          animation-delay: 1275ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.19048) rgba(26, 188, 156, 0.19048);
  border-radius: 1.7125em;
}
.wave:nth-child(18) {
  width: 1.225em;
  height: 1.225em;
  bottom: -0.6125em;
  left: 4.3875em;
  -webkit-animation-delay: 1350ms;
          animation-delay: 1350ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.14286) rgba(26, 188, 156, 0.14286);
  border-radius: 1.225em;
}
.wave:nth-child(19) {
  width: 0.7375em;
  height: 0.7375em;
  bottom: -0.36875em;
  left: 4.63125em;
  -webkit-animation-delay: 1425ms;
          animation-delay: 1425ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.09524) rgba(26, 188, 156, 0.09524);
  border-radius: 0.7375em;
}
.wave:nth-child(20) {
  width: 0.25em;
  height: 0.25em;
  bottom: -0.125em;
  left: 4.875em;
  -webkit-animation-delay: 1500ms;
          animation-delay: 1500ms;
  border-color: transparent transparent rgba(26, 188, 156, 0.04762) rgba(26, 188, 156, 0.04762);
  border-radius: 0.25em;
}

@-webkit-keyframes wave {
  to {
    transform: rotate(135deg);
  }
}

@keyframes wave {
  to {
    transform: rotate(135deg);
  }
}

css 波浪动画

0 赞 or 打赏

喜欢就打赏一点