純粋な CSS を使用してかわいい翡翠ウサギを描く方法を段階的に教えます (コード付き)-CSSチュートリアル-php.cn

純粋な CSS を使用してかわいい翡翠ウサギを描く方法を段階的に教えます (コード付き)

青灯夜游

リリース： 2021-09-22 10:59:36

転載

3018 人が閲覧しました

純粋な CSS を使用してかわいい翡翠ウサギを描くにはどうすればよいですか?次の記事では、純粋な CSS を使用してかわいい翡翠ウサギを描く方法を説明します。

純粋な CSS を使用してかわいい翡翠ウサギを描く方法を段階的に教えます (コード付き)

ここに科学を広めるための短い物語があります:

翡翠のウサギはもともと侯儀でした。嫦娥が月に飛んで逃したからです。侯儀、侯儀嫦娥と一緒にいるために、易は喜んでお気に入りの小動物、玉兎に変身しました。残念ながら、嫦娥は、その玉兎が昼も夜も恋しかった侯儀であるとは知りませんでした!

素敵な翡翠ウサギを実感していただけるようご案内させていただきます。

Jade Rabbit レンダリング:

純粋な CSS を使用してかわいい翡翠ウサギを描く方法を段階的に教えます (コード付き)

実装コード:

htmlタグ

<div class="rabit">
		<div class="ear"></div>
		<div class="innerear"></div>
		<div class="ear right"></div>
		<div class="innerear right"></div>
		<div class="eye"></div>
		<div class="eye right"></div>
		<div class="shy"></div>
		<div class="shy right"></div>
		<div class="mouth"></div>
		<div class="mouth right"></div>
		<div class="head"></div>
		<div class="body"></div>
		<div class="arm"></div>
		<div class="arm right"></div>
		<div class="leg"></div>
		<div class="leg right"></div>
	</div>

ログイン後にコピー

cssレイアウト

* {
		padding: 0;
		margin: 0;
	}

	body {
		background: rgb(38, 44, 56);
	}
		/* 大盒子 */
	.rabit {
		width: 300px;
		height: 300px;
		position: relative;
		margin: 120px auto;
	}

ログイン後にコピー

頭

.head {
		width: 222px;
		height: 213px;
		border-radius: 50%;
		background: linear-gradient(1deg, #e2e2e2 1%, rgb(255, 192, 236) 16%, rgb(255, 192, 236));
		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
		position: absolute;
		z-index: 2;
		left: 39px;
		top: 43px;
	}

ログイン後にコピー

耳

	/* 耳朵 */
	.ear {
		width: 65px;
		height: 128px;
		background: rgb(255, 192, 236);
		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
		border-radius: 80px 80px 65px 65px/53px 53px 254px 254px;
		position: absolute;
		left: 65px;
		top: -49px;
		transform: rotateZ(-24deg);
	}
/* 右耳 */
	.ear.right {
		transform: scale(-1, 1) rotateZ(-24deg);
		left: 173px;
		top: -51px;
	}
	/* 耳朵阴影 */
	.innerear {
		width: 50px;
		height: 100px;
		background: rgb(255, 192, 236);
		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
		background: linear-gradient(-196deg, #e2e2e2 9%, rgb(255, 192, 236));
		border-radius: 80px 80px 65px 65px/53px 53px 254px 254px;
		transform: rotateZ(-24deg);
		position: absolute;
		left: 73px;
		top: -33px;
	}
/* 右面阴影 */
	.innerear.right {
		transform: scale(-1, 1) rotateZ(-24deg);
		left: 179px;
		top: -35px;
	}

ログイン後にコピー

目

/* 眼睛 */
	.eye {
		width: 48px;
		height: 6px;
		background: rgb(0, 0, 0);
		border-radius: 3px;
		position: absolute;
		left: 65px;
		top: 119px;
		z-index: 3;
		transform: rotate(-2deg);
	}
/* 右边眼睛 */
	.eye.right {
		left: 195px;
		top: 119px;
		transform: rotate(2deg);
	}

ログイン後にコピー

シャイドット

/* 害羞圆 */
	.shy {
		width: 31px;
		height: 25px;
		border-radius: 50%;
		background-color: #e9a998;
		position: absolute;
		left: 85px;
		top: 140px;
		z-index: 3;
	}
/* 右边害羞圆 */
	.shy.right {
		left: 184px;
		top: 141px;
		transform: rotate(-8deg);
	}

ログイン後にコピー

口

/* 嘴 */
	.mouth {
		width: 16px;
		height: 10px;
		border: 4px solid black;
		border-right: 4px solid black;
		border-bottom: 4px solid black;
		border-left: 4px solid transparent;
		border-top: 4px solid transparent;
		border-radius: 50%;
		transform: scale(-1.2, 1) rotate(43deg);
		position: absolute;
		left: 126px;
		top: 180px;
		z-index: 3;
	}
/* 嘴右边 */
	.mouth.right {
		transform: scale(1.2, 1) rotate(43deg);
		position: absolute;
		left: 146px;
		top: 180px;
	}

ログイン後にコピー

おなか

.body {
		width: 128px;
		height: 140px;
		box-shadow: 0 0 2px 0 rgb(255, 255, 255);
		background: -webkit-radial-gradient(50% 0%, farthest-side circle, #CDC9C9 2%, rgb(255, 192, 236) 50%, rgb(255, 192, 236));
		position: absolute;
		left: 85px;
		top: 219px;
		z-index: 1;
		border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;
	}

ログイン後にコピー

腕

/* 手 */
	.arm {
		width: 43px;
		height: 100px;
		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
		border-radius: 120px 120px 280px 280px/120px 120px 800px 800px;
		position: absolute;
		left: 59px;
		top: 225px;
		transform: rotate(25deg);

	}

	/* 右手 */
	.arm.right {
		left: 200px;
		top: 225px;
		background: linear-gradient(66deg, #e2e2e2 8%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
		transform: rotate(-17deg);
		animation: hop 2s linear infinite;
	}

	@keyframes hop {
		20% {
			transform: rotate(-40deg) translateX(18px);
			box-shadow: -0.2em 1em 0 -1em #333;
		}
	}

ログイン後にコピー

脚

	/* 腿 */
	.leg {
		width: 38px;
		height: 62px;
		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
		border-radius: 120px 120px 680px 280px/120px 120px 800px 800px;
		position: absolute;
		left: 88px;
		top: 313px;
		transform: rotate(-3deg);
	}

	/* 右腿 */
	.leg.right {
		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
		transform: scale(-1, 1) rotate(-3deg);
		left: 173px;
		top: 313px;
	}

ログイン後にコピー

それは非常に単純ではありませんか？達成できましたか！

プログラミング関連の知識について詳しくは、

プログラミングビデオをご覧ください。！

以上が純粋な CSS を使用してかわいい翡翠ウサギを描く方法を段階的に教えます (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。