纯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- ...
随机推荐
- Android Weekly Notes Issue #236
Android Weekly Issue #236 December 18th, 2016 Android Weekly Issue #236 本期内容包括: Google的物联网平台Android ...
- 使用Metrics.NET 构建 ASP.NET MVC 应用程序的性能指标
通常我们需要监测ASP.NET MVC 或 Web API 的应用程序的性能时,通常采用的是自定义性能计数器,性能计数器会引发无休止的运维问题(损坏的计数器.权限问题等).这篇文章向你介绍一个新的替代 ...
- VirtualBox 桥接上网方式的配置
最近在搞Redis所以装了个virtualbox的ubuntu的虚拟机, redis不是在ubuntu上. 因为需要使用本机客户端访问redis服务,所以需要配置虚拟机和本地机器的双向访问,所以就用到 ...
- [大数据之Yarn]——资源调度浅学
在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了.比如,一个公司拥有一个几十个节点的hadoop集群,a项目组要进行一个计算任务,b项目 ...
- [Java面经] 关于面试的二三事.
今天终于闲下来了, 那么也好总结下这几天面试的经历.四天的时间一共面了七家, 有一家是自己推迟了没有去.声明:如若转载请注明出处:http://www.cnblogs.com/wang-meng/p/ ...
- 解析大型.NET ERP系统 高质量.NET代码设计模式
1 缓存 Cache 系统中大量的用到缓存设计模式,对系统登入之后不变的数据进行缓存,不从数据库中直接读取.耗费一些内存,相比从SQL Server中再次读取数据要划算得多.缓存的基本设计模式参考下面 ...
- QunInfo群数据库的还原与优化
一. 背景 这个数据库的数据文件mdf大概有8.5G左右,当还原数据库之后感觉可以做很多性能方面上的调优,合并数据后mdf数据文件大概有6.2G左右,行压缩后mdf数据文件大概有4.8G左右,页压缩后 ...
- Log4Net生成出现未引用错误解决方法
1.步骤一: 2.步骤二: 明明添加了引用怎么还提示找不到命名空间呢.解决这个问题很简单,右键项目选择属性: 3.步骤三:换成.NET Framework 4即可,解决! 4.两个有啥区别? Micr ...
- Web API与OAuth：既生access token，何生refresh token
在前一篇博文中,我们基于 ASP.NET Web API 与 OWIN OAuth 以 Resource Owner Password Credentials Grant 的授权方式( grant_t ...
- ASP.NET Core的配置（5）：配置的同步[ 实例篇]
ConfigurationBuilder在生成以Configuration对象的时候会利用注册其中的ConfigurationProvider加载原始的配置数据,那么一旦配置源中的数据发生变化,应用程 ...