CSS3动画。雷达风格类似于'Tinder'应用程序

我正在尝试创建一个类似于“Tinder”应用程序的雷达效果类似的动画。CSS3动画。雷达风格类似于'Tinder'应用程序

这与我在小提琴中做的非常相似，有一些微调，这是我需要一些帮助的地方！

基本上从0％ - 90％，我想圈子扩大，而内部的div慢慢消失。

90％ - 100％我希望div继续增长，但在该时间段内褪去0的不透明度。

@-webkit-keyframes pulsate { 
    0% { 
     width:150px; 
     height:150px; 
     top:200px; 
    } 
    90% { 
     width:870px; 
     height:870px; 
     top:-160px; 
    } 
    100% { 
     width:950px; 
     height:950px; 
     top:-200px; 
    } 
}

而且，它的无限的方面。我喜欢它，所以看起来好像一个脉冲在n秒内被消除，而不是脉冲完成时的脉冲。最初我使用jQuery在timeout（）上添加和删除元素，但效率不高。现在它使用多个div，这也很糟糕。

任何建议是非常appreicated，谢谢你！

来源

2014-02-23 Jordan H

您可以提供Tinder雷达的外观吗？我不熟悉它 –

我试过了，但我只能找到他们的旧版本。它扩展，停止，扩展和褪色的地方我想把所有的东西都放到一个平滑的动画中。在不透明度变为0之前没有停止的地方。 –

How does this look?

我清理你的代码的一个好位，删除一些不必要的HTML元素，结合CSS代码，添加缺少的分号（您还是应该将其即使是用于未来用途的最后CSS线！），并修复了您的动画。

我改变的主要原因是，您只列出一些关键帧中的CSS属性，任何以前的CSS属性将保留。这意味着您只能进行一次更改，但不透明度会较快结束。

/* HTML */ 
<section id='slide4'> 
    <img src='http://www.ribbustingjokes.com/lilsusieq/scrapbook/frames/circle/frame_circle_A_1.png' style='width:178px'/> 
    <div id='pulse1'></div> 
    <div id='pulse2'></div> 
</section> 

/* CSS webkit prefixes left out for brevity (they're in demo) */ 
body { width:1280px; overflow-y:hidden; } 
img { 
    position:absolute; 
    top:50%; left:50%; 
    z-index:1; 
    transform:translateX(-50%) translateY(-50%); 
} 
#pulse1, #pulse2 { 
    border-radius:50%; 
    position:absolute; 
    height: 150px; width: 150px; 
    top: 50%; left:50%; 
    border: 2px solid rgba(66, 152, 181, 1); 
    animation: pulsate 3s infinite; 
    background-color:#4298b5; 
    transform:translateX(-50%) translateY(-50%); 
} 
#pulse2 { 
    animation: pulsate 3s -.5s infinite; 
} 
@keyframes pulsate { 
    0%,100% { 
     width:150px; 
     height:150px; 
     opacity:0; 
    } 
    1% { opacity:1; } 
    70% { 
     opacity:0.5; 
    } 
    99.999% { 
     width:950px; 
     height:950px; 
     opacity:0; 
    } 
}

我还固定有全色在动画结束通过保持关闭的不透明度动画开始，直到1％闪烁中的问题

我也改变了第二动画使用负动画延迟，因此它立即开始。退房my article更多信息，关于这个问题的

我也用transformX(-50%) transformY(-50%)完美居中的对象，将其翻译有元素的宽度和高度的左侧和高达

我希望它能帮助！

来源

2014-02-23 04:23:48

CSS3动画。雷达风格类似于'Tinder'应用程序

回答

相关问题