想必大家做靜態(tài)的波浪線比較多，但是如果讓靜態(tài)的波浪線動起來，就很麻煩不會，接下來我就教大家如何讓靜態(tài)的波浪線動起來，教學代碼和效果截圖如下：
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="7" fill="#FFFFFF" />
</g>
</svg>
/* 動態(tài)波浪線 */
.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魔方，代碼以及效果如下：
<div class="mofang">
<div class="cube" id="imgg">
<div class="front">
<img src="imgs/img213.jpg" />
</div>
<div class="back">
<img src="imgs/img214.jpg" />
</div>
<div class="right">
<img src="imgs/img215.jpg" />
</div>
<div class="left">
<img src="imgs/img216.jpg" />
</div>
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<button class="btn-prev" type="button" onclick="SetImgRotate(0)" id="btnLeft">
<img src="imgs/img21.png" />
</button>
<button class="btn-next" type="button" onclick="SetImgRotate(1)" id="btnRight">
<img src="imgs/img22.png" />
</button>
</div>
<script>
var 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";
}
</script>
<style>
.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);
}
.cube>div {
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>
以上就是動態(tài)波浪線和3D魔方搭建的全部原生js和css，大家有沒有看懂的地方可以給我留言，我會一一為大家解答，如果大家還有不會的效果可以給我留言，我會在下期的文章中為大家答疑解惑，感謝各位大佬的關注與支持，以此致謝！
