如何使用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.我希望它适合你,谢谢.