提示：當你看到這個提示的時候，說明當前的文章是由原emlog博客系統搬遷至此的，文章發布時間已過於久遠，編排和內容不一定完整，還請諒解`
CSS3 隨機背景圖片切換特效
日期：2018-5-16 阿珏 css 瀏覽：4572 次 評論：16 條
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
}
.cb-slideshow li:nth-child(1) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)
}
.cb-slideshow,.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2
}
.cb-slideshow:after {
content: ''
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: -2;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s
}
.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s
}
.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s
}
.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s
}
.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s
}
.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(0)
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(0)
}
100% {
opacity: 0
}
}
當然還是需要配合HTML代碼的 HTML部分(其中的文字部分和
```
- 幻想
- 領域
- 一個
- 專業的
- 二次元
- 圖床
- 苟利
- 國家
- 生死以
- 岂能
- 祸福
- 趋避之
網友評論：
凡人多煩事 1 年前 (2020-02-16)
這個怎麼搞得了嘞？我研究了半天，還是全黑屏 [#aru_15][#aru_15]
阿珏 1 年前 (2020-02-16)
@凡人多煩事：可以在群裡 at 下我發個網址瞅瞅
@阿珏：群裡面那個是你呀？[#aru_15] 叫我主人還是本群群主 [#aru_16]
365cent 3 年前 (2018-10-12)
翻牌子
我覺得不行 3 年前 (2018-08-30)
果然不能純抄代碼，第一行的 background: #000; 用了之後背景全黑沒有特效，排查了後發現改成 background-color(0,0,0,0); 成功了，還有代碼裡缺分號作為一個強迫症的我有點不能接受。不過還是得感謝博主分享的特效代碼！
@我覺得不行：有些樣式是要根據你實際情況更改的 [#aru_36]。css 在線格式化後，默認最後一行樣式都是不加分號的 [#aru_11]
墨淵 3 年前 (2018-06-20)
這圖片無敵了
審核元素，怎麼屏蔽的，這個有點 6，直接死機
@墨淵：低調 [#aru_130]
騰訊視頻 3 年前 (2018-06-14)
不能複製？那編寫這篇文章幹嘛？
@騰訊視頻：給你複製扒我文章？
@阿珏：真要扒文章是個人都能做到吧，只是對於博客禁右感到莫名所以
夢如 3 年前 (2018-05-17)
已解決，強制刷新 CSS ver=
換的是隨機圖 API 的鏈接 在 360 極速瀏覽器裡不會刷新隨機圖
@夢奴：被瀏覽器緩存了，加個時間戳就可以了
可以，讚一個