<!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. 题目:解决.NET项目中的平台选项,由x86设置为AnyCPU

    问题:开发出的.NET程序在windows7 X64平台无法使用,打开提示异常”stopping work….” 1.打开解决方案中的配置管理器,发现有部分程序集的平台是x86,想改变平台选项,发现无 ...

  2. HTTP 头字段总结

    1. Accept: 告诉WEB服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type.2. Accept-Charset: 浏览器申明自己接 ...

  3. SpringBoot配置属性之DataSource

    https://segmentfault.com/a/1190000004316491

  4. 2016 Multi-University Training Contest 5

    6/12 2016 Multi-University Training Contest 5 期望+记忆化DP A ATM Mechine(BH) 题意: 去ATM取钱,已知存款在[0,K]范围内,每一 ...

  5. 未能添加对***.dll的引用问题

    在机器A上运行.编译成功的程序,在B上不能正确被编译,并且添加r如 knbook.dll 时候提示如下: 未能添加对"knbook.dll"引用,请确保此文件可以访问并且是一个有效 ...

  6. gitlab 创建SSH Keys 报500错

    gitlab 创建SSH Keys 报500错 看了一下日志 root@322323:/home/git/gitlab/log# cat production.log Errno::ENOMEM (C ...

  7. UI测试测试分析

    解析:jQuery easyUI是基于jQuery框架在使用之前应该先引入jquery框架否则jQuery easyUI 将失效故D错误 解析: JQuery UI下的menu插件的使用,menu提供 ...

  8. python 进程和线程

    python中的进程.线程(threading.multiprocessing.Queue.subprocess) Python中的进程与线程 学习知识,我们不但要知其然,还是知其所以然.你做到了你就 ...

  9. 第 5 章 基础 DOM 和 CSS 操作

    在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').ht ...

  10. jQuery触发a标签点击事件-为什么不跳转

    今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...