乖兔博客

乖兔 > CMS系统 > CSS > css3实现div边框闪烁呼吸灯效果

css3实现div边框闪烁呼吸灯效果

乖兔更新于： 2020-11-29 分类：CSS

css3实现div边框闪烁的呼吸灯效果.jpeg

有时候，处于营销或者其他原因，我们希望网页上的某些元素或者某个div更显眼一些，从而让访客可以关注到这些内容。而由于需要照顾网页美观协调，又不能把它改成太过显眼的颜色，比如大红色。

这时候就可以使用css3的呼吸灯效果，为内容所在div做一个闪烁的边框来实现。

css3实现div边框闪烁呼吸灯效果的代码：

<html>
<body>
<head>
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;
    }
}
</head>
<div class="arrow_box">此处为你想实现呼吸灯醒目效果的内容</div>
</body>
</html>

这个例子中的颜色可以根据自己页面的配色进行修改，及的修改色码的同时要把对应的rgba一起修改掉才有效果。

打赏