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

 
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />





 
/* 动态波浪线 */
.waves{position: absolute;width: 100%;min-height: 100px;max-height: 180px;bottom: 0;left: 0;right: 0;z-index: 9;}
.parallax>use{animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}
.parallax>use: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魔方，代码以及效果如下：
 

 

 

 

 
以上就是动态波浪线和3D魔方搭建的全部原生js和css，大家有没有看懂的地方可以给我留言，我会一一为大家解答，如果大家还有不会的效果可以给我留言，我会在下期的文章中为大家答疑解惑，感谢各位大佬的关注与支持，以此致谢！