涉及到 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. JDBC 数据库异常 Exception 关闭的（语句，连接，ResultSet）

    如果在rs.next()之前关闭了Statement或PreparedStatement,会导致下面的异常: java.sql.SQLException: 关闭的语句: next 如果在rs.next ...

  2. Win10 利用安装盘启用 .NET Framework 3.5

    以管理员身份运行命令提示符,在“管理员:命令提示符”窗口中输入以下命令:dism.exe /online /enable-feature /featurename:netfx3 /Source:D:\ ...

  3. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  4. ACM 找球号(一）

    找球号(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<= ...

  5. BZOJ3294: [Cqoi2011]放棋子

    Description   Input 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm. Output 输出 ...

  6. weblogic部署项目包，报空指针错误

    贴出 报错代码 <weblogic> <> <> <1479765377228> <BEA-240003> <Console enco ...

  7. HDU 1102 最小生成树裸题，kruskal，prim

    1.HDU  1102  Constructing Roads    最小生成树 2.总结: 题意:修路,裸题 (1)kruskal //kruskal #include<iostream> ...

  8. poj 1995 裸快速幂

    1. poj 1995  Raising Modulo Numbers 2.链接:http://poj.org/problem?id=1995 3.总结:今天七夕,来发水题纪念一下...入ACM这个坑 ...

  9. MongoDB介绍及安装

    一.介绍: 1.NoSql(非关系型的数据库)成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.MongoDB是NoSql的其中一种较为热门的非关系型数据库.查阅很多资料.其他博客和网站,借着 ...

  10. java 反取字符串

    public class demo2 { /** * 2 : 将字符串反取出来 新中国好 好国中新 */ public static void main(String[] args) { String ...