涉及到 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. 【BZOJ】2078: [POI2004]WYS

    题意: 给n个互不相交的多边形(边均平行于坐标轴),问最大深度.深度的定义是,若多边形A被多边形B包含,则\(dep[A]=max(dep[B])+1\).坐标系的深度为0.(n<=40000, ...

  2. POJ 1321 简单dfs

    1.POJ 1321  棋盘问题 2.总结: 题意:给定棋盘上放k个棋子,要求同行同列都不重. #include<iostream> #include<cstring> #in ...

  3. 基于S5PC100裸机程序之SPI(上)

    作者:杨老师,华清远见嵌入式学院讲师. SPI作为应用最为广泛的通信总线协议之一,开发人员应当掌握,本章将介绍SPI总线协议的基本理论,以及S5PC100的SPI总线控制器的操作方法. 1. SPI总 ...

  4. 最好的文本框样式 最漂亮的文本框样式 textbox css样式

    输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...

  5. php xls 导出乱码解决方案

    采用phpmyadmin的处理方式 //这个很关键 BU 订单号 产品ID 产品名称 原价 售价 房间 成人数 小孩数 总人数 出团日期 出团天数差 客人信息 姓名 性别 年龄 总价 下单日期 订单状 ...

  6. 使用cjson进行对象的嵌套封装

    共分两个部分,1)创建json.2)解析json 1)创建嵌套json的代码 char * makeJson() { cJSON * pRoot = NULL; cJSON * pSub_1 = NU ...

  7. iOS容易造成循环引用的三种场景

    iOS容易造成循环引用的三种场景  ARC已经出来很久了,自动释放内存的确很方便,但是并非绝对安全绝对不会产生内存泄露.导致iOS对象无法按预期释放的一个无形杀手是--循环引用.循环引用可以简单理解为 ...

  8. 32位的Win7系统下安装64位的Sql Sever？

    来自:http://zhidao.baidu.com/link?url=nQBoaLgoOyYCUdI7V4WZCMlTW3tKscdkOnLTIvlYtPpwoVhQkSahq44HeofBfzFT ...

  9. HDU1222，HDU1032 水题

    Wolf and Rabbit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. c#中enum的用法小结

    转自:http://blog.csdn.net/moxiaomomo/article/details/8056356 enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存 ...