HTML5和CSS3实现大白绘制

源代码如下：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="{CHARSET}">
       <title>大白设计</title>
       <style>
           body {
               background: #595959;
           }

           #baymax {
               margin: 0 autu;
               /*居中*/
               height: 600px;
               overflow: hidden;
           }

           #head {
               height: 64px;
               width: 100px;
               border-radius: 50%;
               background: #fff;
               margin: 0 auto;
               margin-bottom: -20px;
               border-bottom: 5px solid #e0e0e0;
               z-index: 100;
               position: relative;
           }

           #eye,
           #eye2 {
               width: 11px;
               height: 13px;
               background: #282828;
               border-radius: 50%;
               position: relative;
               top: 30px;
               left: 27px;
               transform: rotate(8deg);
           }

           #eye2 {
               transform: rotate(-8deg);
               left: 69px;
               top: 17px;
           }

           #mouth {
               width: 38px;
               height: 1.5px;
               background: #282828;
               position: relative;
               left: 34px;
               top: 10px;
           }

           #torso,
           #belly {
               margin: 0 auto;
               height: 200px;
               width: 180px;
               background: #fff;
               border-radius: 47%;
               border: 5px solid #e0e0e0;
               border-top: none;
               z-index: 5;
           }

           #belly {
               width: 245px;
               height: 300px;
               margin-top: -140px;
               z-index: 5;
           }

           #cover {
               width: 190px;
               background: #fff;
               height: 150px;
               margin: 0 auto;
               position: relative;
               top: -20px;
               border-radius: 50%;
           }

           #heart {
               width: 25px;
               height: 25px;
               border-radius: 50%;
               position: relative;
               box-shadow: 2px 5px 2px #ccc inset;
               right: -115px;
               top: 40px;
               z-index: 111;
               border: 1px solid #ccc;
           }

           #left-arm,
           #right-arm {
               height: 270px;
               width: 120px;
               border-radius: 50%;
               background: #fff;
               margin: 0 auto;
               position: relative;
               top: -350px;
               left: -100px;
               transform: rotate(20deg);
               z-index: -1;
           }

           #right-arm {
               transform: rotate(-20deg);
               left: 100px;
               top: -620px;
           }

           #l-bigfinger,
           #r-bigfinger {
               height: 50px;
               width: 20px;
               border-radius: 50%;
               background: #fff;
               position: relative;
               top: 250px;
               left: 50px;
               transform: rotate(-50deg);
           }

           #r-bigfinger {
               left: 50px;
               transform: rotate(50deg);
           }

           #l-smallfinger,
           #r-smallfinger {
               height: 35px;
               width: 15px;
               border-radius: 50%;
               background: #fff;
               position: relative;
               top: 195px;
               left: 66px;
               transform: rotate(-40deg);
           }

           #r-smallfinger {
               background: #fff;
               transform: rotate(40deg);
               top: 195px;
               left: 37px;
           }

           #left-leg,
           #right-leg {
               height: 170px;
               width: 90px;
               border-radius: 40% 30% 10px 45%;
               background: #fff;
               position: relative;
               top: -640px;
               left: -45px;
               transform: rotate(-1deg);
               z-index: -2;
               margin: 0 auto;
           }

           #right-leg {
               background: #fff;
               border-radius: 30% 40% 45% 10px;
               margin: 0 auto;
               top: -810px;
               left: 50px;
               transform: rotate(1deg);
           }
       </style>
   </head>

</html>

页面效果如下：

全部评论

推荐最新楼层

05-14 16:55

广州大学 Java

双非春招及补录总结

面试情况25届双非本科，有 ACM 竞赛经历，两段实习（小厂 + 独角兽）。以下为2024年11月到次年5月的春招及其补录面试情况，若对个人秋招经历感兴趣，可查看另一篇置顶文章。通过某区级供水国企汇丰科技：线上行为测评 → Coding 测试 → 线下技术 & HR 面东方财富：一、二轮线上面，三轮线下技术面招银科技：一轮线上技术，二轮、三轮线下技术和HR元戎启行：三轮技术面 + HR 面，一共四面面试挂拼多多：客户端，三轮技术面挂，手撕没撕出来4399：一轮技术面挂微派：一轮技术面挂，手撕没撕出来以下是个人无意向故提前主动终止流程，以免影响其他候选人广州农商银行：线下笔试，一轮面试...

isjsns：同双非本，最后的总结那块挺赞同的，我们计院的就业数据也就那样，年包二十到四十万的人也有，但少之又少，周围有认识的地信和电子的也有二到四十万的，找的还不错的包括我基本都是春招才找到的，个人是感觉春招机会挺多的，也可能是像楼主一样年初又找了个实习加技术又沉淀了一波的原因，本来秋招结束都想摆了，最后还是熬出来了