先来个简单的示例，例如：
@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% 选择器。
以下为上下运动的代码：
css3使用animation和@keyframes制作动画_何问起 @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;} 说明
以下为圆形扩散运动的代码：
立即学习“前端免费学习笔记（深入）”；
纯css3圆形从中心向四周扩散动画效果_何问起 @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;} 说明
以上就是利用纯css3实现圆形从中心向四周扩散动画效果代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608031.html
微信扫一扫 
支付宝扫一扫 
