在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以。
原理:我们都知道让块元素的border-radius:50%
会变成圆形,如果少于50%呢,其实就变成不规则的圆形。我们可以利用这个特征,用伪类加上transform动画来实现波浪效果。
先看一下效果图:
//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); } } //或者使用预编译语言更方便,这里使用less .wave(@width; @height; @color) { position: relative; width: @width; height: @height; background: @color; border: 5px solid @color; border-radius: 50%; overflow: hidden; &::before, &::after { content: ''; position: absolute; top: 0; left: 50%; width: @width * 2; height: @height * 2; border-radius: 45%; transform: translate(-50%, -70%); background: rgba(255,255,255,0.5); animation: rotate 10s linear infinite; z-index: 10; } &::after { border-radius: 47%; background: rgba(255,255,255,0.5); animation: rotate 10s linear -5s infinite; z-index: 20; } } //调用 .wave-box { .wave(200px; 200px; #76daff); } <!-- 页面上调用 --> <div class="wave-box"></div>
总结
以上所述是小编给大家介绍的使用css实现圆形波浪效果图 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...