CSS3ランダム背景画像切り替えエフェクト

2 分
359 文字
カテゴリー:
css
タグ:
#CSS #HTML #教程

CSS3のランダム背景画像フェードイン・フェードアウト切り替えエフェクト デモ効果はこの記事の背景に表示されています
皆さんが私の幻想領域二次元限定版のソースコードを解析するのに苦労しているようなので（30分以上もかけている人もいるようです）、時間を見つけて整理して公開することにしました
当初はjQueryで実装する予定でしたが、CSS3の@keyframesルールに気づきました。CSS3は、かつてJSでしか実現できなかった効果を実装できるほど強力になっています

定義と使い方

@keyframesルールを使用することで、アニメーションを作成できます。

アニメーション作成の原理は、あるCSSスタイルを別のスタイルに徐々に変化させることです。

アニメーションの過程で、このCSSスタイルを複数回変更することができます。

変化が起こるタイミングは、パーセンテージで指定するか、キーワード「from」と「to」（それぞれ0%と100%に相当）で指定します。

0%はアニメーションの開始時点、100%はアニメーションの終了時点です。

最高のブラウザサポートを得るためには、常に0%と100%のセレクタを定義する必要があります。

注：アニメーションの見た目を制御するには、アニメーション関連のプロパティを使用し、アニメーションをセレクタにバインドしてください。

CSSのコア部分（画像アドレスの変更を忘れないでください）

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部分（中のテキスト部分と

  • の数は自由に変更可能です）

    HTML 
    <ul class="cb-slideshow">
	<li>
		<span>幻想</span></li>
	<li>
		<span>領域</span></li>
	<li>
		<span>一つの</span></li>
	<li>
		<span>専門的な</span></li>
	<li>
		<span>二次元</span></li>
	<li>
		<span>画像アップローダー</span></li>
</ul>
    クリックして展開し、詳細を表示

    注意：

  • の数はCSSと対応させる必要があり、少なくとも2つ以上必要です。また、IEブラウザはCSS3のエフェクトをサポートしていません

    • 苟利
    • 国家
    • 生死以
    • 豈能
    • 禍福
    • 趨避之
    PLAINTEXT 
    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{z-index:99;list-style:none}li{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}}
    クリックして展開し、詳細を表示

    • 著作権表示

    著者: MoeJue

    リンク: https://ja.moejue.cn/posts/4/

    ライセンス: クリエイティブ・コモンズ表示-非営利-継承4.0国際ライセンス

    この作品は、クリエイティブ・コモンズ表示-非営利-継承4.0国際ライセンスに基づいてライセンスされています。

    関連記事

    検索を開始

    キーワードを入力して記事を検索

    ↑↓
    ↵
    ESC
    ⌘K ショートカット