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. 备忘录：python 3在class中使用yield

    之前代码都是直接在函数级别使用yield,但封装class后如何使用yield很少遇到. 经过半天的学习,总算完成示例.代码没有什么特殊地方,仅仅作为一个工作项. 与生成器合作: ########## ...

  2. android和IOS长连接区别

    http://blog.csdn.net/zhangzeyuaaa/article/details/39028369 首先我们必须知道,所有的推送功能必须有一个客户端和服务器的长连接,因为推送是由服务 ...

  3. npm与cnpm

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

  4. python 变量引用

    最近在看<<流畅的python>>关于变量引用部分时,有一些自己的看法,就再次记录一下. 问题: # From flunet python example 8-8 class ...

  5. 「 Luogu P2420 」 让我们异或吧

    # 解题思路 两点之间的路径的话一定经过它们两个 LCA,这一点已经是显而易见的,那么再来看看异或的性质. $$a\ xor\ b\ xor\ b = a\\ a\ xor\ a=0\\ a\ xor ...

  6. 【转载】Sql语句用left join 解决多表关联问题（关联套关联，例子和源码）

    csdn中高手帮我给解决了,其实就是别名,给自己上了一堂别名的课,所谓别人是高手,其实就是自己是菜鸟吧! 表1:------------------------------ [人事表]     表名: ...

  7. kvm中内存过载使用

    与CPU过载使用类似,在KVM中内存也是允许过载使用(over commit)的,KVM能够让分配给客户机的内存总数大于实际可用的物理内存总数. 由于客户机操作系统及其上的应用程序并非一直100%地利 ...

  8. Openstack实验笔记

    Openstack实验笔记 制作人:全心全意 Openstack:提供可靠的云部署方案及良好的扩展性 Openstack简单的说就是云操作系统,或者说是云管理平台,自身并不提供云服务,只是提供部署和管 ...

  9. sorted倒序

    ''' sorted 可以排列list, reverse=True 可以倒序排列 ''' # # def list_Dict(x): # m = {} # for k,v in enumerate(x ...

  10. tornado框架基础06-SQLAlchemy连接数据库

    01 ORM 在服务器后台,数据是要存储在数据库的,但是如果项目在开发和部署的时候,是使用的不同的数据库,该怎么办呢?是不是需要把所有的 SQL 语句都再重新写一遍呢? 和数据库相关,不同的数据库需要 ...