css实现圆形波浪图方法
时间:5年前 阅读:6377
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以。
原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢,其实就变成不规则的圆形。我们可以利用这个特征,用伪类加上transform动画来实现波浪效果。
先看一下效果图:
Bash
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.wave {
position: relative;
width: 200px;
height: 200px;
background: @color;
border: 5px solid #76daff;
border-radius: 50%;
overflow: hidden;
}
.wave-box::before,
.wave-box::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 400px;
height: 400px;
border-radius: 45%;
-webkit-transform: translate(-50%, -70%);
transform: translate(-50%, -70%);
background: rgba(255, 255, 255, 0.5);
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
z-index: 10;
}
@keyframes rotate {
50% {
-webkit-transform: translate(-50%, -75%) rotate(180deg);
transform: translate(-50%, -75%) rotate(180deg);
}
100% {
-webkit-transform: translate(-50%, -70%) rotate(180deg);
transform: translate(-50%, -70%) rotate(180deg);
}
}
</style>
</head>
<body>
<!--调用-->
<div class="wave">
<div class="wave-box"></div>
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注
更新实时通知
网友评论