这篇文章给大家分享的是有关如何使用纯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绘制可爱玉兔”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
