我要评论效果如下，非常简单，也很容易实现，做动图的网址丢了就截个图吧，这种简单的渐变效果使用css就可以完成。
@keyframes flashing {
from {
background: red;
}
50% {
background: transparent;
}
from {
background: red;
}
}
.alarmon {
background: red;
border-radius: 50%;
animation: flashing 2000ms infinite ease-in-out;
}
flashing 是自己定义的名字，css3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画是通过逐步改变从一个css样式设定到另一个。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
infinite 是播放次数无限循环的意思
ease-in-out加速然后减速，这里设置的是闪烁的方式
将classname=alarmon 绑定在警报图片img标签上就可以生效啦！
发表评论