CSS3 fadeIn淡入animation动画相关有趣显示现象实例页面
回到相关文章 »代码:
CSS代码:
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .box { width: 256px; height: 191px; position: relative; } .text { line-height: 30px; position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.5); color: #fff; text-align: center; font-size: 14px; } .fade { -webkit-animation: fadeIn 2s 2s infinite; animation: fadeIn 2s 2s infinite; }
HTML代码:
<div class="box"> <span class="text">快播的辩词再精彩 也不配赢得掌声</span> <img class="fade" src="mm1.jpg"> </div>
效果:
快播的辩词再精彩 也不配赢得掌声
默认文字覆盖图片,但淡出一执行,文字就不见了