查看效果：
http://hovertree.com/texiao/css3/37/

先来个简单的示例，例如：

@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}

效果：
http://hovertree.com/texiao/css3/37/1.htm

可以通过 @keyframes 规则，创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

以下为上下运动的代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>css3使用animation和@keyframes制作动画_何问起</title>

    <meta charset="utf-8" />

    <style>

@keyframes hovertreemove

{

from {top:30px;}

to {top:130px;}

}

#hovertreekf{

    width:80px;height:80px;

    border:1px solid red;

    position:absolute;

    background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;

    animation:hovertreemove /*动画样式名称*/

        1s /*动画时间*/

    linear /*线性运动*/

        infinite /*无限播放*/

        alternate/*往返动画*/;

}

  a{color:blue;text-decoration:none;}  </style>

</head>

<body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>

    <div id="hovertreekf"></div>

</body>

</html>

以下为圆形扩散运动的代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>纯css3圆形从中心向四周扩散动画效果_何问起</title>

    <style>

        @keyframes warn {

            0% {

                transform: scale(0.3);

                -webkit-transform: scale(0.3);

                opacity: 0.0;

            }

            25% {

                transform: scale(0.3);

                -webkit-transform: scale(0.3);

                opacity: 0.1;

            }

            50% {

                transform: scale(0.5);

                -webkit-transform: scale(0.5);

                opacity: 0.3;

            }

            75% {

                transform: scale(0.8);

                -webkit-transform: scale(0.8);

                opacity: 0.5;

            }

            100% {

                transform: scale(1);

                -webkit-transform: scale(1);

                opacity: 0.0;

            }

        }

        @keyframes warn1 {

            0% {

                transform: scale(0.3);

                -webkit-transform: scale(0.3);

                opacity: 0.0;

            }

            25% {

                transform: scale(0.3);

                -webkit-transform: scale(0.3);

                opacity: 0.1;

            }

            50% {

                transform: scale(0.3);

                -webkit-transform: scale(0.3);

                opacity: 0.3;

            }

            75% {

                transform: scale(0.5);

                -webkit-transform: scale(0.5);

                opacity: 0.5;

            }

            100% {

                transform: scale(0.8);

                -webkit-transform: scale(0.8);

                opacity: 0.0;

            }

        }

        .container {

            position: relative;

            width: 40px;

            height: 40px;

            /*border: 1px solid #000; hovertree.com */

        }

        /* 保持大小不变的小圆圈 何问起 */

        .dot {

            position: absolute;

            width: 92px;

            height: 92px;

            left: 120px;

            top: 120px;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border: 2px solid red;

            border-radius: 50%;

            z-index: 2;

        }

        /* 产生动画（向外扩散变大）的圆圈  */

        .pulse {

            position: absolute;

            width: 320px;

            height: 320px;

            left: 2px;

            top: 2px;

            border: 6px solid red;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            z-index: 1;

            opacity: 0;

            -webkit-animation: warn 2s ease-out;

            -moz-animation: warn 2s ease-out;

            animation: warn 2s ease-out;

            -webkit-animation-iteration-count: infinite;

            -moz-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

            box-shadow: 1px 1px 30px red;

        }

        .pulse1 {

            position: absolute;

            width: 320px;

            height: 320px;

            left: 2px;

            top: 2px;

            border: 6px solid red;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            z-index: 1;

            opacity: 0;

            -webkit-animation: warn1 2s ease-out;

            -moz-animation: warn1 2s ease-out;

            animation: warn1 2s ease-out;

            -webkit-animation-iteration-count: infinite;

            -moz-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

            box-shadow: 1px 1px 30px red;

        }a{color:blue;text-decoration:none;}

    </style>

</head>

<body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>

    <div class="container">

        <div class="dot"></div>

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

        <div class="pulse1"></div>

    </div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/i309b77d.htm

参考：
http://hovertree.com/h/bjaf/pr_animation.htm
http://hovertree.com/h/bjaf/xpxgjfap.htm

更多特效：

http://www.cnblogs.com/jihua/p/webfront.html

纯css3圆形从中心向四周扩散动画效果的更多相关文章

  1. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

  2. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  3. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

  5. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  6. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  7. 纯css3配合vue实现微信语音播放效果

    前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...

  8. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  9. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

随机推荐

  1. 跟着老男孩教育学Python开发【第一篇】：初识Python

    Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  2. [斜率优化DP]【学习笔记】【更新中】

    参考资料: 1.元旦集训的课件已经很好了 http://files.cnblogs.com/files/candy99/dp.pdf 2.http://www.cnblogs.com/MashiroS ...

  3. POJ2774 Long Long Message [后缀数组]

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 29277   Accepted: 11 ...

  4. js中的null 和undefined

    参考链接:http://blog.csdn.net/qq_26676207/article/details/53100912 http://www.ruanyifeng.com/blog/2014/0 ...

  5. 我的MYSQL学习心得（五） 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  6. Linux.NET实战手记—自己动手改泥鳅（下）

    在上回合中,我们不痛不痒的把小泥鳅的数据库从只能供在Windows下运行的Access数据库改为支持跨平台的MYSQL数据库,毫无营养的修改,本回合中,我们将把我们修改后得来的项目往Linux中部署. ...

  7. C++的性能C#的产能?! - .Net Native 系列四：性能测试方法（PerfView)

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  8. ASP.NET MVC Model绑定(三)

    ASP.NET MVC Model绑定(三) 前言 看过前两篇的朋友想必对Model绑定有个大概的了解,然而MVC框架给我们提供了更高的可扩展性的提供程序编程模式,也就是本篇的主题了,会讲解一下Mod ...

  9. 【原】关于Python中setuptools安装的问题

    在生成package的时候,需要在setup.py中引入setuptools包,可是却报告如下错误: ImportError: No module named setuptools 解决办法就是下载s ...

  10. ERROR ITMS-90167: "No .app bundles found in the package"错误

    ERROR ITMS-90167: "No .app bundles found in the package" 出现如上错误请查检以下2个方向: 1.macOS Sierra 1 ...