css3 线条出现动画效果,CSS3实现的线条波浪动画效果

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 {