Question

我正在尝试创建一个类似于雷达效果的动画，类似于“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，这也很糟糕。

任何建议都很有意义，谢谢!!

Answer 1

How does this look?

我清理了一些代码，删除了一些不必要的HTML元素，组合了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%)来完美地居中对象，这意味着它具有左右元素的宽度和高度

我希望它有所帮助！

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

1 个答案: