在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用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实现圆形波浪效果图的更多相关文章

  1. Waves:类Material Design 的圆形波浪(涟漪)点击特效插件

    Waves:类Material Design 的圆形波浪(涟漪)点击特效插件 2014/08/06 分类:前端开发, 素材分享 浏览:6,734次  来源:原创 1个评论       6,734   ...

  2. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  3. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  4. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  5. css 实现圆形头像

    1.方法一 直接设置img为圆形,这种情况下如果图片不是正方形,图片会被拉伸 <img class="circleImg" src="../img/photo/im ...

  6. 纯html加css的键盘UI效果图

    先上效果图: 没有打字的功能,纯属是个界面图(一时无聊写的) 代码如下: <!DOCTYPE html> <html> <head> <meta charse ...

  7. Css绘制圆形,环形,椭圆等图形

    转载自http://blog.csdn.net/gongstrong123/article/details/50888758 绘制圆形,环形,椭圆 <!DOCTYPE html> < ...

  8. 纯CSS实现圆形进度条

    CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...

  9. css实现圆形倒计时效果

    实现思想: 1.最外层包裹内部的div1(.box) 2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div ...

随机推荐

  1. Windows 远程栈溢出挖掘与利用

    缓冲区溢出攻击很容易被攻击者利用,因为 C 和 C++等语言并没有自动检测缓冲区溢出操作,同时程序编写人员在编写代码时也很难始终检查缓冲区是否可能溢出.利用溢出,攻击者可以将期望数据写入漏洞程序内存中 ...

  2. setlocale()函数详解——C语言

    setlocale函数 函数原型:char* setlocale (int category, const char* locale); setlocale位于头文件,setlocale() 函数既可 ...

  3. Eclipse 中打包插件 Fat Jar 的安装与使用

    Eclipse可以安装一个叫Fat Jar的插件,用这个插件打包非常方便,Fat Jar的功能非常强大. 首先要下载Fat Jar,下载地址:https://sourceforge.net/proje ...

  4. [转]SQL SERVER整理索引碎片测试

    SQL SERVER整理索引碎片测试 SQL SERVER整理索引的方法也就这么几种,而且老是自作聪明的加入智能判断很不爽,还是比DBMS_ADVISOR差远了: 1SQL SERVER 2000/2 ...

  5. Tools - 源代码阅读分析工具Source Insight

    简介 https://www.sourceinsight.com/ Source Insight是一个面向项目开发的程序编辑器和代码浏览器,可以分析C/C++.C#.Java.Python等语言源代码 ...

  6. .NET手记-HttpClient解析GB2312乱码问题

    最近为App的服务器端卸了个爬虫程序,输出结果时发现出现乱码现象,尝试使用了几个方案发现效果并不太好,最后发现了一个很简单的用法. var result = await client.GetByteA ...

  7. spring boot -thymeleaf-日期转化

    <span th:text="${#dates.format(date)}" ></span><span th:text="${#dates ...

  8. request和response简介

    Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象. 既然request对象代表http请求,那么我们获取浏览器提交过来 ...

  9. linux上java解加密(AES/CBC)异常:java.lang.SecurityException: JCE cannot authenticate the provider BC办法

    用mapreduce做数据清洗的时候,需要对数据进行解密,加密方法是:AES/CBC/PKCS7Padding,由于java本身不支持,需要添加依赖,用的依赖是: <dependency> ...

  10. 关于QT中.pro文件中的相对路径

    被.pro文件中的相对路径给整糊涂了,仔细研究后,原来.pro文件中有两种相对路径. 一种情况下./表示.pro文件所在的目录 另一种情况下./表示构建生成目录 INCLUDEPATH SOURCE ...