我发现这篇文章:
http://www.zurb.com/article/221/css3-animation-will-rock-your-world on css3动画。
我试图创建一个类似的效果看到上面的网站,但在个人网站:www.imfrom.me
在那里我有缅因州,有一个红色的提示框。我想通过指示位置的箭头创建一个脉冲环。
更新代码:
我想出了这个下面(试试这里:http://jsfiddle.net/ftrJn/),你可以告诉它的关闭,任何想法如何我可以让它从中心增长:
.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; } .gps_ring{ -webkit-animation-name: pulsate; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite } @-webkit-keyframes pulsate { 0% { width:1px;height: 1px; opacity: 0.0} 10% { width:3px;height: 3px; opacity: .20} 20% { width:5px;height: 5px; opacity: .40 } 30% { width:7px;height: 7px; opacity: .60 } 40% { width:9px;height: 9px; opacity: .80 } 50% { width:11px;height: 11px; opacity: 1.0} 60% { width:13px;height: 13px; opacity: .80} 70% { width:15px;height: 15px; opacity: .60} 80% { width:17px;height: 17px; opacity: .40} 90% { width:19px;height: 19px; opacity: .20} 100% { width:21px;height: 21px; opacity: 0.0} }
以上的想法?
任何想法,如何我可以创建类似的东西,好像环生气和退色?
解决方法
你有很多不必要的关键帧。不要将关键帧视为单个帧,将它们视为动画中的“步骤”,计算机会填充关键帧之间的帧。
这里有一个解决方案,清理大量的代码,使动画从中心开始:
.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0 } @-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1,0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2,1.2); opacity: 0.0;} }
你可以在这里看到它在行动:http://jsfiddle.net/Fy8vD/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。