순수 CSS(코드 포함)를 사용하여 귀여운 옥토끼를 그리는 방법을 단계별로 가르쳐주세요.

순수한 CSS를 사용하여 귀여운 옥토끼를 그리는 방법은 무엇인가요? 다음 글에서는 순수 CSS를 사용하여 귀여운 옥토끼를 그리는 방법을 알려드리겠습니다. 모두에게 도움이 되기를 바랍니다.

다음은 과학을 대중화하기 위한 짧은 이야기입니다.

옥토끼는 원래 Hou Yi였습니다. Chang'e가 달로 날아가서 Hou Yi를 그리워했기 때문에 Hou Yi는 Chang과 함께하기 위해 그녀가 가장 좋아하는 사람이 되었습니다. e. 작은 동물 - 옥토끼. 창어는 그 옥토끼가 밤낮으로 그리워했던 허우이라는 사실을 전혀 몰랐습니다.

이제 사랑스러운 옥토끼를 깨닫게 해드리겠습니다.

Jade Rabbit 렌더링:

구현 코드:

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

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

귀

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

눈

쉽지 않나요? 달성하셨나요!

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오

를 방문하세요! !

위 내용은 순수 CSS(코드 포함)를 사용하여 귀여운 옥토끼를 그리는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!