Css on 阿珏酱のBlog https://zh.moejue.cn/ja/categories/css/ Recent content from 阿珏酱のBlog Hugo ja xxx@example.com (MoeJue) xxx@example.com (MoeJue) 本ブログのすべての文書は、特に指定されていない限り、BY-NC-SAライセンスに従っています。引用の際は出典を明記してください！ Wed, 16 May 2018 11:58:08 +0000 CSS3ランダム背景画像切り替えエフェクト https://zh.moejue.cn/ja/posts/4/ Wed, 16 May 2018 11:58:08 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/ja/posts/4/ CSS3ランダム背景画像切り替えエフェクト

著者: MoeJue(xxx@example.com)

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

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

    この記事は2018-05-16に阿珏酱のBlogで公開され、最終更新日は2018-05-16です

    ]]> css 簡単なCSS3アバター回転と3D回転効果 https://zh.moejue.cn/ja/posts/39/ Mon, 10 Jul 2017 07:45:23 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/ja/posts/39/ 簡単なCSS3アバター回転と3D回転効果

    著者: MoeJue(xxx@example.com)

    ウェブサイトのコメント欄で、コメント投稿者のアバターにマウスカーソルを合わせると360°回転するのをよく見かけます。

    まず効果を見てみましょう。

    .tximg{ height:300px; border-radius:50%; border:2px solid green; /*変化規則*/ transition:all 2s; } .tximg:hover{ /* 変化動作 定義2d回転、パラメータは角度を記入 */ transform:rotate(360deg); }

    CSS部分

    img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*変化規則*/
	transition:all 2s;
}

img:hover{
	/*
		変化動作
		2D回転を定義し、パラメータに角度を記入
	*/
	transform:rotate(360deg);
}

    HTML部分（非常にシンプルで、画像が1枚だけです）

    <img src="http://www.52ecy.cn/log0.png">

    3D回転効果（フロントエンドの表示スタイルがやはり競合しているようです -。-）

    .div{ width:300px; height:300px; border:1px solid red; /*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/ perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/ } .img{ width:300px; height:300px; border:1px solid red; /*変化規則*/ /*回転要素の原点位置を設定*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*変化動作*/ transform:rotateX(60deg); }

    CSSコード

    div{
	width:300px;
	height:300px;
	border:1px solid red;
	/*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/
	perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/
}
img{
	width:300px;
	height:300px;
	border:1px solid red;
	/*変化規則*/
	/*回転要素の原点位置を設定*/
	transform-origin:bottom;
	transition:all 2s;
}

img:hover{
	/*変化動作*/
	transform:rotateX(60deg);
	
}

    HTMLコードの部分はアバター回転の部分と全く同じで、画像を1枚置くだけなので、ここでは省略します。

    効果画像を現在のページに直接挿入すると、現在のページのCSSスタイルと競合し、ページ全体が崩れてしまうため、効果画像のスタイルセレクタを変更しました。

    注意：IEモードでは動作しない可能性があります。

    この記事は2017-07-10に阿珏酱のBlogで公開され、最終更新日は2017-07-10です

    ]]>     css     CSS3でiPhoneを描く https://zh.moejue.cn/ja/posts/29/ Mon, 03 Jul 2017 06:09:01 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/ja/posts/29/ CSS3でiPhoneを描く

    著者: MoeJue(xxx@example.com)

    まずは完成イメージをご覧ください、お先にどうぞ。(これは決して画像ではありません。うん～、なんか変な言い方ですね～)

    iPhoneの何世代目か聞かないでください、私も知らないし、使ったこともないので、お察しください。


    CSSスタイル部分

    #phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*设置div元素的圆角边框*/ }

    #camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*距离上边距10px 左右居中*/ }

    #receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

    #screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

    #btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*当宽高相同时，则为圆*/ margin:10px auto; }

    /*:before 选择器在被选元素的内容前面插入内容。*/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*即使插入的内容为空也需要写，否则不显示*/ display:inline-block; margin-top:7px; margin-left:7px; }

    HTML部分

    後で少し機能を追加しました

    ホームボタンをクリックすると携帯の画面が点灯し、5秒後に再び画面が消えます

    この記事は2017-07-03に阿珏酱のBlogで公開され、最終更新日は2017-07-03です

    ]]>     css