<!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. java单例模式详解

    饿汉法 饿汉法就是在第一次引用该类的时候就创建对象实例,而不管实际是否需要创建.代码如下: public class Singleton { private static Singleton = ne ...

  2. 图文：通过sql server 连接mysql

    1.在SQL SERVER服务器上安装MYSQL ODBC驱动; 驱动下载地址:http://dev.mysql.com/downloads/connector/odbc/ 2.安装好后,在管理工具- ...

  3. 简述UIScrollView的属性和用法

    contentOffset 默认CGPointZero,用来设置scrollView的滚动偏移量.       // 设置scrollView的滚动偏移量       scrollView.conte ...

  4. MSMQ

    1.安装MSMQ 2.添加私有的队列 3.MSMQ可以发送的类型可以是任意类型,包括类 static string strServer = @"FormatName:Direct=TCP:1 ...

  5. Useful links

    Better JavaScript with ES6 Pt.IPopular Features pt.II A Deep Dive into Classes pt.III Cool Collectio ...

  6. Leetcode Longest Common Prefix

    Write a function to find the longest common prefix string amongst an array of strings. class Solutio ...

  7. [Java] 位运算

    https://ckjoker.github.io/2015/03/01/Java-bit-primary/

  8. 2016 ECJTU - STL

    1.ECJTU-STL重挂 STL 2.总结:学长出的题,本来还想ak的,结果又被虐了... 3.标程和数据:http://pan.baidu.com/s/1qYzXY2K 01    水 02  水 ...

  9. Failed to execute goal org.apache.maven.plugins:maven-antrun-plugin:1.7:run (dist) on project hadoop-kms: An Ant BuildException has occured

    编译cdh版hadoop2.5.0出现的问题 系统: CentOs66 64位 JDK:1.7 Maven: 3.0.5 Protobuf: libprotoc 2.5.0 编译命令: mvn pac ...

  10. HDU3371 最小生成树

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...