涉及到 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. Leetcode Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  2. 快速搭建IE测试环境（Virtualbox+ievms）

    IE下的测试 作为一个有追求的程序员,应该尽可能的远离Windows系统.不论从专业开发者的角度,还是仅仅作为最终用户从使用体验上来说,Windows都可以算是垃圾中的战斗机: 没有shell . 响 ...

  3. display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;

    总的来说:这是CSS3.0的对于文章段P容器的定义方法语句! display:block这个样式,只定义了P容器为一个块; 后面四句是CSS3中的样式定义方法: -webkit-margin-befo ...

  4. 【BZOJ3211&3038】花神游历各国&上帝造题的七分钟2（CodeVS）

    Description   Input   Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 ...

  5. 【CodeVS】 p1077 多源最短路

    题目描述 Description 已知n个点(n<=100),给你n*n的方阵,a[i,j]表示从第i个点到第j个点的直接距离. 现在有Q个询问,每个询问两个正整数,a和b,让你求a到b之间的最 ...

  6. 【JAVA】LOG4J使用心得

    一.LOG4J基础: 1.日志定义        简单的Log4j使用只需要导入下面的包就可以了 // import log4j packages import org.apache.log4j.Lo ...

  7. Java_CookieUtil

    package com.willow.util; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequ ...

  8. JS重点特性——闭包详解

    闭包特性:可以让定义好的函数作用域在调用时发生改变,具体说,调用运行时,可以让(定义时)作用域外其他函数访问到本函数的局部变量甚至参数.举例代码如下: <!DOCTYPE html> &l ...

  9. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  10. HDU1058 DP

    Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...