如何使用纯CSS画一只可爱玉兔?下面本篇文章就手把手教你使用纯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绘制可爱玉兔(附代码)的详细内容,更多请关注亿码酷站其它相关文章!
<!––>手把手教你使用纯CSS绘制可爱玉兔(附代码)
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除
转载请注明来源:手把手教你使用纯CSS绘制可爱玉兔(附代码)
本文永久链接地址:https://www.ymkuzhan.com/43490.html
本文永久链接地址:https://www.ymkuzhan.com/43490.html
下载声明:
本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压; 本站资源来源于用户分享、互换、购买以及网络收集等渠道,本站不提供任何技术服务及有偿服务,资源仅提供给大家学习研究请勿作它用。 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如果你喜欢该程序,请购买正版! 版权声明:
下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益,请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。 免责声明:
您好,本站所有资源(包括但不限于:源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来,并未取得原始权利人授权,因此禁止一切商用行为,仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除,一切因下载人使用所引起的法律相关责任,包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读,理解、同意以上内容,如对以上内容持有异议,请勿下载,谢谢配合!支持正版,人人有责,如不慎对您的合法权益构成侵犯,请联系我们对相应内容进行删除,谢谢!