Heim > Web-Frontend > CSS-Tutorial > Bringen Sie Schritt für Schritt bei, wie Sie mit reinem CSS (mit Code) ein süßes Jadekaninchen zeichnen.

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

青灯夜游
Freigeben: 2021-09-22 10:59:36
nach vorne
3046 Leute haben es durchsucht

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!

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

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:

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

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>
Nach dem Login kopieren

css-Layout

* {
		padding: 0;
		margin: 0;
	}

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

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;
	}
Nach dem Login kopieren

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;
	}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage