css3繪製QQ企鵝圖示程式碼例項

admin發表於2017-03-01
CSSS3
分享一段程式碼例項，它使用css3實現了QQQQ企鵝圖示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.penguin {
  width: 650px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
/*頭部*/
header {
  width: 425px;
  height: 340px;
  border: 1px solid black;
  background-color: black;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  position: absolute;
  left: 125px;
  top: 20px;
  z-index: 4;
}
/*眼睛*/
.eyeleft, .eyeright {
  width: 75px;
  height: 112px;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
}
.eyeleft {
  left: 120px;
  top: 90px;
}
.eyeright {
  left: 230px;
  top: 90px;
}
.eyeleft .eyes {
  width: 27px;
  height: 46px;
  background-color: black;
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  left: 40px;
  top: 37px;
}
.eyeright .eyess {
  width: 27px;
  height: 46px;
  background-color: black;
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  left: 10px;
  top: 37px;
}
.eyeright .eyesss {
  width: 25px;
  height: 40px;
  background-color: white;
  position: absolute;
  border: 1px solid white;
  border-radius: 50%;
  left: 11px;
  top: 52px;
  z-index: 100;
}
/*嘴*/
.mouth {
  width: 285px;
  height: 85px;
  position: absolute;
  top: 224px;
  left: 195px;
  z-index: 10;
}
.mouth .mouthTop {
  width: 285px;
  height: 70px;
  border: 1px solid black;
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
  background-color: #ec9a27;
  position: absolute;
}
.mouth .mouthBottom {
  width: 210px;
  height: 80px;
  border-bottom: 10px solid black;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 70%;
  border-bottom-right-radius: 50% 70%;
  background-color: #ec9a27;
  position: absolute;
  left: 40px;
  top: 5px;
}
/*圍巾*/
.scarf {
  width: 465px;
  height: 200px;
  border: 5px solid black;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 3;
  top: 200px;
  left: 100px;
}
.scarfs {
  width: 90px;
  height: 130px;
  background-color: red;
  position: absolute;
  border: 5px solid black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 20%;
  border-top-left-radius: 40%;
  left: 190px;
  top: 360px;
  z-index: 2;
}
/*身體*/
.content {
  width: 520px;
  height: 400px;
  border: 1px solid black;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 230px;
  left: 80px;
  z-index: 1;
}
.content .white {
  width: 470px;
  height: 280px;
  background-color: white;
  position: absolute;
  border-radius: 50%;
  left: 26px;
  top: 15px;
  height: 380px;
  z-index: 2;
}
/*翅膀*/
.wingLeft {
  width: 75px;
  height: 230px;
  background-color: black;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 70%;
  border-top-right-radius: 40%;
  -webkit-transform: rotate(-20deg);
  position: absolute;
  top: 300px;
  left: 560px;
}
.wingRight {
  width: 75px;
  height: 230px;
  background-color: black;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 70%;
  border-top-left-radius: 40%;
  -webkit-transform: rotate(20deg);
  position: absolute;
  top: 300px;
  left: 50px;
}
.footLeft {
  width: 225px;
  height: 90px;
  background-color: #ec9a27;
  position: absolute;
  top: 560px;
  left: 90px;
  border: 3px solid black;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
}
.footRight {
  width: 225px;
  height: 90px;
  background-color: #ec9a27;
  position: absolute;
  top: 560px;
  left: 365px;
  border: 3px solid black;
  border-top-right-radius: 30%;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 40%;
}
.lineleft {
  width: 100px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0);
  border: 15px solid black;
  border-radius: 50%;
  border-bottom-right-radius: 30%;
  border-right: none;
  border-bottom: none;
  border-top: none;
  transform: rotate(-10deg);
  position: absolute;
  left: 125px;
  top: 150px;
  z-index: 1000;
}
.lineright {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0);
  border: 15px solid black;
  border-radius: 50%;
  border-bottom-left-radius: 30%;
  border-left: none;
  border-bottom: none;
  border-top: none;
  transform: rotate(10deg);
  position: absolute;
  left: 340px;
  top: 165px;
  z-index: 1000;
}
.linebottom {
  width: 7px;
  height: 50px;
  background-color: black;
  border-bottom-left-radius: 100%;
  position: absolute;
  top: 400px;
  left: 260px;
  z-index: 9999;
}
</style>
</head>
<body>
  <div class="penguin">
    <!-- 頭部 -->
    <header>
      <div class="eyeleft">
        <div class="eyes"></div>
      </div>
      <div class="eyeright">
        <div class="eyess"></div>
        <div class="eyesss"></div>
      </div>
    </header>
    <div class="mouth">
      <div class="mouthTop"></div>
      <div class="mouthBottom"></div>
    </div>
    <!-- 圍巾 -->
    <div class="scarf">
 
    </div>
    <div class="lineleft"></div>
    <div class="lineright"></div>
    <div class="linebottom"></div>
    <div class="scarfs"></div>
    <!-- 翅膀 -->
    <div class="wingLeft"></div>
    <div class="wingRight"></div>
    <!-- 身體 -->
    <div class="content">
      <div class="white">
 
      </div>
    </div>
    <!-- 腳 -->
    <footer>
      <div class="footLeft"></div>
      <div class="footRight"></div>
    </footer>
  </div>
</body>
</html>

相關文章