前言
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>
