纯css3圆形从中心向四周扩散动画效果
查看效果：
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圆形从中心向四周扩散动画效果的更多相关文章
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 纯css3写的仿真图书翻页效果
对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 纯css3配合vue实现微信语音播放效果
前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
随机推荐
- Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)
作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...
- 基于SOA架构的TDD测试驱动开发模式
以需求用例为基,Case&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶段.研发准备 ...
- 在VMware上安装CentOS -7
1.下载好VMware 2.准备好CentOS的镜像文件 3.打开VMware创建新的虚拟机 选择自定义高级后按下一步 继续下一步 选择稍后安装操作系统 客户机操作系统选择Linux,版本选择Cent ...
- CentOS 7 修改主机名
今天在阿里云上买了一个centos7的服务器,连接上以后,发现一个很长很长的主机名,看着让人很是不爽,就想着怎样将其改成一个有个性的名字. 这里我想说的是,在centos7 版本的linux系统上和c ...
- Hadoop
Hadoop应用场景 Hadoop是专为离线处理和大规模数据分析而设计的,它并不适合那种对几个记录随机读写的在线事务处理模式. 大数据存储:Hadoop最适合一次写入.多次读取的数据存储需求,如数据仓 ...
- 如何开启MySQL 5.7.12 的二进制日志
1. 打开/etc下的my.cnf文件 2. 编辑它,添加内容: log_bin=binary-log #二进制日志的文件名 server_id=1 #必须指定server_id,这是MySQL ...
- .NET跨平台之旅：将示例站点升级至 .NET Core 1.1 Preview 1
今天微软发布了 .NET Core 1.1 Preview 1(详见 Announcing .NET Core 1.1 Preview 1 ),紧跟 .NET Core 前进的步伐,我们将示例站点 h ...
- 【PRINCE2是什么】PRINCE2认证之七大原则（7）
我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁 第七个原则:根据项目环境剪裁 PRINCE2的价值在于它是一个通用的项目管理方 ...
- 查看Windows下引起Oracle CPU占用率高的神器-qslice
前言: qslice是一个win2000的工具包,能分析进程的cpu占用率,我们用于分析oracle的性能 这是绿色的软件无需安装. 我们经常会碰到oracle的CPU占用居高不下,无法快速定位到问题 ...
- 阿里云accessKey如何创建？~ 2015.08.25
选择导航条上面的ACCESSKeys(工单服务左边,我一开始也没注意到) 创建一下,然后同意 验证一下 收工