纯css实现三维旋转波纹效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：纯css实现三维旋转波纹效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  font-family: 'Dosis', sans-serif;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-perspective: 800px;
          perspective: 800px;
}

div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.title {
  margin-bottom: 20px;
  font-size: 3rem;
  color: #38ddff;
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}

.wavy {
  display: -webkit-box;
  display: flex;
  -webkit-animation: rotate 28s linear infinite;
          animation: rotate 28s linear infinite;
}

.waveline {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 12px;
  height: 300px;
  margin: 0 5px;
}
.waveline:nth-child(1) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(1) .bar.-middle {
  -webkit-animation-delay: -60ms;
          animation-delay: -60ms;
}
.waveline:nth-child(1) .bar.-bottom {
  -webkit-animation-delay: -860ms;
          animation-delay: -860ms;
}
.waveline:nth-child(2) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(2) .bar.-middle {
  -webkit-animation-delay: -120ms;
          animation-delay: -120ms;
}
.waveline:nth-child(2) .bar.-bottom {
  -webkit-animation-delay: -920ms;
          animation-delay: -920ms;
}
.waveline:nth-child(3) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(3) .bar.-middle {
  -webkit-animation-delay: -180ms;
          animation-delay: -180ms;
}
.waveline:nth-child(3) .bar.-bottom {
  -webkit-animation-delay: -980ms;
          animation-delay: -980ms;
}
.waveline:nth-child(4) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(4) .bar.-middle {
  -webkit-animation-delay: -240ms;
          animation-delay: -240ms;
}
.waveline:nth-child(4) .bar.-bottom {
  -webkit-animation-delay: -1040ms;
          animation-delay: -1040ms;
}
.waveline:nth-child(5) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(5) .bar.-middle {
  -webkit-animation-delay: -300ms;
          animation-delay: -300ms;
}
.waveline:nth-child(5) .bar.-bottom {
  -webkit-animation-delay: -1100ms;
          animation-delay: -1100ms;
}
.waveline:nth-child(6) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(6) .bar.-middle {
  -webkit-animation-delay: -360ms;
          animation-delay: -360ms;
}
.waveline:nth-child(6) .bar.-bottom {
  -webkit-animation-delay: -1160ms;
          animation-delay: -1160ms;
}
.waveline:nth-child(7) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(7) .bar.-middle {
  -webkit-animation-delay: -420ms;
          animation-delay: -420ms;
}
.waveline:nth-child(7) .bar.-bottom {
  -webkit-animation-delay: -1220ms;
          animation-delay: -1220ms;
}
.waveline:nth-child(8) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(8) .bar.-middle {
  -webkit-animation-delay: -480ms;
          animation-delay: -480ms;
}
.waveline:nth-child(8) .bar.-bottom {
  -webkit-animation-delay: -1280ms;
          animation-delay: -1280ms;
}
.waveline:nth-child(9) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(9) .bar.-middle {
  -webkit-animation-delay: -540ms;
          animation-delay: -540ms;
}
.waveline:nth-child(9) .bar.-bottom {
  -webkit-animation-delay: -1340ms;
          animation-delay: -1340ms;
}
.waveline:nth-child(10) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(10) .bar.-middle {
  -webkit-animation-delay: -600ms;
          animation-delay: -600ms;
}
.waveline:nth-child(10) .bar.-bottom {
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}
.waveline:nth-child(11) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(11) .bar.-middle {
  -webkit-animation-delay: -660ms;
          animation-delay: -660ms;
}
.waveline:nth-child(11) .bar.-bottom {
  -webkit-animation-delay: -1460ms;
          animation-delay: -1460ms;
}
.waveline:nth-child(12) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(12) .bar.-middle {
  -webkit-animation-delay: -720ms;
          animation-delay: -720ms;
}
.waveline:nth-child(12) .bar.-bottom {
  -webkit-animation-delay: -1520ms;
          animation-delay: -1520ms;
}
.waveline:nth-child(13) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(13) .bar.-middle {
  -webkit-animation-delay: -780ms;
          animation-delay: -780ms;
}
.waveline:nth-child(13) .bar.-bottom {
  -webkit-animation-delay: -1580ms;
          animation-delay: -1580ms;
}
.waveline:nth-child(14) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(14) .bar.-middle {
  -webkit-animation-delay: -840ms;
          animation-delay: -840ms;
}
.waveline:nth-child(14) .bar.-bottom {
  -webkit-animation-delay: -1640ms;
          animation-delay: -1640ms;
}
.waveline:nth-child(15) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(15) .bar.-middle {
  -webkit-animation-delay: -900ms;
          animation-delay: -900ms;
}
.waveline:nth-child(15) .bar.-bottom {
  -webkit-animation-delay: -1700ms;
          animation-delay: -1700ms;
}
.waveline:nth-child(16) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(16) .bar.-middle {
  -webkit-animation-delay: -960ms;
          animation-delay: -960ms;
}
.waveline:nth-child(16) .bar.-bottom {
  -webkit-animation-delay: -1760ms;
          animation-delay: -1760ms;
}
.waveline:nth-child(17) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(17) .bar.-middle {
  -webkit-animation-delay: -1020ms;
          animation-delay: -1020ms;
}
.waveline:nth-child(17) .bar.-bottom {
  -webkit-animation-delay: -1820ms;
          animation-delay: -1820ms;
}
.waveline:nth-child(18) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(18) .bar.-middle {
  -webkit-animation-delay: -1080ms;
          animation-delay: -1080ms;
}
.waveline:nth-child(18) .bar.-bottom {
  -webkit-animation-delay: -1880ms;
          animation-delay: -1880ms;
}
.waveline:nth-child(19) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(19) .bar.-middle {
  -webkit-animation-delay: -1140ms;
          animation-delay: -1140ms;
}
.waveline:nth-child(19) .bar.-bottom {
  -webkit-animation-delay: -1940ms;
          animation-delay: -1940ms;
}
.waveline:nth-child(20) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(20) .bar.-middle {
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}
.waveline:nth-child(20) .bar.-bottom {
  -webkit-animation-delay: -2000ms;
          animation-delay: -2000ms;
}
.waveline:nth-child(21) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(21) .bar.-middle {
  -webkit-animation-delay: -1260ms;
          animation-delay: -1260ms;
}
.waveline:nth-child(21) .bar.-bottom {
  -webkit-animation-delay: -2060ms;
          animation-delay: -2060ms;
}
.waveline:nth-child(22) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth.........完整代码请登录后点击上方下载按钮下载查看