1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css实现圆形波浪图方法

在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以。

原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢,其实就变成不规则的圆形。我们可以利用这个特征,用伪类加上transform动画来实现波浪效果。

先看一下效果图:

<!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/post/7527.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: