html - 如何使用 CSS 为图标 fa-circle 设置动画，使其看起来像录制视频时闪烁的红点？

Question

我在 CSS 中有这个红色图标:

<div><i class="fa fa-circle text-danger"></i>&nbsp; LIVE </div>

我怎样才能让它按时间间隔闪烁？

您还记得在网络摄像头和录像机中，您可以在实际录制时看到红点闪烁吗？我想要相同的效果，如何在 CSS 中实现？难不难？

例如: http://jsbin.com/loxayazega/edit?html,output

Answer 1

尝试使用这个 CSS:

您可以更改 blinker 1.5s 值来控制闪烁速度。

.Blink {
    animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}

@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}

参见 JsFiddle . 我希望它对你有用，谢谢。