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 -附加数据库

    SQLite -附加数据库 考虑情况下当你有多个数据库可用,您希望使用其中任何一个.SQLite附加DTABASE语句用于选择一个特定的数据库,这个命令之后,所有SQLite语句将执行以下附加数据库. ...

  2. activiti 表名称的解释

    链接:java工作流activiti的步骤 Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. ACT_RE_*: ...

  3. es6 fs 输出文件 iviewDemo

    // fs.open('./env.js', 'w', function(err, fd) { // // const buf = 'export default "development& ...

  4. 最短路 || POJ 1847 Tram

    POJ 1847 最短路 每个点都有初始指向,问从起点到终点最少要改变多少次点的指向 *初始指向的那条边长度为0,其他的长度为1,表示要改变一次指向,然后最短路 =========高亮!!!===== ...

  5. centos7 install vim8

    centos7 install vim8 Git and dependency Git: https://github.com/vim/vim # yum install -y perl-devel ...

  6. viewport移动端适配，读文笔记

    文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...

  7. PHP基于phpqrcode类生成二维码的方法详解

    前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...

  8. (10) openssl dhparam(密钥交换)

    openssl dhparam用于生成和管理dh文件.dh(Diffie-Hellman)是著名的密钥交换协议,或称为密钥协商协议,它可以保证通信双方安全地交换密钥. 但注意,它不是加密算法,所以不提 ...

  9. ssh服务使用介绍二

    老司机开车了 快上车 上文提到当我们使用ssh远程链接主机的时候,会出现询问的提示,如果我们链接的机器多了,一遍一遍的输入是不是很麻烦?怎么解决如下 vim /etc/ssh/ssh_config 如 ...

  10. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...