如何使用HTML5+CSS3绘制一个QQ 企鹅Logo

本文链接：https://blog.csdn.net/luojiandecsdn/article/details/50774891

本文作者根据腾讯AlloyTeam的文章，尝试用CSS3和HTML5绘制QQ企鹅Logo，虽然结果稍显肥胖，但详细介绍了绘制过程，适合初学者学习CSS3图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了腾讯全端团队AlloyTeam发布的这篇《使用CSS3绘制腾讯QQ的企鹅Logo》文章，自己仿照了一下，做了个是山寨版的QQ企鹅。
之所以称之为山寨版，是因为原版绘出来的是这样：
这里写图片描述

而我绘出来的是这样：
这里写图片描述

好吧，由于不知道原始的数据，绘出来真的有点胖，有点别扭所以我叫他胖企鹅大笑大笑大笑。当然，尽管没绘好，不过也因此掌握了绘制方法，也算是不枉我辛辛苦苦了几小时。不多说，直接得上代码：

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Tencent QQ Logo</title>
    <link rel="stylesheet" type="text/css" href="css3-tencent-QQ-logo.css">
</head>
<body>
   <div id="wrapper">
      <div class="head">
          <div class="left eye">
              <div class="innerLeftEye"><!--::after--></div>
          </div>
          <div class="right eye">
              <div class="innerRightEye">
                <div class="fix">
                    <div class="fixCricle1"></div>
                    <div class="fixCricle2"></div>
                </div>
              </div>
          </div>
          <div class="mouthWrapper">
              <div class="mouthTop"></div>
              <div class="mouthBottom"></div>
              <div class="lips"></div>
          </div>
      </div>
       <div class="body">
           <div class="bodyOuter"></div>
           <div class="bodyInner"></div>
           <div class="scarf">
               <div class="scarfLeftFold"></div>
               <div class="scarfRightFold"></div>
           </div>
           <div class="scarfEnd"><!--::after--></div>
           <div class="leftHand"></div>
           <div class="rightHand"></div>
       </div>
       <div class="foot">
           <div class="leftFoot"><!--::after--></div>
           <div class="rightFoot"><!--::after--></div>
       </div>
   </div>
</body>
</html>

CSS3

body{
    padding: 0;
    margin: 0;
}

#wrapper {
    position: absolute;
    width: 400px;
    height: 450px;
    left: 35%;
    top: 20%;
    background-color: #9c80fb;
}
.head{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 80px;
    width: 227px;
    height: 199px;
    background-color: black;
    border-top-left-radius: 117px 117px;
    border-top-right-radius: 117px 117px;
    border-bottom-left-radius: 100px 100px;
    border-bottom-right-radius: 102px 100px;