前言

backgroud作为css样式中重要的设置背景属性，常用的有size和position，repeat等反方法，而linear-gradent作为渐变一般由于颜色的精准性用的图片替代的也有。但是配合keyframes可以实现简单的呼吸灯效果。

实现原理

鼠标图片需要准备png的透光素材，只在需要显示背景色的地方抠成png，其余白底或者正常页面色。

闪光部分为png透底

.demo {
        width:600px;
        height:600px;
        background:linear-gradient(#0f0,#ff0,blue,red,blue,#ff0,#0f0);
        background-size:100% 500%;
        background-position:0 0;
        animation: move 20s infinite linear;
        border:1px solid #ccc;
        float:left;
    }
    .demo img{
        width:100%;
    }

    /* 背景图位移动画 */
    @keyframes move {
        0% {
                //位移背景图切换颜色
        background-position:0 0;
        }
        100% {
        background-position:0 -500%;
        }
    }
...
<div class="demo">
        <img src="./img/rat6.png" alt="">
</div>