css3的随机背景图片淡入淡出切换特效 演示效果如本篇文章背景所示
看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来
设计之初本来是打算使用jQuery进行实现的,但是注意到了css3的@keyframes 规则,css3已经强大到曾经只有js才能实现的效果
定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
核心css部分(记得切换图片地址)
body {
background: #000;
background-attachment: fixed;
word-wrap: break-word;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat
}
ul {
list-style: none
}
.