<!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. 更改HTTP头信息

    http信息分三部分 1.请求行 GET  lizi.php  HTTP/1.1 2.HTTP头信 Host: localhost Connection: keep-alive Cache-Contr ...

  2. HDU4647_Another Graph Game

    有趣的博弈题. 关键在于把比边权的平分到两边的点权上面,然后点权排序,每次从大的开始拿就可以了. #include <iostream> #include <cstdio> # ...

  3. CodeForces 860D Wizard's Tour

    题意 给出一张无向图,要求找出尽量多的长度为2的不同路径(边不可以重复使用,点可以重复使用) 分析 yzy:这是原题 http://www.lydsy.com/JudgeOnline/problem. ...

  4. 2月24日考试——ZYYS

    LSGJ zyys 战队的 CYA 小垃圾,被各位神佬出的题目搞得心态爆炸.于是他模仿了蔡老师给了你两个整数 n 和 m .让你计算字母表大小为 m ,(即可用 m 个字母)长度为 n ,不存在长度至 ...

  5. 【刷题】BZOJ 1453 [Wc]Dface双面棋盘

    Description Input Output Sample Input Sample Output HINT Solution 不强制在线的动态图问题,那就LCT了 类似二分图那道题目 对于四个方 ...

  6. 【BZOJ1492】【NOI2007】货币兑换（动态规划，CDQ分治，Splay）

    [BZOJ1492][NOI2007]货币兑换(动态规划,CDQ分治,Splay) 题面 BZOJ 洛谷 Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券 ...

  7. 【ZJOI2005】沼泽鳄鱼 题解报告

    题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石墩和石桥 ...

  8. 利用MailSniper越权访问Exchange邮箱

    0x01 概述 Microsoft Exchange用户可以授权给其他用户对其邮箱文件夹进行各种级别的访问.例如,用户可以授予其他用户读取访问其收件箱中里面的电子邮件,但是要是用户(或Exchange ...

  9. 转载乙醇大师的appium简明教程

    appium简明教程(11)——使用resource id定位(仅支持安卓4.3以上系统) 乙醇 2014-06-28 21:01 阅读:16406 评论:21 appium简明教程(10)——控件定 ...

  10. Codeforces 671D. Roads in Yusland（树形DP+线段树）

    调了半天居然还能是线段树写错了,药丸 这题大概是类似一个树形DP的东西.设$dp[i]$为修完i这棵子树的最小代价,假设当前点为$x$,但是转移的时候我们不知道子节点到底有没有一条越过$x$的路.如果 ...