闪烁
把这张图片弄个闪烁的效果。
HTML样式:

这是给了那张图片的宽、高和颜色、居中。

Css样式:
.gptm{
animation: blink 3s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
}

@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
这些事那张图片的动画和时间效果,还有一个由深到浅的效果。

相关文章: