CSS3ランダム背景画像切り替えエフェクト
CSS3のランダム背景画像フェードイン・フェードアウト切り替えエフェクト デモ効果はこの記事の背景に表示されています 皆さんが私の幻想領域二次元限定版のソースコードを解析するのに苦労しているようなので(30分以上もかけている人もいるようです)、時間を見つけて整理して公開することにしました 当初は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部分(中のテキスト部分との数は自由に変更可能です) ...