<!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>Document</title>

</head>

<style type="text/css">

.dot {

  animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.dot2 {

  animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.dot3 {

  animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.dot,.dot2,.dot3{

  height: 100px;

  width: 100px;

  font-size: 20px;

  color: #fff;

  line-height: 100px;

  text-align: center;

  border-radius: 100%;

  position: absolute;

  z-index: 10;

  animation-iteration-count:infinite;

  background: transparent;

}

@keyframes sploosh {

  0% {

    box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

    background: rgba(255, 220, 1, 0.7);

  }

  100% {

    box-shadow: 0 0 0 30px rgba(255, 220, 1, 0);

    background: rgba(255, 220, 1, 0);

  }

}

@keyframes sploosh2 {

  0% {

    box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

    background: rgba(255, 220, 1, 0.7);

  }

  100% {

    box-shadow: 0 0 0 20px rgba(255, 220, 1, 0);

    background: rgba(255, 220, 1, 0.3);

  }

}

@keyframes sploosh3 {

  0% {

    box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

    background: rgba(255, 220, 1, 0.7);

  }

  100% {

    box-shadow: 0 0 0 10px rgba(255, 220, 1, 0);

    background: rgba(255, 220, 1, 1);

  }

}

</style>

<body>

	<div style="height:100px;width:100px;border-radius:100%;position: relative;margin:200px auto; ">

    <div class="dot">

      <div class="dot2">

          <div class="dot3">每日签到</div>

      </div>

    </div>

  </div>

</body>

</html>

效果图：

css3水波纹效果的更多相关文章

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

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

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

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

  3. 兼容Android的水波纹效果

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

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

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

  5. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  6. Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果

    利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...

  7. 聊聊Android5.0中的水波纹效果

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...

  8. android 点击水波纹效果

    这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... ...

  9. Android 自定义view实现水波纹效果

    http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了 ...

随机推荐

  1. javascript数组去重的两个方法

    方法一: 创建一个临时数组,判断目标数组中每个元素是否在临时数组中,如果不在就添加进临时数组,最后return临时数组 <script> var arr=[1,2,3,4,5,1,2,3, ...

  2. java基础-泛型2

    浏览以下内容前,请点击并阅读 声明 6 类型推测 java编译器能够检查所有的方法调用和对应的声明来决定类型的实参,即类型推测,类型的推测算法推测满足所有参数的最具体类型,如下例所示: //泛型方法的 ...

  3. Leetcode Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  4. js 类型转换学习

    类型转换分为显示转换和隐式转换 参考http://www.cnblogs.com/mizzle/archive/2011/08/12/2135885.html 先事件显示的 通过手动进行类型转换,Ja ...

  5. ARM大学计划全球经理到访华清远见，深入交流教育合作

    来源:华清远见嵌入式学院 10月20日,ARM大学计划全球经理Khaled Benkrid,高级内容主编洪川博士在ARM大学计划亚太经理陈炜博士的陪同下到访华清远见,就最新嵌入式技术.ARM处理器在教 ...

  6. SpringMVC介绍之Validation

    对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证.SpringMVC自身对数据在服务端的校验有一个比较好的支持,它能将我们提 ...

  7. WinForm 中TreeView 控件的使用实例

    新建一个窗体,在本窗体界面上需要以下几个按钮 (一个TreeView    一个 TextBox  三个Button 按钮) 后台代码如下: using System; using System.Co ...

  8. 我的ES6学习之路（一）

    强烈推荐  阮一峰写的<ECMAScript6入门> let和const命令 let命令: let用于声明变量,用法和var相似,但是不完全相同,有以下几点区别 ① let命令只在当前作用 ...

  9. jQuery基础，定时器，工厂函数

    这个星期刚刚学的JQuery,下面我来说说我学的这几个例子 jQuery是JavaScript的一个程序库. Jquery的工厂函数$(): 在Jquery中 $符号等价于jquery,作用是将DOM ...

  10. 为什么匿名内部类的参数必须为finalhttp://feiyeguohai.iteye.com/blog/1500108

    1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量(形式参数或局部变量)是天经地义的.是很自 ...