CSS3皮卡丘效果程式碼

admin發表於2018-07-04
CSSS3
本章節分享一段程式碼例項，它利用css3實現了皮卡丘效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
}
#view {
  width: 500px;
  height: 500px;
  margin: 100px auto 0px auto;
  background:;
  position: relative;
}
/*頭*/
#head {
  width: 160px;
  height: 175px;
  margin: auto;
  background: #ffe100;
  position: absolute;
  top: 10%;
  left: 35%;
  border-top-left-radius: 45% 43%;
  border-top-right-radius: 45% 43%;
  border-bottom-left-radius: 50% 35%;
  border-bottom-right-radius: 50% 35%;
  border: 4px solid #000;
  border-bottom-color: #ffe100;
}
/*身體*/
#body {
  width: 170px;
  height: 185px;
  background: #ffe100;
  position: absolute;
  top: 38%;
  left: 34%;
  border-bottom-left-radius: 45% 43%;
  border-bottom-right-radius: 45% 43%;
  border-top-left-radius: 30% 90%;
  border-top-right-radius: 30% 90%;
  border: 4px solid #000;
}
/*左耳朵*/
.ear_left {
  width: 100px;
  height: 100px;
  background-color: #ffe100;
  border-radius: 100px 0px;
  border: 4px solid #000;
  position: absolute;
  left: 300px;
}
/*右耳朵*/
.ear_right {
  width: 100px;
  height: 100px;
  background-color: #ffe100;
  border-radius: 0px 100px;
  border: 4px solid #000;
  position: absolute;
  left: 100px;
}
/*右耳朵黑色陰影*/
.ear_shading_right {
  width: 38px;
  height: 77px;
  background-color: #000;
  border-radius: 14% 0% 100% 0%;
  position: absolute;
  left: 370px;
  top: 3px;
}
/*左耳朵黑色陰影*/
.ear_shading_left {
  width: 38px;
  height: 77px;
  background-color: #000;
  border-radius: 0% 14% 0% 100%;
  position: absolute;
  left: 100px;
  top: 3px;
}
/*左臉蛋*/
.face_left {
  width: 45px;
  height: 45px;
  background-color: #ff2200;
  border-radius: 50%;
  margin-top: 100px;
  float: left;
  overflow: hidden;
  border: 2px solid #000;
}
/*右臉蛋*/
.face_right {
  width: 45px;
  height: 45px;
  background-color: #ff2200;
  border-radius: 50%;
  margin-top: 100px;
  float: right;
  overflow: hidden;
  border: 2px solid #000;
}
/*右眼睛*/
.eye_right {
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 60px;
  overflow: hidden;
}
/*右眼白*/
.eye_shading_right {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 11px;
}
/*左眼睛*/
.eye_left {
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 110px;
  top: 60px;
  overflow: hidden;
}
/*左眼白*/
.eye_shading_left {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 5px;
}
/*鼻子*/
.nose {
  width: 15px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  left: 73px;
  top: 88px;
  position: absolute;
  overflow: hidden;
}
/*嘴巴右*/
.mouth_right {
  width: 35px;
  height: 30px;
  background: #ffe100;
  position: absolute;
  top: 67px;
  left: 72px;
  border-radius: 50%;
  border: 3px solid #ffe100;
  border-bottom-color: #000;
}
/*嘴巴左*/
.mouth_left {
  width: 35px;
  height: 30px;
  background: #ffe100;
  position: absolute;
  top: 67px;
  left: 47px;
  border-radius: 50%;
  border: 3px solid #ffe100;
  border-bottom-color: #000;
}
/*舌頭*/
.tongue {
  width: 23px;
  height: 3px;
  background: #ff2200;
  position: absolute;
  top: 102px;
  left: 66px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 3px solid #000;
  border-top-color: #ffe100;
  -webkit-animation: tongue 1s ease-in-out infinite;
  animation: tongue 1s ease-in-out infinite;
}
/*左胳膊*/
.arm_left {
  width: 50px;
  height: 65px;
  background: #ffe100;
  position: absolute;
  top: 50px;
  left: 20px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 4px solid #000;
  border-top-color: #ffe100;
  -webkit-transform: skew(16deg);
  transform: skew(16deg);
}
/*右胳膊*/
.arm_right {
  width: 50px;
  height: 65px;
  background: #ffe100;
  position: absolute;
  top: 50px;
  left: 95px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 4px solid #000;
  border-top-color: #ffe100;
  -webkit-transform: skew(-16deg);
  transform: skew(-16deg);
}
/*左腿*/
.leg_left {
  position: absolute;
  width: 47px;
  height: 19px;
  border: 4px solid #000;
  background: #ffe100;
  border-radius: 80% 20% 80% 10%;
  top: 356px;
  left: 164px;
}
/*右腿*/
.leg_right {
  position: absolute;
  width: 47px;
  height: 19px;
  border: 4px solid #000;
  background: #ffe100;
  border-radius: 20% 80% 10% 80%;
  top: 356px;
  left: 293px;
}
/*尾巴上*/
.tail1 {
  width: 127px;
  height: 70px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 100px;
  left: -8px;
}
/*尾巴中*/
.tail2 {
  width: 66px;
  height: 149px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 134px;
  left: 96px;
}
/*尾巴下*/
.tail3 {
  width: 42px;
  height: 87px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 235px;
  left: 140px;
}
/*尾巴陰影*/
.tail_shading {
  width: 29px;
  height: 183px;
  -webkit-transform: skew(16deg);
  transform: skew(16deg);
  background: #ffe100;
  position: absolute;
  top: 113px;
  left: 118px;
}
/*尾巴搖擺*/
.tail {
  -webkit-animation: tail 0.2s ease-in-out infinite;
  animation: tail 0.2s ease-in-out infinite;
}
/*吐舌頭*/
@-webkit-keyframes tongue {
  0% {
    height: 3px;
  }
  30% {
    width: 20px;
    height: 36px;
  }
  100% {
    height: 3px;
  }
}
/*吐舌頭*/
@keyframes tongue {
  0% {
    height: 3px;
  }
  30% {
    width: 20px;
    height: 36px;
  }
  100% {
    height: 3px;
  }
}
/*尾巴搖擺動畫*/
@-webkit-keyframes tail {
  0% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(0deg);
  }
  60% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(10deg);
  }
  100% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(0deg);
  }
}
/*尾巴搖擺動畫*/
@keyframes tail {
  0% {
    transform-origin: 250px 300px;
    transform: rotateZ(0deg);
  }
  60% {
    transform-origin: 250px 300px;
    transform: rotateZ(10deg);
  }
  100% {
    transform-origin: 250px 300px;
    transform: rotateZ(0deg);
  }
}
</style>
</head>
<body>
  <!--檢視框-->
  <div id="view">
    <!--皮卡丘-->
    <div id="pikachu">
      <!--尾巴-->
      <div class="tail">
        <div class="tail3"></div>
        <div class="tail2"></div>
        <div class="tail1"></div>
        <div class="tail_shading"></div>
      </div>
      <!--尾巴結束-->
      <!--耳朵-->
      <div class="ear">
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="ear_shading_left"></div>
        <div class="ear_shading_right"></div>
      </div>
      <!--耳朵結束-->
      <!--腿-->
      <div class="leg">
        <div class="leg_left"></div>
        <div class="leg_right"></div>
      </div>
      <!--腿結束-->
      <!--身體-->
      <div id="body">
        <div class="arm_left"></div>
        <div class="arm_right"></div>
      </div>
      <!--身體結束-->
      <!--頭-->
      <div id="head">
        <!--臉蛋-->
        <div class="face_left"></div>
        <div class="face_right"></div>
        <!--眼睛-->
        <div class="eye_left">
          <!--眼白-->
          <div class="eye_shading_left"></div>
        </div>
        <div class="eye_right">
          <!--眼白-->
          <div class="eye_shading_right"></div>
        </div>
        <!--眼睛結束-->
        <!--嘴巴-->
        <div class="mouth_left"></div>
        <div class="mouth_right"></div>
        <!--舌頭-->
        <div class="tongue"></div>
        <!--鼻子-->
      </div>
      <!--頭結束-->
    </div>
    <!--皮卡丘結束-->
 
  </div>
  <!--檢視框結束-->
</body>
</html>

上面的程式碼實現了效果，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.border-radius參閱CSS3 border-radius一章節。

（2）.transform參閱CSS3 transform一章節。

（3）.@keyframes參閱CSS3 @keyframes一章節。

相關文章