html svg波浪,CSS3+SVG 实现波浪滚动效果

CSS3+SVG 实现波浪滚动效果

实现代码如下focus__a和focus__b是绝对定位，focus__b在focus__a之上

以下是HTML代码

以下是样式和CSS3动画代码

.focus__a {

background: url(images/focus_a.svg) repeat-x;

background-size: 450px;

-webkit-animation: ainuo_bgdwtop 3.5s infinite linear;

animation: ainuo_bgdwtop 3.5s infinite linear;

}

.focus__b {

background: url(images/focus_b.svg) repeat-x;

top: 5px;

background-size: 450px;

-webkit-animation: ainuo_bgdwbm 6s infinite linear;

animation: ainuo_bgdwbm 6s infinite linear;

}

@keyframes ainuo_bgdwbm{0%{background-position:0 top}100%{background-position:450px top}}

以下是focus_a.svg图的代码，直接文本形式保存成svg格式

以下是focus_b.svg图的代码，直接文本形式保存成svg格式

新增加另外一种办法

实现原理见代码

.waves {

/*position:relative;*/

position: absolute;

bottom: 0;

width: 100%;

height:15vh;

margin-bottom:-7px; /*Fix for safari gap*/

min-height:100px;

max-height:150px;

z-index: 5;

}

/* Animation */

.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);

}

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

.waves {

height:40px;

min-height:40px;

}

}