如何使用 -webkit-animation - 外环创建脉冲效果 [英] How to create a pulse effect using -webkit-animation - outward rings
问题描述
我找到了这篇文章:
http://www.zurb.com/关于 css3 动画的文章/221/css3-animation-will-rock-your-world.
我正在尝试创建在上述网站上但在个人网站上看到的类似效果:www.imfrom.me
I am trying to create a similar effect seen on the site above but on personal site at: www.imfrom.me
我所在的缅因州有红色提示框.我想通过指示位置的箭头创建一个脉冲环.
Where I have the state of Maine, there is the red tip box. I want to create a pulse ring by the arrow indicating the location.
更新代码:
我在下面想出了这个(在这里试试:http://jsfiddle.net/ftrJn/)正如你所知道的那样,关于如何让它从中心生长的任何想法:
I came up with this below (try it here: http://jsfiddle.net/ftrJn/) as you can tell its close, any thoughts on how I can get it to grow from the center:
.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}
}
<小时>
对此有什么想法吗?
Thoughts on that above?
关于如何创建类似环动画消失并消失的东西的任何想法?
Any ideas on how I can create something like that as if rings animate out and fade away?
推荐答案
您有很多不必要的关键帧.不要将关键帧视为单个帧,而是将它们视为动画中的步骤",计算机会填充关键帧之间的帧.
You have a lot of unnecessary keyframes. Don't think of keyframes as individual frames, think of them as "steps" in your animation and the computer fills in the frames between the keyframes.
这里有一个解决方案,清理了大量代码,让动画从中心开始:
Here is a solution that cleans up a lot of code and makes the animation start from the center:
.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/
You can see it in action here: http://jsfiddle.net/Fy8vD/
这篇关于如何使用 -webkit-animation - 外环创建脉冲效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!