想必大家做静态的波浪线比较多，但是如果让静态的波浪线动起来，就很麻烦不会，接下来我就教大家如何让静态的波浪线动起来，教学代码和效果截图如下：

svg class=waves xmlns=https://www.w3.org/2000/svg xmlns:xlink=https://www.w3.org/1999/xlinkviewBox=0 24 150 28 preserveAspectRatio=none shape-rendering=autodefspath id=gentle-waved=M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z //defsg class=parallaxuse xlink:href=#gentle-wave x=48 y=7 fill=#FFFFFF //g/svg/* 动态波浪线 */.waves{position: absolute;width: 100%;min-height: 100px;max-height: 180px;bottom: 0;left: 0;right: 0;z-index: 9;}.parallaxuse{animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}.parallaxuse:nth-child(1){animation-delay: -2s;animation-duration: 7s;}@keyframes move-forever {0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}}这期还教大家如何搭建3D魔方，代码以及效果如下：

div class=mofangdiv class=cube id=imggdiv class=frontimg src=imgs/img213.jpg //divdiv class=backimg src=imgs/img214.jpg //divdiv class=rightimg src=imgs/img215.jpg //divdiv class=leftimg src=imgs/img216.jpg //divdiv class=top/divdiv class=bottom/div/divbutton class=btn-prev type=button onclick=SetImgRotate(0) id=btnLeftimg src=imgs/img21.png //buttonbutton class=btn-next type=button onclick=SetImgRotate(1) id=btnRightimg src=imgs/img22.png //button/divscriptvar currentY = -10;function SetImgRotate(leftOrRight) {var img = document.getElementById(imgg);var c1 = document.getElementById(c02-1);var c2 = document.getElementById(c02-2);var c3 = document.getElementById(c02-3);var c4 = document.getElementById(c02-4);if (leftOrRight == 0) {currentY = (currentY - 90) % 360;if (currentY == -100) {c1.style.display = none;c2.style.display = block;c3.style.display = none;c4.style.display = none;} else if (currentY == -190) {c1.style.display = none;c2.style.display = none;c3.style.display = block;c4.style.display = none;} else if (currentY == -280) {c1.style.display = none;c2.style.display = none;c3.style.display = none;c4.style.display = block;} else {c1.style.display = block;c2.style.display = none;c3.style.display = none;c4.style.display = none;}} else if (leftOrRight == 1) {currentY = (currentY + 90) % 360;if (currentY == 80) {c1.style.display = none;c2.style.display = none;c3.style.display = none;c4.style.display = block;} else if (currentY == 170) {c1.style.display = none;c2.style.display = none;c3.style.display = block;c4.style.display = none;} else if (currentY == 260) {c1.style.display = none;c2.style.display = block;c3.style.display = none;c4.style.display = none;} else {c1.style.display = block;c2.style.display = none;c3.style.display = none;c4.style.display = none;}}img.style.transform = rotateX(-10deg) rotateY( + currentY + deg) rotateZ(0deg);img.style.transition = all 1s;}/scriptstyle.mofang {position: relative;top: 0;left: 0;right: 0;bottom: 0;/* perspective: 1000px; */}.cube {position: relative;font-size: 80px;width: 500px;height: 500px;margin: 150px auto;transform-style: preserve-3d;transform-origin: center center 250px;transition:transform 1s linear;transform: rotateX(-10deg) rotateY(-10deg) rotate(0deg);}.cubediv {position: absolute;width: 500px;height: 500px;}.front {/* background: red; */transform: translateZ(500px);transform-origin: top;}.top {background: white;/* background: green; */transform: rotateX(90deg);transform-origin: top;}.right {/* background: pink; */transform: rotateY(90deg);transform-origin: right;}.left {/* background: orange; */transform: rotateY(-90deg);transform-origin: left;}.bottom {background: white;/* background: purple; */transform: rotateX(-90deg);transform-origin: bottom;}.back {background: white;/* background: blue; */transform: rotateY(180deg);}.cube img{width: 100%;max-width: 100%;height: 100%;object-fit: cover;}.btn-prev{position: absolute;left: 5%;top: 50%;transform: translateY(-50%);border: none;background: transparent;cursor: pointer;}.btn-next{position: absolute;right: 5%;top: 50%;transform: translateY(-50%);border: none;background: transparent;cursor: pointer;}/style以上就是动态波浪线和3D魔方搭建的全部原生js和css，大家有没有看懂的地方可以给我留言，我会一一为大家解答，如果大家还有不会的效果可以给我留言，我会在下期的文章中为大家答疑解惑，感谢各位大佬的关注与支持，以此致谢！

网站前端制作之动态波浪线和3D魔方的那些事_成都网站制作   https://cdnanqi.cn/wangzhanzhizuo/10968.html