Apprenez étape par étape à dessiner un joli lapin de jade en utilisant du CSS pur (avec code)-tutoriel CSS-php.cn

Apprenez étape par étape à dessiner un joli lapin de jade en utilisant du CSS pur (avec code)

青灯夜游

Libérer： 2021-09-22 10:59:36

avant

3047 Les gens l'ont consulté

Comment dessiner un joli lapin de jade en utilisant du CSS pur ? L'article suivant vous apprendra comment dessiner un joli lapin de jade en utilisant du CSS pur. J'espère que cela sera utile à tout le monde !

Apprenez étape par étape à dessiner un joli lapin de jade en utilisant du CSS pur (avec code)

Voici une courte histoire pour vulgariser la science avec vous :

Le Lapin de Jade était à l'origine Hou Yi Parce que Chang'e a volé vers la lune et a raté Hou Yi, Hou Yi est devenu son préféré afin d'être avec Chang. 'e. Le petit animal - le Lapin de Jade. C'est dommage que Chang'e n'ait jamais su que le Lapin de Jade était Hou Yi qui lui manquait jour et nuit

Maintenant, laissez-moi vous faire découvrir le charmant Lapin de Jade.

Rendu de Jade Rabbit :

Apprenez étape par étape à dessiner un joli lapin de jade en utilisant du CSS pur (avec code)

Code d'implémentation :

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

Copier après la connexion

mise en page CSS

* {
		padding: 0;
		margin: 0;
	}

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

Copier après la connexion

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

Copier après la connexion

Oreilles

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

Copier après la connexion

Yeux

N'est-ce pas facile ? L'avez-vous réalisé !

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation

! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!