CSS3+SVG 实现波浪滚动效果
实现代码如下focus__a和focus__b是绝对定位，focus__b在focus__a之上
以下是HTML代码
<div class="ainuo_focus_bot">
<div class="focus__a"></div>
<div class="focus__b"></div>
</div>
以下是样式和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格式
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.comiis.com/">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -133.000000)" fill-opacity="0.3" fill="#ffffff">
<g id="water-1" sketch:type="MSLayerGroup" transform="translate(121.000000, 133.000000)">
<path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
以下是focus_b.svg图的代码，直接文本形式保存成svg格式
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.comiis.com/">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -246.000000)" fill="#ffffff">
<g id="water-2" sketch:type="MSLayerGroup" transform="translate(121.000000, 246.000000)">
<path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-2" sketch:type="MSShapeGroup" transform="translate(300.000000, 30.000000) scale(-1, 1) translate(-300.000000, -30.000000) "></path>
</g>
</g>
</g>
</svg>
新增加另外一种办法
实现原理见代码
<style type="text/css">
.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;
}
}
</style>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(241,241,241,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(241,241,241,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(241,241,241,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#f1f1f1" />
</g>
</svg>
Hi there mates, its impressive article concerning cultureand completely explained,
keep it up all the time.