<!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. 第二十七篇：SOUI中控件属性查询方法

    SOUI项目的SVN根目录下有一个doc目录,下面有一份控件属性表.包含了大部分控件的大部分属性,不过也不一定完全准确.最保险的办法还是查源代码. SOUI对象包含控件及ISkinObj等从SObje ...

  2. NPOIExcel

    public class NPOIExcel { private string _title; private string _sheetName; private string _filePath; ...

  3. 转-临界区对象TCriticalSection与TRTLCriticalSection的区别

    TRTLCriticalSection是一个结构体,在windows单元中定义: 是InitializeCriticalSection, EnterCriticalSection, LeaveCrit ...

  4. python split函数

    Python split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 例 current_month = "2013-01-02" y ...

  5. odoo 人力资源工资计算拓展

    默认情况下 odoo工资条的计算只支持一下几种python变量: # payslip: object containing the payslips# employee: hr.employee ob ...

  6. Android 上传图片并添加参数 PHP接收

    php端接收代码: public function get_file(){ $local_path = "./Public/daixu_picture/figure/";//服务器 ...

  7. 保护眼睛（ubuntu 和 chrome）

    chrome 安插件https://chrome.google.com/webstore/detail/%E4%BF%9D%E6%8A%A4%E7%9C%BC%E7%9D%9B/fgadnbmmoln ...

  8. [转自itilxf论坛]iTop百问百答

    iTop是什么,和其他itsm软件相比有什么优势?iTop,是一个开源web应用程序,用于IT环境的日常运营.它基于ITIL最佳实践,而又不拘泥于任何具体流程. 优势: 1. 开源,扩展性强容易开发. ...

  9. 在Ubuntu16.04集群上手工部署Kubernetes(未完，陆续补充中)

    主机信息 主机 IP OS k8s-master 10.10.10.20192.168.0.20 Ubuntu Server 16.04 k8s-node1 10.10.10.21192.168.0. ...

  10. javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  ( ...