涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。

github： https://github.com/wind-stone/CSS3-Circle-Diffusion

<!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"></div>

    <div class="pulse"></div>

</div>

</body>

</html>

CSS3动画产生圆圈由小变大向外扩散的效果的更多相关文章

  1. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  2. css3 图标变大变小在变小变大

    css3 @-webkit-keyframes anLoca { from { -webkit-transform: scale3d(1, 1, 1); } to { -webkit-transfor ...

  3. MySQL架构由小变大的演变过程

    假设一个网站(discuz)从最开始访问量很小做到日pv千万,我们来推测一下它的mysql服务器架构演变过程. 第一阶段网站访问量日pv量级在1w以下.单台机器跑web和db,不需要做架构层调优(比如 ...

  4. 动画：view从点逐渐变大（放大效果）

    -(void) animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...

  5. css3动画，点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  6. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  8. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

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

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

随机推荐

  1. 据说最近IMO中国队失利的一题

    (图基于Microsoft PaintBrush技术构建) 平面几何是可以难得出蛆的.这道题难在多圆.高度非对称和具有一定复杂性.如图,对ABC,H是垂心,O是垂足,M是中点.QK在ABC外接圆上,均 ...

  2. 『备忘』HttpWebRequest 在 POST 提交时， 标头（Headers）丢失原因

    近来研究 HttpWebRequest —— 辅助类完成时,POST JSON数据 总会 丢失标头(Headers). HttpWebRequest POST JSON数据,分如下几步: > 将 ...

  3. SRM 594 DIV1 250

    可能开始宿舍比较乱,思绪静不下来...想了大半个小时,终于确定了应该暴力+DP,然后写了枚举除数,和被除的版本..这样,还敲错了个字母,第一次提交还100多,修改提交还有75.多,最后想到,貌似不打对 ...

  4. HttpClient_使用httpclient必须知道的参数设置及代码写法、存在的风险

    结论: 如果使用httpclient 3.1并发量比较大的项目,最好升级到httpclient4.2.3上,保证并发量大时能抗住.httpclient 4.3.3,目前还有一些bug:还是用4.2.x ...

  5. mapreduce作业状态一直是ACCEPTED

    搭建yarn环境后,执行 hadoop/bin/hadoop jar hadoop/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.4.1.jar ...

  6. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  7. 符号三角形——F

    F. 符号三角形 Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format:      Java class name: 符号 ...

  8. 利用MetaWeblog API实现XMLRPC写博客功能

    Windows Live Writer是一款小巧的写博客的工具,非常方便,甚至网上看到过有的评论称Live Writer是一款最不像微软产品的微软产品. Writer支持MSN Spaces以及Wor ...

  9. 改进iOS客户端的升级提醒功能

    改进iOS客户端的升级提醒功能 功能设计 先申明一下,我是码农,不是一个产品经理,但我觉得现有市面上的很多 App,设计的 "升级提示功能" 都不太友好.在此分享一下我的想法,欢迎 ...

  10. [LintCode] Nuts & Bolts Problem 螺栓螺母问题

    Given a set of n nuts of different sizes and n bolts of different sizes. There is a one-one mapping ...