随着CSS3的成熟，越来越多的特效动画不仅仅局限于使用图片来完成了。以前的这种波浪效果大都还是用几张图片交替滚动，我以前也用过图片做的这种波浪滚动的效果。
但是波浪的颜色能不能满足网站的配色需求之类的就很难弄了，因为换一个颜色就要去做一堆的图片出来，最后还可能不满意。直到后来我才找到了用SVG绘制波浪的效果，然后利用CSS3滚动就可以达到波浪滚动的目的了。
然后这种SVG绘制的波浪是可以自定颜色的，采用16进制的颜色代码。因为16进制制作透明度比较方便。当然了，最多支持7种颜色。你也可以使用全不透明的，然后制作一个彩虹的波浪也是可以的。
效果演示
白色的波浪展示
黑色的波浪展示
红色的波浪展示
代码解析
html(SVG)代码
>
>
白色的波浪展示
黑色的波浪展示
红色的波浪展示
css代码
h1{
margin: 0;
color: #ffffff;
text-align: center;
padding-top: 80px;
padding-bottom: 80px;
}
.waves1{
background-color: #0084ff;
}
.waves2{
background-color: #ffffff;
}
.waves3{
background-color: #000000;
}
#以下是主要代码
.waves {
position: relative;
width: 100%;
height: 7vh;
margin-bottom: -7px;
min-height: 100px;
max-height: 150px;
}
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
文章来源于互联网:纯CSS3制作的SVG自定义颜色动态滚动波浪动画
