<!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. ajax 传递JSON对象参数

    https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...

  2. CustomEvent自定义事件

    javascript与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.通常大家都会认为事件是在用户与浏览器进行交互的时候触发的,其实通过javascript我 ...

  3. nodejs review-04

    79 Secure your projects with HTTPS Express 生成SSL证书 openssl genrsa -out privkey.pem 1023 openssl req ...

  4. 激活Windows 8.1 RTM原来如此简单

    日前,Windows 8.1 RTM各种版本已经在坊间泄露开来,许多迫不及待的用户也开始跃跃欲试,但可能有人会疑惑,Windows 8.1RTM该如何激活?其实,它远比你想象的要简单. 实际上,Win ...

  5. Android 自动化测试—robotium(十一) robotium实现微博绑定

    利用robotium实现微博的自动绑定 android应用进行微博绑定主要有两种方式,一种客户端实现个webView,请求微博默认的授权页,另一种则是直接调用微博客户端,这里实现的为前一种,即进和微博 ...

  6. SOAPUI使用教程-MockServices工作原理

    在soapUI的可让您只需从WSDL基础服务创建一个基于WSDL服务的符合标准的模拟.被称为“MockService”,这可以直接从内部的soapUI运行,命令行浇道,或甚至标准servlet容器. ...

  7. CSS的Hack技术

    主要是用来解决兼容性的特殊方法: IE都能识别*;标准浏览器(如FF)不能识别*: IE6能识别*,但不能识别 !important, IE7能识别*,也能识别!important,还有# FF不能识 ...

  8. NOI 题库 7218

    7218  献给阿尔吉侬的花束 描述 阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫.今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔吉侬最喜 ...

  9. NSMutableAttributedString常用代码

    NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNam ...

  10. SQL Server 存储过程

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...