CSS 呼吸灯效果

发表于

DIY 一个呼吸灯

所谓“呼吸灯”，就是指一个元素会不停地类似呼吸的节奏，进行闪烁。

（其实这个概念还是挺耳熟能详的- -）

原理嘛，就是利用了 CSS3 的动画 @keyframes 和 animation 属性，自定义呼吸的节奏（动画的效果和时间）。此外，也利用了 box-shadow 属性来给元素增加阴影，起到了灯光发散的效果。

直接 po 上代码：

/* 定义动画的起始效果，CSS3会在这个区间中平缓过渡 */
/* 背景色 background-color 的变化可以实现灯光闪烁的效果 */
/* 阴影色 box-shadow 的变化可以实现灯光发散的效果 */
@keyframes breathing{
    0% { 
        background-color: #eee;
        box-shadow: 0 0 5px #eee;
    }
    100% { 
        background-color: #999;
        box-shadow: 0 0 15px #eee;
    }
}
.breathing-light{
    /* 省略一些样式属性 */
    animation-name: 'breathing';
    animation-duration: 3000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    /* 动画循环次数，现在是无限循环 */
    animation-direction: alternate;         /* 动画执行的方向，现在是会在0-100%中来回进行 */
}