HTML結構

該css3線條波浪動畫效果的HTML結構如下：

CSS樣式

然后通過下面的CSS代碼來制作線條波浪動畫效果。

@keyframes move_wave {

0% {

transform: translateX(0) translateZ(0) scaleY(1)

}

50% {

transform: translateX(-25%) translateZ(0) scaleY(0.55)

}

100% {

transform: translateX(-50%) translateZ(0) scaleY(1)

}

}

.waveWrapper {

overflow: hidden;

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

}

.waveWrapperInner {

position: absolute;

width: 100%;

overflow: hidden;

height: 100%;

bottom: -1px;

background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);

}

.bgTop {

z-index: 15;

opacity: 0.5;

}

.bgMiddle {

z-index: 10;

opacity: 0.75;

}

.bgBottom {

z-index: 5;

}

.wave {

position: absolute;

left: 0;

width: 200%;

height: 100%;

background-repeat: repeat no-repeat;

background-position: 0 bottom;

transform-origin: center bottom;

}

.waveTop {

background-size: 50% 100px;

}

.waveAnimation .waveTop {

animation: move-wave 3s;

-webkit-animation: move-wave 3s;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.waveMiddle {

background-size: 50% 120px;

}

.waveAnimation .waveMiddle {

animation: move_wave 10s linear infinite;

}

.waveBottom {

background-size: 50% 100px;

}

.waveAnimation .waveBottom {

animation: move_wave 15s linear infinite;

}

總結

以上是生活随笔為你收集整理的css3 线条出现动画效果,CSS3实现的线条波浪动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。