svg和css实现波浪动效
效果：
截图有点模糊~
实现：
//html
<body>
<svg class="wave-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
<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">
</path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(224,233,239,.5)"></use>
<use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(224,233,239,.5)"></use>
<use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(224,233,239,.5)"></use>
</g>
</svg>
</body
//css
*{
margin:0;
}
body{
background: #2196f3;
}
.wave-container{
margin-top:200px;
width: 100%;
height: 150px;
}
.parallax>use {
animation: wave-move 12s linear infinite
}
.parallax>use:nth-child(1) {
animation-delay: -2s
}
.parallax>use:nth-child(2) {
animation-delay: -2s;
animation-duration: 5s
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 3s
}
@keyframes wave-move {
0% {
transform: translate(-90px,0)
}
100% {
transform: translate(85px,0)
}
}
-----------------------------------------
<style>
.svg-wrapper {
height: 80px;
margin: 60px auto 0;
position: relative;
width: 255px;
background:#ddd;
}
.shape {
fill: transparent;
/* stroke-dasharray: 208 540;
stroke-dashoffset: -359;
stroke-width: 8px;*/
stroke-width: 0;
stroke: red;
}
.svg-wrapper:hover .shape {
-webkit-animation: 0.5s draw linear forwards;
-moz-animation: 0.5s draw linear forwards;
animation: 0.5s draw linear forwards;
}
@keyframes draw{
0% {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 8px;
}
}
</style>
<div class="svg-wrapper">
<svg height="80" width="255" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="80" width="255"></rect>
</svg>
</div>
三、原形进度条
<svg width="150px" height="150px" class="svg" xmlns="http://www.w3.org/2000/svg" >
<circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" />
</svg>
<style>
svg {
transform: rotate(-90deg);
}
.progress {
animation: rotate 15000ms linear both;
}
@keyframes rotate {
from {
stroke-dashoffset: 471px;
}
to {
stroke-dashoffset: 0px;
}
}
</style>
