纯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-child(22) .bar.-middle {
  -webkit-animation-delay: -1320ms;
          animation-delay: -1320ms;
}
.waveline:nth-child(22) .bar.-bottom {
  -webkit-animation-delay: -2120ms;
          animation-delay: -2120ms;
}
.waveline:nth-child(23) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(23) .bar.-middle {
  -webkit-animation-delay: -1380ms;
          animation-delay: -1380ms;
}
.waveline:nth-child(23) .bar.-bottom {
  -webkit-animation-delay: -2180ms;
          animation-delay: -2180ms;
}
.waveline:nth-child(24) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(24) .bar.-middle {
  -webkit-animation-delay: -1440ms;
          animation-delay: -1440ms;
}
.waveline:nth-child(24) .bar.-bottom {
  -webkit-animation-delay: -2240ms;
          animation-delay: -2240ms;
}
.waveline:nth-child(25) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(25) .bar.-middle {
  -webkit-animation-delay: -1500ms;
          animation-delay: -1500ms;
}
.waveline:nth-child(25) .bar.-bottom {
  -webkit-animation-delay: -2300ms;
          animation-delay: -2300ms;
}
.waveline:nth-child(26) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(26) .bar.-middle {
  -webkit-animation-delay: -1560ms;
          animation-delay: -1560ms;
}
.waveline:nth-child(26) .bar.-bottom {
  -webkit-animation-delay: -2360ms;
          animation-delay: -2360ms;
}
.waveline:nth-child(27) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(27) .bar.-middle {
  -webkit-animation-delay: -1620ms;
          animation-delay: -1620ms;
}
.waveline:nth-child(27) .bar.-bottom {
  -webkit-animation-delay: -2420ms;
          animation-delay: -2420ms;
}
.waveline:nth-child(28) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(28) .bar.-middle {
  -webkit-animation-delay: -1680ms;
          animation-delay: -1680ms;
}
.waveline:nth-child(28) .bar.-bottom {
  -webkit-animation-delay: -2480ms;
          animation-delay: -2480ms;
}
.waveline:nth-child(29) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(29) .bar.-middle {
  -webkit-animation-delay: -1740ms;
          animation-delay: -1740ms;
}
.waveline:nth-child(29) .bar.-bottom {
  -webkit-animation-delay: -2540ms;
          animation-delay: -2540ms;
}
.waveline:nth-child(30) {
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
}
.waveline:nth-child(30) .bar.-middle {
  -webkit-animation-delay: -1800ms;
          animation-delay: -1800ms;
}
.waveline:nth-child(30) .bar.-bottom {
  -webkit-animation-delay: -2600ms;
          animation-delay: -2600ms;
}

.bar {
  position: relative;
  width: 100%;
  margin: 5px 0;
}
.bar.-top {
  -webkit-box-flex: 1;
          flex: 1;
}
.bar.-top .wall {
  background: #38ddff;
}
.bar.-top .wall.-left, .bar.-top .wall.-right {
  background: #24c9eb;
}
.bar.-middle {
  -webkit-animation: breeze 4000ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: breeze 4000ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.bar.-middle .wall {
  background: #ffe2f2;
}
.bar.-middle .wall.-left, .bar.-middle .wall.-right {
  background: #ebcede;
}
.bar.-bottom {
  -webkit-animation: breeze 4000ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: breeze 4000ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.bar.-bottom .wall {
  background: #46e61f;
}
.bar.-bottom .wall.-left, .bar.-bottom .wall.-right {
  background: #32d20b;
}

.wall {
  position: absolute;
}
.wall.-front {
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(6px);
          transform: translateZ(6px);
}
.wall.-back {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateX(180deg) translateZ(6px);
          transform: rotateX(180deg) translateZ(6px);
}
.wall.-left {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(90deg) translateZ(6px);
          transform: rotateY(90deg) translateZ(6px);
}
.wall.-right {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(-90deg) translateZ(6px);
          transform: rotateY(-90deg) translateZ(6px);
}
.wall.-top {
  width: 12px;
  height: 12px;
  -webkit-transform: rotateX(90deg) translateZ(6px);
          transform: rotateX(90deg) translateZ(6px);
}
.wall.-bottom {
  bottom: 0;
  width: 12px;
  height: 12px;
  -webkit-transform: rotateX(-90deg) translateZ(6px);
          transform: rotateX(-90deg) translateZ(6px);
}

@-webkit-keyframes breeze {
  0% {
    height: 10%;
  }
  50% {
    height: 42%;
  }
  100% {
    height: 10%;
  }
}

@keyframes breeze {
  0% {
    height: 10%;
  }
  50% {
    height: 42%;
  }
  100% {
    height: 10%;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
</style>

</head>
<body translate="no">
<div class="title">BREEZE</div>
<div class="wavy">
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
 </div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -middle">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
<div class="bar -bottom">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class="wall -bottom"></div>
<div class="wall -left"></div>
<div class="wall -right"></div>
</div>
</div>
<div class="waveline">
<div class="bar -top">
<div class="wall -front"></div>
<div class="wall -back"></div>
<div class="wall -top"></div>
<div class=".........完整代码请登录后点击上方下载按钮下载查看