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. Types of Security Vulnerabilities

    1)内存空间安全.2)参量级别数据安全:3)通信级别数据安全:4)数据访问控制:5)通信对象身份确认. https://developer.apple.com/library/content/docu ...

  2. Can't connect to MySQL server on '127.0.0.1' (10061)

    一条命令解决 mysqld --initialize-insecure --user=mysql 但这只是简单解决问题,详细查看百度经验,知乎上的讨论 forget root password ref ...

  3. 打开VS2015提示“重新启动处于挂起状态。请在启动Visual Studio”之前重新启动

    昨晚安装了VS2015,今天打开VS2015提示[“重新启动处于挂起状态.请在启动Visual Studio”之前重新启动] 这里重新启动指的是重启电脑 解决方法: 电脑需要重启电脑

  4. SQL Server连接不上本地服务器

    昨天星期一,到公司,如常打开电脑后,上个厕所,吃个早餐,电脑才完全醒来.打开项目后台,发现登不上,用户名或密码错误,认真输入几遍,还是错误,打开本地数据库,sql server连接不上,提示错误: 我 ...

  5. ios之coredata

    Core Data数据持久化是对SQLite的一个升级,它是ios集成的,在说Core Data之前,我们先说说在CoreData中使用的几个类. (1)NSManagedObjectModel(被管 ...

  6. [模板] LIS

    树状数组优化LIS到nlogn,网上找了好多,感觉讲得都不是很明白,正好自己复习整理一下. 基本的DP方程 f[i]=max(f[i],f[j]+1) (j<i且a[j]<a[i]) 定义 ...

  7. 【thinkPHP5实现文件上传】

    上传文件 ThinkPHP5.0对文件上传的支持更加简单. 内置的上传只是上传到本地服务器,上传到远程或者第三方平台的话需要自己扩展. 假设表单代码如下: <form action=" ...

  8. ECSHOP二次开发文档【文件结构说明和数据库表分析】

    最近公司又把之前的ecshop进行二次开发,之前看过一些ecshop的东西,但是都过了很久差不多都忘完了,现在得把之前的重新捡回来,特此搜到这些文档,接下来的开发工作中会方便不少. Ecshop文件结 ...

  9. iPhone模拟定位（非越狱修改手机定位）

    剩下的事情就是build一下到手机,那么,就可以看到神奇的效果!   本次带来一个简单又好玩的实用功能,比如定位装逼(共享定位非分享可选那种),又或者定位打卡之类,由于改变的是设备级别的定位,本设备所 ...

  10. Linux文件查找find和locate

    目 录 第1章 locate文件查找    1 1.1 概述    1 1.2 locate文件查找的特性    1 第2章 文件查找概述    1 第3章    1 3.1 文件名查找    1 3 ...