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

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

青灯夜游
풀어 주다: 2021-09-22 10:59:36
앞으로
3044명이 탐색했습니다.

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

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

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

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

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

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;
	}
로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿