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. 富通天下（T 面试）

    1.Mybatis的分页查询是怎么实现的? 交流: A:我们是通过PageHelper插件实现的 B:你说下原生SQL应该怎么写? A:某段查询SQL,实现分页需要使用limit关键字,改变下标和页码 ...

  2. Python基础4 迭代器，生成器，装饰器，Json和pickle 数据序列化

    本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...

  3. The MySQL server is running with the –secure-file-priv

    show variables like '%secure%'; 将文件导出路径更改为查询到的secure-file-priv路径下 select * from table where column = ...

  4. java 数据库(二）

    1.SQL概述 1.什么是SQL(了解): 结构化查询语言,是一种功能齐全的数据库语言.在使用它时,只需要发出“做什么”的命令,“怎么做”是不用使用者考虑的 SQL被美国国家标准局(ANSI)确定为关 ...

  5. 关闭Visual Studio 2015 关闭单击打开文件的功能

    工具-->选项-->环境-->选项卡和窗口-->预览选项卡 去掉“在解决方案资源管理器中预览选定的文件(在按住Alt的同时单击可避免预览)(X)”的勾选

  6. Linux常用命令大全2

    Linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.驱动.键盘.鼠标,还是用户等都是文件,Linux命令是它正常运行的核心.接下来,就来看看xp系统下载编辑 ...

  7. springmvc下载那些事

    文件的上传下载一般在项目中还是非常实用的,此处专门整理一下文件的下载,至于文件的上传实现将在后续中补上.文件的下载多用于模板文件的下载,这在项目中用的还是挺多的.今天用到了就整理出来了,以供搬运工们借 ...

  8. 一套出完被喷爆的noip提高组+的题目

    这是一个悲伤的故事. 校内胡测嘛,这当然的重视啦,好好地出完题,看题面不是很难哦,那就用它吧. 结果今天老师考试就用上了(情况不妙) 果然考试过程中就有打喷嚏的冲动. 一道暴力,一道概率DP,一道主席 ...

  9. Ubuntu14.04环境下Qt5.5以上版本无法输入中文的解决教程

    1.前言 由于Qt5.4之后对之前的Qt5版本不再二进制兼容,所以网上很多简单的旧的办法已经失效了,所以本教程的办法是重新编译fcitx-qt5,生成最新的libfcitxplatforminputc ...

  10. Linux的硬件时间、校正Linux系统时间及系统时间调用流程

    第一部分: 一)概述: 事实上在Linux中有两个时钟系统,分别是系统时间和硬件时间 UTC是协调世界时(Universal Time Coordinated)英文缩写,它比北京时间早8个小时.   ...