banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

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

ヒント:このメッセージが表示されている場合、現在の記事は元の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部分(テキスト部分と
  • の数は自由に変更できます)
    ```
    • 幻想
    • 領域
    • 一つ
    • 専門の
    • 二次元
    • 画像ホスティング
    ``` 注意:
  • の数はCSSに対応させ、少なくとも2つ以上必要です。また、IEブラウザはCSS3の効果をサポートしていません。
    • 苟利
    • 国家
    • 生死以
    • 岂能
    • 祸福
    • 趋避之

    ユーザーコメント:

    image 凡人多烦事 1 年前 (2020-02-16)
    これどうやってやるの?半日研究したけど、まだ真っ黒な画面 [#aru_15][#aru_15]

    image 阿珏 1 年前 (2020-02-16)
    @凡人多烦事:グループで私を @して URL を送ってみてください。

    image 凡人多烦事 1 年前 (2020-02-17)
    @阿珏:グループの中のそれはあなたですか?[#aru_15] 私を主人かこのグループのリーダーと呼んでください [#aru_16]

    image 365cent 3 年前 (2018-10-12)
    翻牌子

    image 私は無理だと思う 3 年前 (2018-08-30)
    やはりコードをそのままコピーすることはできません。最初の行の background: #000; を使った後、背景が真っ黒になり、効果がなくなりました。調査した結果、background-color(0,0,0,0); に変更したら成功しました。また、コード内にセミコロンが欠けていることがあり、強迫観念のある私には受け入れがたいです。しかし、やはりブロガーに感謝します、効果コードを共有してくれて!

    image 阿珏 3 年前 (2018-08-31)
    @私は無理だと思う:いくつかのスタイルは実際の状況に応じて変更する必要があります [#aru_36]。css をオンラインでフォーマットすると、デフォルトで最後の行のスタイルはセミコロンなしになります [#aru_11]

    image 墨渊 3 年前 (2018-06-20)
    この画像は無敵です

    image 墨渊 3 年前 (2018-06-20)
    要素をレビューして、どうやって遮断するのか、これはちょっとすごい、直接クラッシュします。

    image 阿珏 3 年前 (2018-06-21)
    @墨渊:控えめに [#aru_130]

    image 腾讯视频 3 年前 (2018-06-14)
    コピーできない?それならこの記事を書く意味は?

    image 阿珏 3 年前 (2018-06-14)
    @腾讯视频:あなたが私の文章をコピーするのですか?

    image 腾讯视频 3 年前 (2018-06-14)
    @阿珏:本当に記事をコピーするのは誰でもできるでしょう。ただ、ブログの右クリック禁止に対しては理由がわからないです。

    image 梦如 3 年前 (2018-05-17)
    解決済み、CSS を強制的にリフレッシュ  ver=

    image 梦奴 3 年前 (2018-05-16)
    変更されたのはランダム画像 API のリンクです 360 极速ブラウザではランダム画像がリフレッシュされません。

    image 阿珏 3 年前 (2018-05-17)
    @梦奴:ブラウザにキャッシュされているので、タイムスタンプを追加すれば大丈夫です。

    image 梦如 3 年前 (2018-05-16)
    できます、いいね。

  • 読み込み中...
    文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。