ヒント：このメッセージが表示されている場合、現在の記事は元の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部分（画像のURLを切り替えることを忘れずに）
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)
@凡人多烦事：グループで私を @して URL を送ってみてください。
@阿珏：グループの中のそれはあなたですか？[#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)
この画像は無敵です
要素をレビューして、どうやって遮断するのか、これはちょっとすごい、直接クラッシュします。
@墨渊：控えめに [#aru_130]
腾讯视频 3 年前 (2018-06-14)
コピーできない？それならこの記事を書く意味は？
@腾讯视频：あなたが私の文章をコピーするのですか？
@阿珏：本当に記事をコピーするのは誰でもできるでしょう。ただ、ブログの右クリック禁止に対しては理由がわからないです。
梦如 3 年前 (2018-05-17)
解決済み、CSS を強制的にリフレッシュ ver=
変更されたのはランダム画像 API のリンクです 360 极速ブラウザではランダム画像がリフレッシュされません。
@梦奴：ブラウザにキャッシュされているので、タイムスタンプを追加すれば大丈夫です。
できます、いいね。