纯css实现图片波浪扭曲动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现图片波浪扭曲动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
html, body {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  perspective: 40em;
  perspective-origin: 50% calc(50% - 16em);
  background: dimgrey;
}

.surface {
  top: 50%;
  left: 50%;
  margin: -8em -9em;
  transform: rotateX(45deg) rotate(30deg);
  animation: rot 13.5s linear infinite alternate;
}
.surface, .surface * {
  transform-style: preserve-3d;
}
.surface, .surface :before {
  width: 18em;
  height: 16em;
}
.surface, .surface :before, .surface :after {
  position: absolute;
}

.strip {
  float: left;
  overflow: hidden;
  width: 0.25em;
  height: 16em;
  animation: wave 9s linear infinite;
}
.strip:nth-child(1) {
  transform: translateZ(0em) rotateY(-54.38583deg) scaleX(1.75141);
  animation-delay: 0s;
}
.strip:nth-child(1):before {
  margin-left: 0em;
}
.strip:nth-child(2) {
  transform: translateZ(0.34862em) rotateY(-54.28248deg) scaleX(1.74701);
  animation-delay: -0.125s;
}
.strip:nth-child(2):before {
  margin-left: -0.25em;
}
.strip:nth-child(3) {
  transform: translateZ(0.69459em) rotateY(-53.97013deg) scaleX(1.73387);
  animation-delay: -0.25s;
}
.strip:nth-child(3):before {
  margin-left: -0.5em;
}
.strip:nth-child(4) {
  transform: translateZ(1.03528em) rotateY(-53.44173deg) scaleX(1.7122);
  animation-delay: -0.375s;
}
.strip:nth-child(4):before {
  margin-left: -0.75em;
}
.strip:nth-child(5) {
  transform: translateZ(1.36808em) rotateY(-52.68533deg) scaleX(1.68235);
  animation-delay: -0.5s;
}
.strip:nth-child(5):before {
  margin-left: -1em;
}
.strip:nth-child(6) {
  transform: translateZ(1.69047em) rotateY(-51.68368deg) scaleX(1.64481);
  animation-delay: -0.625s;
}
.strip:nth-child(6):before {
  margin-left: -1.25em;
}
.strip:nth-child(7) {
  transform: translateZ(2em) rotateY(-50.41386deg) scaleX(1.60021);
  animation-delay: -0.75s;
}
.strip:nth-child(7):before {
  margin-left: -1.5em;
}
.strip:nth-child(8) {
  transform: translateZ(2.29431em) rotateY(-48.834deg) scaleX(1.54937);
  animation-delay: -0.875s;
}
.strip:nth-child(8):before {
  margin-left: -1.75em;
}
.strip:nth-child(9) {
  transform: translateZ(2.57115em) rotateY(-46.92836deg) scaleX(1.49329);
  animation-delay: -1s;
}
.strip:nth-child(9):before {
  margin-left: -2em;
}
.strip:nth-child(10) {
  transform: translateZ(2.82843em) rotateY(-44.60806deg) scaleX(1.43315);
  animation-delay: -1.125s;
}
.strip:nth-child(10):before {
  margin-left: -2.25em;
}
.strip:nth-child(11) {
  transform: translateZ(3.06418em) rotateY(-41.89075deg) scaleX(1.37037);
  animation-delay: -1.25s;
}
.strip:nth-child(11):before {
  margin-left: -2.5em;
}
.strip:nth-child(12) {
  transform: translateZ(3.27661em) rotateY(-38.67058deg) scaleX(1.30663);
  animation-delay: -1.375s;
}
.strip:nth-child(12):before {
  margin-left: -2.75em;
}
.strip:nth-child(13) {
  transform: translateZ(3.4641em) rotateY(-34.89639deg) scaleX(1.24385);
  animation-delay: -1.5s;
}
.strip:nth-child(13):before {
  margin-left: -3em;
}
.strip:nth-child(14) {
  transform: translateZ(3.62523em) rotateY(-30.53146deg) scaleX(1.18425);
  animation-delay: -1.625s;
}
.strip:nth-child(14):before {
  margin-left: -3.25em;
}
.strip:nth-child(15) {
  transform: translateZ(3.75877em) rotateY(-25.51167deg) scaleX(1.13027);
  animation-delay: -1.75s;
}
.strip:nth-child(15):before {
  margin-left: -3.5em;
}
.strip:nth-child(16) {
  transform: translateZ(3.8637em) rotateY(-19.86156deg) scaleX(1.08452);
  animation-delay: -1.875s;
}
.strip:nth-child(16):before {
  margin-left: -3.75em;
}
.strip:nth-child(17) {
  transform: translateZ(3.93923em) rotateY(-13.62147deg) scaleX(1.04953);
  animation-delay: -2s;
}
.strip:nth-child(17):before {
  margin-left: -4em;
}
.strip:nth-child(18) {
  transform: translateZ(3.98478em) rotateY(-6.93605deg) scaleX(1.02752);
  animation-delay: -2.125s;
}
.strip:nth-child(18):before {
  margin-left: -4.25em;
}
.strip:nth-child(19) {
  transform: translateZ(4em) rotateY(0deg) scaleX(1.02);
  animation-delay: -2.25s;
}
.strip:nth-child(19):before {
  margin-left: -4.5em;
}
.strip:nth-child(20) {
  transform: translateZ(3.98478em) rotateY(6.93605deg) scaleX(1.02752);
  animation-delay: -2.375s;
}
.strip:nth-child(20):before {
  margin-left: -4.75em;
}
.strip:nth-child(21) {
  transform: translateZ(3.93923em) rotateY(13.62147deg) scaleX(1.04953);
  animation-delay: -2.5s;
}
.strip:nth-child(21):before {
  margin-left: -5em;
}
.strip:nth-child(22) {
  transform: translateZ(3.8637em) rotateY(19.86156deg) scaleX(1.08452);
  animation-delay: -2.625s;
}
.strip:nth-child(22):before {
  margin-left: -5.25em;
}
.strip:nth-child(23) {
  transform: translateZ(3.75877em) rotateY(25.51167deg) scaleX(1.13027);
  animation-delay: -2.75s;
}
.strip:nth-child(23):before {
  margin-left: -5.5em;
}
.strip:nth-child(24) {
  transform: translateZ(3.62523em) rotateY(30.53146deg) scaleX(1.18425);
  animation-delay: -2.875s;
}
.strip:nth-child(24):before {
  margin-left: -5.75em;
}
.strip:nth-child(25) {
  transform: translateZ(3.4641em) rotateY(34.89639deg) scaleX(1.24385);
  animation-delay: -3s;
}
.strip:nth-child(25):before {
  margin-left: -6em;
}
.strip:nth-child(26) {
  transform: translateZ(3.27661em) rotateY(38.67058deg) scaleX(1.30663);
  animation-delay: -3.125s;
}
.strip:nth-child(26):before {
  margin-left: -6.25em;
}
.strip:nth-child(27) {
  transform: translateZ(3.06418em) rotateY(41.89075deg) scaleX(1.37037);
  animation-delay: -3.25s;
}
.strip:nth-child(27):before {
  margin-left: -6.5em;
}
.strip:nth-child(28) {
  transform: translateZ(2.82843em) rotateY(44.60806deg) scaleX(1.43315);
  animation-delay: -3.375s;
}
.strip:nth-child(28):before {
  margin-left: -6.75em;
}
.strip:nth-child(29) {
  transform: translateZ(2.57115em) rotateY(46.92836deg) scaleX(1.49329);
  animation-delay: -3.5s;
}
.strip:nth-child(29):before {
  margin-left: -7em;
}
.strip:nth-child(30) {
  transform: translateZ(2.29431em) rotateY(48.834deg) scaleX(1.54937);
  animation-delay: -3.625s;
}
.strip:nth-child(30):before {
  margin-left: -7.25em;
}
.strip:nth-child(31) {
  transform: translateZ(2em) rotateY(50.41386deg) scaleX(1.60021);
  animation-delay: -3.75s;
}
.strip:nth-child(31):before {
  margin-left: -7.5em;
}
.strip:nth-child(32) {
  transform: translateZ(1.69047em) rotateY(51.68368deg) scaleX(1.64481);
  animation-delay: -3.875s;
}
.strip:nth-child(32):before {
  margin-left: -7.75em;
}
.strip:nth-child(33) {
  transform: translateZ(1.36808em) rotateY(52.68533deg) scaleX(1.68235);
  animation-delay: -4s;
}
.strip:nth-child(33):before {
  margin-left: -8em;
}
.strip:nth-child(34) {
  transform: translateZ(1.03528em) rotateY(53.44173deg) scaleX(1.7122);
  animation-delay: -4.125s;
}
.strip:nth-child(34):before {
  margin-left: -8.25em;
}
.strip:nth-child(35) {
  transform: translateZ(0.69459em) rotateY(53.97013deg) scaleX(1.73387);
  animation-delay: -4.25s;
}
.strip:nth-child(35):before {
  margin-left: -8.5em;
}
.strip:nth-child(36) {
  transform: translateZ(0.34862em) rotateY(54.28248deg) scaleX(1.74701);
  animation-delay: -4.375s;
}
.strip:nth-child(36):before {
  margin-left: -8.75em;
}
.strip:nth-child(37) {
  transform: translateZ(0em) rotateY(54.38583deg) scaleX(1.75141);
  animation-delay: -4.5s;
}
.strip:nth-child(37):before {
  margin-left: -9em;
}
.strip:nth-child(38) {
  transform: translateZ(-0.34862em) rotateY(54.28248deg) scaleX(1.74701);
  animation-delay: -4.625s;
}
.strip:nth-child(38):before {
  margin-left: -9.25em;
}
.strip:nth-child(39) {
  transform: translateZ(-0.69459em) rotateY(53.97013deg) scaleX(1.73387);
  animation-delay: -4.75s;
}
.strip:nth-child(39):before {
  margin-left: -9.5em;
}
.strip:nth-child(40) {
  transform: translateZ(-1.03528em) rotateY(53.44173deg) scaleX(1.7122);
  animation-delay: -4.875s;
}
.strip:nth-child(40):before {
  margin-left: -9.75em;
}
.strip:nth-child(41) {
  transform: translateZ(-1.36808em) rotateY(52.68533deg) scaleX(1.68235);
  animation-delay: -5s;
}
.strip:nth-child(41):before {
  margin-left: -10em;
}
.strip:nth-child(42) {
  transform: translateZ(-1.69047em) rotateY(51.68368deg) scaleX(1.64481);
  animation-delay: -5.125s;
}
.strip:nth-child(42):before {
  margin-left: -10.25em;
}
.strip:nth-child(43) {
  transform: translateZ(-2em) rotateY(50.41386deg) scaleX(1.60021);
  animation-delay: -5.25s;
}
.strip:nth-child(43):before {
  margin-left: -10.5em;
}
.strip:nth-child(44) {
  transform: translateZ(-2.29431em) rotateY(48.834deg) scaleX(1.54937);
  animation-delay: -5.375s;
}
.strip:nth-child(44):before {
  margin-left: -10.75em;
}
.strip:nth-child(45) {
  transform: translateZ(-2.57115em) rotateY(46.92836deg) scaleX(1.49329);
  animation-delay: -5.5s;
}
.strip:nth-child(45):before {
  margin-left: -11em;
}
.strip:nth-child(46) {
  transform: translateZ(-2.82843em) rotateY(44.60806deg) scaleX(1.43315);
  animation-delay: -5.625s;
}
.strip:nth-child(46):before {
  margin-left: -11.25em;
}
.strip:nth-child(47) {
  transform: translateZ(-3.06418em) rotateY(41.89075deg) scaleX(1.37037);
  animation-delay: -5.75s;
}
.strip:nth-child(47):before {
  margin-left: -11.5em;
}
.strip:nth-child(48) {
  transform: translateZ(-3.27661em) rotateY(38.67058deg) scaleX(1.30663);
  animation-delay: -5.875s;
}
.strip:nth-child(48):before {
  margin-left: -11.75em;
}
.strip:nth-child(49) {
  transform: translateZ(-3.4641em) rotateY(34.89639deg) scaleX(1.24385);
  animation-delay: -6s;
}
.strip:nth-child(49):before {
  margin-left: -12em;
}
.strip:nth-child(50) {
  transform: translateZ(-3.62523em) rotateY(30.53146deg) scaleX(1.18425);
  animation-delay: -6.125s;
}
.strip:nth-child(50):before {
  margin-left: -12.25em;
}
.strip:nth-child(51) {
  transform: translateZ(-3.75877em) rotateY(25.51167deg) scaleX(1.13027);
  animation-delay: -6.25s;
}
.strip:nth-child(51):before {
  margin-left: -12.5em;
}
.strip:nth-child(52) {
  transform: translateZ(-3.8637em) rotateY(19.86156deg) scaleX(1.08452);
  animation-delay: -6.375s;
}
.strip:nth-child(52):before {
  margin-left: -12.75em;
}
.strip:nth-child(53) {
  transform: translateZ(-3.93923em) rotateY(13.62147deg) scaleX(1.04953);
  animation-delay: -6.5s;
}
.strip:nth-child(53):before {
  margin-left: -13em;
}
.strip:nth-child(54) {
  transform: translateZ(-3.98478em) rotateY(6.93605deg) scaleX(1.02752);
  animation-delay: -6.625s;
}
.strip:nth-child(54):before {
  margin-left: -13.25em;
}
.strip:nth-child(55) {
  transform: translateZ(-4em) rotateY(0deg) scaleX(1.02);
  animation-delay: -6.75s;
}
.strip:nth-child(55):before {
  margin-left: -13.5em;
}
.strip:nth-child(56) {
  transform: translateZ(-3.98478em) rotateY(-6.93605deg) scaleX(1.02752);
  animation-delay: -6.875s;
}
.strip:nth-child(56):before {
  margin-left: -13.75em;
}
.strip:nth-child(57) {
  transform: translateZ(-3.93923em) rotateY(-13.62147deg) scaleX(1.04953);
  animation-delay: -7s;
}
.strip:nth-child(57):before {
  margin-left: -14em;
}
.strip:nth-child(58) {
  transform: translateZ(-3.8637em) rotateY(-19.86156deg) scaleX(1.08452);
  animation-delay: -7.125s;
}
.strip:nth-child(58):before {
  margin-left: -14.25em;
}
.strip:nth-child(59) {
  transform: translateZ(-3.75877em) rotateY(-25.51167deg) scaleX(1.13027);
  animation-delay: -7.25s;
}
.strip:nth-child(59):before {
  margin-left: -14.5em;
}
.strip:nth-child(60) {
  transform: translateZ(-3.62523em) rotateY(-30.53146deg) scaleX(1.18425);
  animation-delay: -7.375s;
}
.strip:nth-child(60):before {
  margin-left: -14.75em;
}
.strip:nth-child(61) {
  transform: translateZ(-3.4641em) rotateY(-34.89639deg) scaleX(1.24385);
  animation-delay: -7.5s;
}
.strip:nth-child(61):before {
  margin-left: -15em;
}
.strip:nth-child(62) {
  transform: translateZ(-3.27661em) rotateY(-38.67058deg) scaleX(1.30663);
  animation-delay: -7.625s;
}
.strip:nth-child(62):before {
  margin-left: -15.25em;
}
.strip:nth-child(63) {
  transform: translateZ(-3.06418em) rotateY(-41.89075deg) scaleX(1.37037);
  animation-delay: -7.75s;
}
.strip:nth-child(63):before {
  margin-left: -15.5em;
}
.s.........完整代码请登录后点击上方下载按钮下载查看