<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}

.container {
position: relative;
width: 40px;
height: 40px;
border: 1px solid #000;
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute;
width: 6px;
height: 6px;
left: 15px;
top: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: 2px solid red;
border-radius: 20px;
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute;
width: 24px;
height: 24px;
left: 2px;
top: 2px;
border: 6px solid red;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 3s ease-out;
-moz-animation: warn 3s ease-out;
animation: warn 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>

</head>

<body>
<div class="container">
<div class="dot">1</div>
<div class="pulse"></div>
</div>
</body>
</html>

CSS3向外扩散的圆的更多相关文章

  1. css3 如何实现圆边框的渐变

    使用 css 实现下面效果: 把效果分解. 代码一: <style> .helper1 { height: 40px; padding: 15px; background: -webkit ...

  2. 学习CSS3之实心圆

    CSS3是最新版本的CSS,学习后可以更好的用于工作及自己修改自己代码的各种样式. border-radius圆角方法画实心圆.相当于在长方形(正方形)上画半径为边长一半的圆弧. 效果如上图,代码如下 ...

  3. 用CSS3.0画圆

    CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或 ...

  4. jquery、css3动态显示百分比圆

    动态显示百分圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  5. html、css如何画实心圆

    css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }

  6. CSS实现文本周围插入符号

    CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求 在文 ...

  7. CSS3组件化之圆波扩散

    本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...

  8. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  9. css3实现逐渐变大的圆填充div背景的效果

    手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...

随机推荐

  1. HTTP的上传文件实例分析

    这个是http文件传输的一种格式,当时不知道这种格式,废弃. HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏 ...

  2. java设计模式----其他模式

    1.桥接:使用桥接模式不只改变你的实现,也改变你的抽象 优点: 将实现予以解耦,让它和界面之间不再永久绑定 抽象和实现可以独立扩展,不会影响到对方 对于“具体的抽象类”所做的改变,不会影响到客户 用途 ...

  3. 在DataGridView控件中实现冻结列分界线

    我们在使用Office Excel的时候,有很多时候需要冻结行或者列.这时,Excel会在冻结的行列和非冻结的区域之间绘制上一条明显的黑线.如下图: (图1) WinForm下的DataGridVie ...

  4. 白帽子讲web安全读后感

    又是厚厚的一本书,为了不弄虚做假,只得变更计划,这一次调整为读前三章,安全世界观,浏览器安全和xss.其它待用到时再专门深入学习. 吴翰清是本书作者,icon是一个刺字,圈内人称道哥.曾供职于阿里,后 ...

  5. POJ 2892 Tunnel Warfare(树状数组+二分)

    题目链接 二分求上界和下界,树状数组.注意特殊情况. #include <cstring> #include <cstdio> #include <string> ...

  6. SQL常见问题及解决备忘

    1.mysql中:you cant't specify tartget table for update in from clause 错误 含义:在同一语句中update或delete某张表的时候, ...

  7. python的对象的属性（即对象的成员）是动态的

    1 python的对象的成员叫attribute 2 python的类的成员是可以动态创建的 因此,在用的时候也提供了三个内建的接口来对类的成员进行操作 2.1 getattr() 2.2 hasat ...

  8. JavaScript and ActionScript3

    接触JavaScript和ActionScript3也有一段时间了,它们都是应用比较广泛的脚本语言,经过这几年的工作和学习,静下来的时候想总结一些东西,作为技术上的沉淀以及培训所用,所以就有了这篇文章 ...

  9. hihocoder 1082 然而沼跃鱼早就看穿了一切 (替换指定的串 )

    #1082 : 然而沼跃鱼早就看穿了一切 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句 ...

  10. HDU3746 Cyclic Nacklace —— KMP 最小循环节

    题目链接:https://vjudge.net/problem/HDU-3746 Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    M ...