水球圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wave progress-{{percent}}" style="width:90px;height:90px;">
<!-- <div class="title">
<div>匹配度</div>20%
</div> -->
</div>
</body>
<style type="text/css">
.wave {
position: relative;
background: linear-gradient(180deg, #8BC0FF 0%, #ABD1FF);
background: #69AEFF;
box-shadow: 0px 1px 16rpx 0px #EEEEEE;
opacity: 0.7;
border-radius: 50%;
overflow: hidden;
z-index: 1;
}
/* .wave::before, */
.wave::after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
.wave::after {
border-radius: 35%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
}
100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
.title {
color: #005BC7;
font-size: 20rpx;
font-weight: bold;
position: absolute;
top: 20rpx;
width: 100%;
left: 0;
bottom: 0;
right: 0;
z-index: 30;
text-align: center;
}
</style>
</html>
