手把手教你使用纯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;
	}
    

头

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

眼睛

/* 眼睛 */	.eye {
    		width: 48px;
    		height: 6px;
    		background: rgb(0, 0, 0);
    		border-radius: 3px;
    		position: absolute;
    		left: 65px;
    		top: 119px;
    		z-index: 3;
    		transform: rotate(-2deg);
	}
/* 右边眼睛 */	.eye.right {
    		left: 195px;
    		top: 119px;
    		transform: rotate(2deg);
	}
    

害羞圆点

/* 害羞圆 */	.shy {
    		width: 31px;
    		height: 25px;
    		border-radius: 50%;
    		background-color: #e9a998;
    		position: absolute;
    		left: 85px;
    		top: 140px;
    		z-index: 3;
	}
/* 右边害羞圆 */	.shy.right {
    		left: 184px;
    		top: 141px;
    		transform: rotate(-8deg);
	}
    

嘴巴

/* 嘴 */	.mouth {
    		width: 16px;
    		height: 10px;
    		border: 4px solid black;
    		border-right: 4px solid black;
    		border-bottom: 4px solid black;
    		border-left: 4px solid transparent;
    		border-top: 4px solid transparent;
    		border-radius: 50%;
    		transform: scale(-1.2, 1) rotate(43deg);
    		position: absolute;
    		left: 126px;
    		top: 180px;
    		z-index: 3;
	}
/* 嘴右边 */	.mouth.right {
    		transform: scale(1.2, 1) rotate(43deg);
    		position: absolute;
    		left: 146px;
    		top: 180px;
	}
    

肚子

.body {
    		width: 128px;
    		height: 140px;
    		box-shadow: 0 0 2px 0 rgb(255, 255, 255);
    		background: -webkit-radial-gradient(50% 0%, farthest-side circle, #CDC9C9 2%, rgb(255, 192, 236) 50%, rgb(255, 192, 236));
    		position: absolute;
    		left: 85px;
    		top: 219px;
    		z-index: 1;
    		border-radius: 0px 0px 53px 54px/0px 0px 53px 53px;
	}
    

手臂

/* 手 */	.arm {
    		width: 43px;
    		height: 100px;
    		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
    		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
    		border-radius: 120px 120px 280px 280px/120px 120px 800px 800px;
    		position: absolute;
    		left: 59px;
    		top: 225px;
    		transform: rotate(25deg);
	}
	/* 右手 */	.arm.right {
    		left: 200px;
    		top: 225px;
    		background: linear-gradient(66deg, #e2e2e2 8%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
    		transform: rotate(-17deg);
    		animation: hop 2s linear infinite;
	}
	@keyframes hop {
		20% {
    			transform: rotate(-40deg) translatex(18px);
    			box-shadow: -0.2em 1em 0 -1em #333;
		}
	}
    

腿

	/* 腿 */	.leg {
    		width: 38px;
    		height: 62px;
    		box-shadow: 0 0 2px 0 rgb(255, 192, 236);
    		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
    		border-radius: 120px 120px 680px 280px/120px 120px 800px 800px;
    		position: absolute;
    		left: 88px;
    		top: 313px;
    		transform: rotate(-3deg);
	}
	/* 右腿 */	.leg.right {
    		background: linear-gradient(-66deg, #e2e2e2 18%, rgb(255, 192, 236) 37%, rgb(255, 192, 236));
    		transform: scale(-1, 1) rotate(-3deg);
    		left: 173px;
    		top: 313px;
	}
    

是不是很简单啊？你实现了吗！

更多编程相关知识，请访问：编程视频！！

以上就是手把手教你使用纯CSS绘制可爱玉兔（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！