css3 动画设置水波纹，效果如下图：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>test</title>

</head>

<style type="text/css">

.dot-box{height:40px;width:40px;border-radius:100%;position:relative;margin:40px;}

.dot-box:hover{cursor:pointer;}

.dot1 {

  animation: keyframes-dot1 1.5s cubic-bezier(.17,.67,.18,.41);

}

.dot2 {

  animation: keyframes-dot2 1.5s cubic-bezier(.17,.67,.18,.41);//贝塞尔曲线生成网站：http://cubic-bezier.com/

}

.dot3 {

  animation: keyframes-dot3 1.5s cubic-bezier(.17,.67,.18,.41);

}

.dot1,.dot2,.dot3{

  height: 40px;

  width: 40px;

  background: rgba(249,58,28, 1);

  color: white;

  line-height: 40px;

  text-align: center;

  border-radius: 100%;

  animation-iteration-count:infinite;

}

@keyframes keyframes-dot1 {

  0% {

    box-shadow: 0 0 0 0px rgba(238,67,40, 0.7);

  }

  100% {

    box-shadow: 0 0 0 30px rgba(238,67,40, 0);

  }

}

@keyframes keyframes-dot2 {

  0% {

    box-shadow: 0 0 0 0px rgba(238,67,40, 0.8);

  }

  100% {

    box-shadow: 0 0 0 20px rgba(238,67,40, 0);

  }

}

@keyframes keyframes-dot3 {

  0% {

    box-shadow: 0 0 0 0px rgba(238,67,40, 0.9);

  }

  100% {

    box-shadow: 0 0 0 10px rgba(238,67,40, 0);

  }

}

</style>

<body>

    <div class="dot-box">

        <div class="dot1">

              <div class="dot2">

                   <div class="dot3">扬州</div>

              </div>

        </div>

  </div>

</body>

</html>

CSS3 水波纹的更多相关文章

  1. css3水波纹效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. css3+jQuery实现按钮水波纹效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  4. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  5. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  6. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  7. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  8. android 5.0 水波纹 实现

    1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?& ...

  9. VC_MFC水波纹控件，开源

    代码和效果图: https://github.com/wjx0912/MfcWaterEffect 集成以下5个文件即可: watereffect\DIB.hwatereffect\DIB.cppwa ...

随机推荐

  1. SQLite – DISTINCT 关键字

    SQLite – DISTINCT关键字 使用SQLite DISTINCT关键字与SELECT语句来消除所有重复的记录和获取唯一的记录. 可能存在一种情况,当你有多个表中重复的记录. 获取这些记录, ...

  2. java项目部署jar包

    1. 先将打包成jar包 2. 查看所有的java进程   pgrep java 3. 杀死进程 kill   -9 程序号 4.执行命令  nohup java -jar admin.jar > ...

  3. $.noconflict() 有什么用处

    jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$&q ...

  4. 朴素贝叶斯法（naive Bayes）

    <统计学习方法>(第二版)第4章 4 朴素贝叶斯法 生成模型 4.1 学习与分类 基于特征条件独立假设学习输入输出的联合概率分布 基于联合概率分布,利用贝叶斯定理求出后验概率最大的输出 条 ...

  5. VS2015安装SVN插件

    一.下载VISUALlSVN 官网下载:地址 选择[VisualSVN for Visual Studio 2015 and older]的下载按钮下载,目前版本号VisualSVN 5.1.9,支持 ...

  6. SqlSugar直接执行Sql

    参考:http://www.codeisbug.com/Doc/8/1132 我的思路: 1.数据库中写好sql 2.用SqlSugar直接执行sql,获取DataTable的数据 3.DataTab ...

  7. vs编译应用程序不依赖运行vs环境

    控制台应用程序不依赖VS运行环境就可以运行的设置: 1,使用release模式编译 2,项目属性中,“C/C++”,“代码生成”中的运行库改为“多线程(/MT)” 3,项目属性中,“链接器”,“系统” ...

  8. 计算机网络之TCP拥塞控制

    1. 首先,拥塞控制和流量控制是不一样的. 拥塞控制是防止过多的数据注入到网络中,可以使网络中的路由器或链路不致过载,是一个全局性的过程.  流量控制是点对点通信量的控制,是一个端到端的问题,主要就是 ...

  9. openjudge-4017 爬楼梯

    总时间限制: 1000ms 内存限制: 65536kB 描述 树老师爬楼梯,他可以每次走1级或者2级,输入楼梯的级数,求不同的走法数 例如:楼梯一共有3级,他可以每次都走一级,或者第一次走一级,第二次 ...

  10. Hibernate-03

    目的:表操作(表维护) 一.一对一(略过) 二.一对 1.建表原则:在多的一方创建外键指向一的一方的外键 2.建表:实体中添加 商品实体表: private Set<User> user ...