所以我有這個波浪影片，但是當它重新啟動時它非常明顯。有沒有辦法讓這個影片更流暢，所以它只是回圈，而不注意到它重新啟動了影片？
這是波浪影片：
/* for the pen */
html, body {
margin: 0;
min-height: 100%;
background-color: #f2f2f2;
}
/* waves */
.ocean {
height: 80px; /* change the height of the waves here */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
.wave {
background: url("data:image/svg xml,");
position: absolute;
width: 200%;
height: 100%;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
}
.wave:nth-of-type(2) {
bottom: 0;
animation: wave 18s linear reverse infinite;
opacity: 0.5;
}
.wave:nth-of-type(3) {
bottom: 0;
animation: wave 20s -1s linear infinite;
opacity: 0.5;
}
@keyframes wave {
0% {transform: translateX(0);}
50% {transform: translateX(-25%);}
100% {transform: translateX(-50%);}
}<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>注意：啟動影片稍等片刻，你會看到影片的重啟并不順暢。三波在三個不同的時間重新開始，10 秒、18 秒和 20 秒。
uj5u.com熱心網友回復：
只需在 CSS 中添加另一個@Keyframe并更新持續時間。我只是更新了下面代碼片段中的所有更改，希望對您有所幫助。謝謝
/* for the pen */
html, body {
margin: 0;
min-height: 100%;
background-color: #f2f2f2;
}
/* waves */
.ocean {
height: 80px; /* change the height of the waves here */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
.wave {
background: url("data:image/svg xml,");
position: absolute;
width: 200%;
height: 100%;
animation: wave 15s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
}
.wave:nth-of-type(2) {
bottom: 0;
animation: wave 20s linear reverse infinite;
opacity: 0.5;
}
.wave:nth-of-type(3) {
bottom: 0;
animation: wave 25s -1s linear infinite;
opacity: 0.5;
}
@keyframes wave {
0% {transform: translateX(0);}
25% {transform: translateX(-25%);}
50% {transform: translateX(-50%);}
75% {transform: translateX(-25%);}
}<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408406.html
標籤：
上一篇：根據背景影像更改字體顏色