css3實現的多啦a夢效果程式碼例項

admin發表於2017-02-22

本章節分享一段程式碼例項，它利用css3實現了多啦a夢效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="Text/css">
html, body { 
  padding: 0px; 
  margin: 0px; 
} 
.boxDom { 
  width: 800px; 
  height: 600px;
  position: relative; 
  margin: 20px auto; 
} 
.header { 
  width: 300px; 
  height: 280px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  background: #0093dd; 
  position: relative; 
  margin: 20px auto; 
} 
.bgWrith { 
  background: #fff;
  width: 260px; 
  height: 240px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  margin: 0px auto; 
  bottom: 0px; 
} 
.eyesDom { 
  width: 150px; 
  height: 55px; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  margin: -20px auto; 
} 
.eyes { 
  width: 60px; 
  height: 55px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border: 1px solid #999; 
  background: #fff; 
  position: absolute; 
  z-index: 9999; 
} 
.eyeLeft { 
  left: 0px; 
} 
.eyeRight { 
  right: 0px; 
} 
.eyes span { 
  display: inline-block; 
  position: absolute; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
} 
.eyesOne { 
  width: 30px; 
  height: 28px; 
  background: #000; 
  right: 8px; 
  top: 20px; 
} 
.eyes1 { 
  width: 12px; 
  height: 12px; 
  background: #fff; 
  right: 4px; 
  top: 10px; 
} 
.eyesTwo { 
  width: 30px; 
  height: 28px; 
  background: #000; 
  left: 8px; 
  top: 20px; 
} 
.eyes2 { 
  width: 12px; 
  height: 12px; 
  background: #fff; 
  left: 4px; 
  top: 10px; 
} 
.nose { 
  width: 40px; 
  height: 30px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  border: 1px solid #999; 
  top: 30px; 
  margin: 0 auto; 
  background: #da251c; 
  z-index: 9999; 
} 
.linerLeft { 
  width: 106px; 
  height: 100px; 
  position: absolute; 
  top: 0px; 
  bottom: 0px; 
  margin: auto; 
  z-index: 99999; 
} 
.linerRight { 
  width: 106px; 
  height: 100px; 
  position: absolute; 
  top: 0px; 
  bottom: 0px; 
  right: 0px; 
  margin: auto; 
  z-index: 99999; 
  transform: rotateY(180deg); 
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg); 
  -ms-transform: rotateY(180deg); 
  -o-transform: rotateY(180deg); 
} 
.liner { 
  border-top: 1px solid #999; 
} 
.linerLeft .linerOne { 
  -webkit-transform: rotate(20deg);
   -moz-transform: rotate(20deg); 
   -o-transform: rotate(20deg); 
   -ms-transform: rotate(20deg); 
} 
.linerLeft .linerTwo { 
  -webkit-transform: translate(-10px,25px); 
  -moz-transform: translate(-10px,25px); 
  -ms-transform: translate(-10px,25px); 
  -o-transform: translate(-10px,25px); 
} 
.linerLeft .linerThree { 
  -webkit-transform: translateY(50px) rotate(-20deg); 
  -moz-transform: translateY(50px) rotate(-20deg); 
  -ms-transform: translateY(50px) rotate(-20deg); 
  -o-transform: translateY(50px) rotate(-20deg); 
} 
.linerRight .linerOne { 
  -webkit-transform: rotate(20deg); 
  -moz-transform: rotate(20deg); 
  -ms-transform: rotate(20deg); 
  -o-transform: rotate(20deg); 
} 
.linerRight .linerTwo { 
  -webkit-transform: translate(-10px,25px); 
  -moz-transform: translate(-10px,25px); 
  -ms-transform: translate(-10px,25px); 
  -o-transform: translate(-10px,25px); 
} 
.linerRight .linerThree { 
  -webkit-transform: translateY(50px) rotate(-20deg); 
  -moz-transform: translateY(50px) rotate(-20deg); 
  -ms-transform: translateY(50px) rotate(-20deg); 
  -o-transform: translateY(50px) rotate(-20deg);
}
.linerCenter { 
   width: 0px; 
   height: 64px; 
   border-left: 1px solid #999; 
   position: absolute; 
   left: 0px; 
   right: 0px; 
   top: 60px; 
   margin: 0 auto; 
   z-index: 99999; 
} 
.mouth { 
  width: 200px; 
  height: 200px; 
  position: absolute; 
  left: 0px; 
  right: 0px;
  margin: 0 auto; 
} 
.mouth > .topLiner { 
  width: 200px; 
  height: 50px; 
  position: absolute; 
  bottom: 0px; 
  top: 0px; 
  margin: auto; 
  background: #fff; 
  border-bottom: 1px solid #999; 
  border-left: 1px solid #999; 
  border-right: 1px solid #999; 
  border-top: 1px solid transparent; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  z-index: 9999; 
} 
.circleMouth { 
  width: 190px; 
  height: 210px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  margin: 10px auto; 
  background: #da251c; 
  border: 1px solid #999; 
  overflow: hidden; 
} 
.top { 
  z-index: 999; 
  width: 210px; 
  height: 115px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  left: -5px; 
  right: 0px; 
  margin: 10px auto; 
  background: #fff; 
} 
.tongue { 
  width: 140px; 
  height: 80px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  background: #e57715; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  bottom: -30px; 
  margin: 0 auto; 
  border-top: 1px solid #000; 
} 
.content { 
  width: 300px; 
  height: 160px; 
  z-index: 99999; 
  margin: -140px auto; 
} 
.content .bellLiner { 
  width: 200px; 
  height: 135px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  background: #da251c; 
  margin: 0 auto;
} 
.bell { 
  width: 40px; 
  height: 40px; 
  border: 1px solid #666; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  background: #fef401; 
  margin: -16px auto; 
} 
.bellLinerOne { 
  width: 46px; 
  height: 6px; 
  border: 1px solid #333; 
  background: #fef401; 
  border-radius: 20px; 
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  -moz-border-radius: 20px; 
  margin-top: 12px; 
  margin-left: -4px; 
} 
.bellCircle { 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border: 1px solid #333; 
  background: #666; 
  margin: 2px auto; 
} 
.bellLiner1 { 
  width: 0px; 
  height: 6px; 
  border: 1px solid #666; 
  margin: -4px auto; 
} 
.footer { 
  width: 230px; 
  height: 260px; 
  background: #0093dd; 
  border-radius: 50%; 
  -webkit-border-radius: 51%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  margin: 10px auto; 
  position: relative; 
  z-index: -1; 
} 
.footer > .handDom { 
  width: 300px; 
  height: 100px; 
} 
.hand1, .hand2 { 
  width: 250px; 
  height: 60px; 
  position: absolute; 
  top: 50px; 
} 
.hand1 { 
  left: -90px; 
  transform: rotate(20deg); 
  -moz-transform: rotate(20deg); 
  -ms-transform: rotate(20deg); 
  -o-transform: rotate(20deg); 
  -webkit-transform: rotate(20deg); 
} 
.hand2 { 
  right: -90px; 
  transform: rotate(-20deg); 
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg); 
  -o-transform: rotate(-20deg); 
} 
.hand { 
  background: #0093dd; 
  width: 200px; 
  height: 60px; 
  position: absolute; 
  top: 0px; 
  bottom: 0px; 
  margin: auto; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
} 
.handRight { 
  right: 0px; 
} 
.handCircle { 
  width: 60px;
  height: 60px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  border: 1px solid #666; 
  background: #fff;
} 
.handCircleRight { 
  right: 0px; 
} 
.colpus { 
  border: 1px solid #999; 
  width: 190px; 
  height: 160px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  margin: -30px auto; 
  background: #fff; 
} 
.footDom { 
  position: absolute; 
  width: 180px; 
  height: 140px; 
  left: 0px; 
  right: 0px; 
  margin: 80px auto; 
} 
.foot1, .foot2 { 
  width: 100px; 
  height: 130px; 
  z-index: -1; 
  position: absolute; 
} 
.foot2 { 
  right: 0px; 
} 
.foot { 
  width: 85px; 
  height: 130px; 
  border-radius: 60px; 
  -webkit-border-radius: 60px; 
  -moz-border-radius: 60px; 
  position: absolute; 
  background: #0093dd; 
  top: -20px; 
} 
.footRight { 
  right: 0px; 
} 
.footCircle { 
  width: 80px; 
  height: 80px; 
  border-radius: 50%; 
  border: 1px solid #666; 
  background: #fff;
  bottom: 0px; 
  position: absolute; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  -moz-border-radius: 50%; 
  z-index: -1; 
} 
.bgBug { 
  width: 120px; 
  height: 85px; 
  background: #fff; 
  border-left: 1px solid transparent; 
  border-right: 1px solid transparent; 
  border-top: 1px solid transparent; 
  border-bottom: 1px solid #666; 
  position: absolute; 
  left: 0px; 
  right: 0px; 
  margin: 0 auto; 
  z-index: 9999; 
} 
.bug { 
  width: 120px; 
  height: 120px; 
  margin: 20px auto; 
  border: 1px solid #666; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
} 
.footCircleRight { 
  right: 0px; 
}
</style>
</head>
<body>
  <div class="boxDom">
    <div class="header">
      <div class="bgWrith">
        <div class="eyesDom">
          <div class="eyes eyeLeft">
            <span class="eyesOne">
              <span class="eyes1"></span>
            </span>
          </div>
          <div class="eyes eyeRight">
            <span class="eyesTwo">
              <span class="eyes2"></span>
            </span>
          </div>
        </div>
        <div class="nose"></div>
        <div class="linerLeft">
          <div class="liner linerOne"></div>
          <div class="liner linerTwo"></div>
          <div class="liner linerThree"></div>
        </div>
        <div class="linerRight">
          <div class="liner linerOne"></div>
          <div class="liner linerTwo"></div>
          <div class="liner linerThree"></div>
        </div>
        <div class="linerCenter"></div>
        <div class="mouth">
          <div class="top"></div>
          <div class="topLiner"></div>
          <div class="circleMouth">
            <div class="tongue">
              <div class="tongues tongueLeft"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="bellLiner"></div>
      <div class="bell">
        <div class="bellLinerOne"></div>
        <div class="bellCircle"></div>
        <div class="bellLiner1"></div>
      </div>
    </div>
    <div class="footer">
      <div class="handDom">
        <div class="hand1">
          <div class="hand handLeft"></div>
          <div class="handCircle"></div>
        </div>
        <div class="hand2">
          <div class="hand handRight"></div>
          <div class="handCircle handCircleRight">
          </div>
        </div>
      </div>
      <div class="colpus">
        <div class="bgBug"></div>
        <div class="bug"></div>
      </div>
      <div class="footDom">
        <div class="foot1">
          <div class="foot footLeft"></div>
          <div class="footCircle"></div>
        </div>
        <div class="foot2">
          <div class="foot footRight"></div>
          <div class="footCircle footCircleRight"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

css3實現的折角效果程式碼例項
2017-03-03
CSSS3
css3實現的打折卡效果程式碼例項
2017-03-06
CSSS3
CSS3 實現的鐘表效果程式碼例項
2017-05-08
CSSS3
css3實現的毛玻璃效果程式碼例項
2017-02-28
CSSS3
css3實現的打字機效果程式碼例項
2017-02-21
CSSS3
css3實現的圓角效果程式碼例項
2017-02-19
CSSS3
css3實現的氣泡效果程式碼例項
2017-02-19
CSSS3
css3實現的文字下滑出現效果程式碼例項
2017-03-13
CSSS3
CSS3實現的美觀多級下拉選單效果程式碼例項
2017-02-17
CSSS3
css3實現的斑馬紋效果程式碼例項
2017-03-24
CSSS3
CSS3實現的div圓角效果程式碼例項
2017-02-17
CSSS3
CSS3實現的div陰影效果程式碼例項
2017-02-17
CSSS3
css3實現的旋轉魔方效果程式碼例項
2017-02-26
CSSS3
css3實現的動態大白效果程式碼例項
2017-02-20
CSSS3
css3實現的文字陰影效果程式碼例項
2017-02-20
CSSS3
jQuery和css3實現的開關效果程式碼例項
2017-04-18
jQueryCSSS3
css3實現的邊框陰影效果程式碼例項
2017-02-26
CSSS3
css3實現的動物頭像效果程式碼例項
2017-02-22
CSSS3
css3實現的皮球上下彈動效果程式碼例項
2017-02-23
CSSS3
css3實現button按鈕美化效果程式碼例項
2017-04-02
CSSS3
css3實現網狀球體效果程式碼例項
2017-02-20
CSSS3
css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項
2017-02-17
CSSS3
js模擬實現多型效果程式碼例項
2017-03-27
JS多型
css3實現旋轉的太極圖效果程式碼例項
2017-02-22
CSSS3
css3實現div邊框陰影效果程式碼例項
2017-03-06
CSSS3
css3星空效果程式碼例項
2017-04-14
CSSS3
css3水滴效果程式碼例項
2018-06-04
CSSS3
CSS3 名片效果程式碼例項
2017-02-20
CSSS3
css3實現的書本立體翻頁效果程式碼例項
2017-03-11
CSSS3
css3和js實現的圓形鐘錶效果程式碼例項
2017-04-15
CSSS3JS
css3實現的div上下左右翻轉效果程式碼例項
2017-02-28
CSSS3
css3實現的立體導航選單效果程式碼例項
2017-02-20
CSSS3
CSS3文字漸現效果程式碼例項
2017-02-21
CSSS3
jquery實現的選項卡效果例項程式碼
2017-02-20
jQuery
CSS3小黃人效果程式碼例項
2018-07-08
CSSS3
css3晃動效果程式碼例項
2018-07-09
CSSS3
CSS3心形效果程式碼例項
2018-07-09
CSSS3
CSS3旋轉效果程式碼例項
2018-05-21
CSSS3

css3實現的多啦a夢效果程式碼例項

相關文章