水波浪进度球
先看效果图:
直接撸代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
.box{
width: 200px;
height: 200px;
margin: 50px auto;
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
border-radius: 100%;
overflow: hidden;
position: relative;
}
.box:before{
content: '';
width: 180px;
height: 180px;
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
border-radius: 100%;
position: absolute;
left: 10px;
top: 10px;
}
.box:after{
content: '';
width: 160px;
height: 160px;
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);
border-radius: 100%;
position: absolute;
left: 20px;
top: 20px;
}
.wave{
margin-top: 50px;
width: 100%;
height: 210px;
position: relative;
overflow: hidden;
z-index: 2;
}
.parallax>use {
animation: wave-move 1s linear infinite;
animation-duration: .9s;
}
.parallax>use:nth-child(1) {
animation-delay: -.1s;
}
.parallax>use:nth-child(2) {
animation-delay: -.5s;
}
.parallax>use:nth-child(3) {
animation-delay: -.8s;
}
@keyframes wave-move {
0% {
transform: translate(90px,0);
}
100% {
transform: translate(-85px,0);
}
}
</style>
</head>
<body>
<div class="box">
<svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
<defs>
<path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
</defs>
<g class="parallax">
<use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
<use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
<use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
</g>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#FDD936" stop-opacity="0.4" />
<stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
</linearGradient>
</defs>
</svg>
</div>
</body>
</html>