Bringen Sie Schritt für Schritt bei, wie Sie mit reinem CSS (mit Code) ein süßes Jadekaninchen zeichnen.

Wie zeichne ich ein süßes Jadekaninchen mit reinem CSS? Im folgenden Artikel erfahren Sie, wie Sie mit reinem CSS ein süßes Jadekaninchen zeichnen. Ich hoffe, dass er für alle hilfreich ist!

Hier ist eine Kurzgeschichte, um die Wissenschaft bei Ihnen bekannt zu machen:

Das Jadekaninchen hieß ursprünglich Hou Yi. Da Chang'e zum Mond flog und Hou Yi vermisste, wurde Hou Yi zu ihrem Liebling, um mit Chang zusammen zu sein 'e. Das kleine Tier – das Jade-Kaninchen. Es ist schade, dass Chang'e nie wusste, dass das Jade-Kaninchen Hou Yi war, das sie Tag und Nacht vermisste.

Jade Rabbit-Rendering:

Implementierungscode:

HTML-Tag

<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-Layout

* {
		padding: 0;
		margin: 0;
	}

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

Header

.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;
	}

Ohren

	/* 耳朵 */
	.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;
	}

Augen

Ist es nicht einfach? Haben Sie es geschafft!

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos! !

Das obige ist der detaillierte Inhalt vonBringen Sie Schritt für Schritt bei, wie Sie mit reinem CSS (mit Code) ein süßes Jadekaninchen zeichnen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!