如何使用纯css画一只可爱玉兔？下面本篇文章就手把手教你使用纯css绘制可爱玉兔，希望对大家有所帮助！
这里有段小故事跟大家科普一下哦：
玉兔本是后羿,因为嫦娥奔月,而又思念后羿,后羿为了和嫦娥在一起,情愿变成了她最爱的小动物–玉兔.可惜嫦娥始终不知玉兔就是她日夜思念的后羿!
下面就让我带领大家实现一下可爱的玉兔吧。
立即学习“前端免费学习笔记（深入）”；
玉兔效果图：
实现代码：
html标签
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绘制可爱玉兔（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621718.html
微信扫一扫 
支付宝扫一扫 
