纯css 边框闪烁效果

代码如下：

.onlinekf {
    animation: glow 800ms ease-out infinite alternate;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(252, 94, 94, .2), inset 0 0 5px rgba(252, 94, 94, .1), 0 1px 0 #d70c19;
    }
    100% {
        border-color: #d70c19;
        box-shadow: 0 0 20px rgba(252, 94, 94, .6), inset 0 0 10px rgba(252, 94, 94, .4), 0 1px 0 #d70c19;
    }
}

已测无误。css根据自己的项目设置的，个别参数自己调整。

效果如下（进入课堂）：

 

html部分：

<a class="onlinekf" href="#" target="_blank">
<i class="fas fa-book"></i>
<p>进</p>
<p>入</p>
<p>课</p>
<p>堂</p>
</a>