<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type='text/css'>
.circle{width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
.circle1, .circle2, .circle3, .center{
position:absolute;
left:50%;
top:50%;
margin:-30px 0 0 -30px;
width:60px;
height:60px;
border-radius:30px;
background-color:#666666;
}
.center{
position:absolute;
left:50%;
top:50%;
margin:-35px 0 0 -35px;
width:70px;
height:70px;
border-radius:35px;
background:#111111;/
text-align:center;
line-height:70px;
color:#EAEAEA;
font-size:16px;
font-family:'';
}

.circle1{
-webkit-animation:circle 3s linear infinite;
animation:circle 3s linear infinite;
}

.circle2{
-webkit-animation:circle 3s linear 0.8s infinite;
animation:circle 3s linear 0.8s infinite;
}
.circle3{
-webkit-animation:circle 3s linear 1.6s infinite;/* Safari and Chrome */
animation:circle 3s linear 1.6s infinite;
}
@-webkit-keyframes circle{ /* Safari and Chrome */
from{
opacity:1;
-webkit-transform:scale(0);
}
to{
opacity:0;
-webkit-transform:scale(3);
}
}

</style>
</head>
<body>
<div class='circle'>
<div class='circle1'>&nbsp;</div>
<div class='circle2'>&nbsp;</div>
<div class='circle3'>&nbsp;</div>
<div class='center'></div>
</div>

</body>
</html>

css3同心圆闪烁扩散效果的更多相关文章

  1. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  3. CSS3做动物走路效果

    CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...

  4. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  5. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  8. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  9. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

随机推荐

  1. java.lang.NoClassDefFoundError: Lcom/opensymphony/xwork2/util/logging/Logger tomcat6 启动错误

    用tomcat6启动时,出现下面的错误Java.lang.NoClassDefFoundError: Lcom/opensymphony/xwork2/util/logging/Logger; Cau ...

  2. (转)elasticsearch5.2.2 压测配置

    1.elasticsearch.yml # ---------------------------------- Cluster ----------------------------------- ...

  3. PreparedStatement的execute误解

    boolean execute()  throws SQLException在此 PreparedStatement 对象中执行 SQL 语句,该语句可以是任何种类的 SQL 语句.一些特别处理过的语 ...

  4. 利用vs10和opencv识别图片类型身份证的号码

    遇到的问题: 1 持续灰色图像框 waitkey()要在imshow()之前调用. 2 CvRect 和Rect CvXXX是C语言的接口,cv::XXX是C++语言的接口.两者混在一起容易出错 3 ...

  5. 堆模板（pascal）洛谷P3378

    题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 输出该小根堆内的最小数 操作3: 3 删除该小根堆内的最小数 输入输出格式 输入格式: ...

  6. 【bzoj2656】[Zjoi2012]数列(sequence) 高精度

    题目描述 给出数列 $A$ 的递推公式如下图所示,$T$ 次给定 $n$ ,求 $A_n$ . 输入 输入文件第一行有且只有一个正整数T,表示测试数据的组数.第2-T+1行,每行一个非负整数N. 输出 ...

  7. Liunx 和 Win中的软链接详解

    用过Linux的朋友都知道linux中有软链接的概念,可以通过ln命令创建到目录或文件的软链接,软链接的好处就是可以让一个目录或文件有多个入口但保持单一物理位置,方便应用和管理.    1．命令格式: ...

  8. Python常忘的基础知识

    0.目录 1.进制 1.1 各进制的表示 1.2 各进制的转换 2.字符 2.1 转义字符 2.2 原始字符串 3.类型 3.1 基本数据类型 3.2 type() 4.变量与运算符 4.1 值类型与 ...

  9. MSSQL代理工作服务器远程命令执行

    概述 如果MSSQL数据库中开启了MSSQL Server Agent Job服务的话,攻击者将可以利用MSSQL Server中自带的功能来获取一个shell. SQL Server Agent S ...

  10. Linux内核设计第二周学习总结 完成一个简单的时间片轮转多道程序内核代码

    陈巧然 原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.使用实验楼的虚拟机 ...