純CSS3繪制的逼真，呆萌扎即，超酷的CSS3動(dòng)畫

純CSS3人物行走動(dòng)畫逼真炫酷CSS3動(dòng)畫

CSS3實(shí)在是太強(qiáng)大了吞获，今天分享的CSS3動(dòng)畫非常神奇，它可以模擬人物行走谚鄙，而且人物行走動(dòng)畫非常逼真衫哥。人物行走時(shí)的跨步動(dòng)畫時(shí)多張圖片重疊實(shí)現(xiàn)的。有了這個(gè)CSS3人物行走動(dòng)畫的基礎(chǔ)襟锐，我們就可以更方便的在瀏覽器上實(shí)現(xiàn)HTML5游戲撤逢。

行走


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3人物行走在線動(dòng)畫在線演示</title>

</head>

<body>

<link rel="stylesheet"  type="text/css">     <link rel="stylesheet"  type="text/css">     <link rel="stylesheet"  type="text/css"> 
<style type="text/css">
.ke-content{backgroud:none}
</style>

<div id="canvas">
        <div class="sky">
            <div class="cloud-1"></div>
            <div class="cloud-2"></div>
            <div class="cloud-3"></div>
            <div class="cloud-4"></div>
            <div class="cloud-5"></div>
            <div class="cloud-6"></div>
            <div class="cloud-7"></div>
            <div class="cloud-8"></div>
        </div>
        <div class="horizon"></div>
        <div class="ground">
            <div class="sign-best"></div>
            <div class="sign-no-js"></div>
            <div class="sign-lots-of-divs"></div>
            <div class="sign-all-css"></div>
        </div>
        <!-- skeleton and shadow -->
        <div class="shadow"></div>
        <div class="me">

            <div class="torso">
                <div class="left leg">
                    <div class="left thigh">
                        <div class="left shin">
                            <div class="left foot">
                                <div class="left toes"></div>
                            </div>
                        </div>
                    </div>
                </div>
 <!-- left leg -->

                <div class="right leg">
                    <div class="right thigh">
                        <div class="right shin">
                            <div class="right foot">
                                <div class="right toes"></div>
                            </div>
                        </div>
                    </div>
                </div>
 <!-- right leg -->

                <div class="left arm">
                    <div class="left bicep">
                        <div class="left forearm"></div>
                    </div>
                </div>
 <!-- left arm -->

                <div class="right arm">
                    <div class="right bicep">
                        <div class="right forearm"></div>
                    </div>
                </div>
 <!-- right arm -->

            </div>
 <!-- torso -->
        </div>
 <!-- me -->

        <div class="overlay"></div>
    </div>
    <div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
    <div style="width:640px;margin:10px auto 20px auto; padding:0 0 0 380px;overflow:hidden">
<!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
        <a class="bds_tsina"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_qzone"></a>
        <a class="bds_douban"></a>
        <a class="bds_xg"></a>
        <span class="bds_more">更多</span>
        <a class="shareCount"></a>
    </div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
();
</script>
<!-- Baidu Button END -->
</div>


<div style="display: none">
    <script language="javascript" type="text/javascript" src="http://js.users.#/4473358.js"></script>
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "#/h.js%3Fadd0db9dee36c7a9b64141788e26de72' type='text/javascript'%3E%3C/script%3E"));

</script>

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21395429-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

</script>
    </div>
</body>
</html>

純CSS3繪制的小貓笑臉動(dòng)畫超呆萌

CSS3的強(qiáng)大之處在于你不需要一行JS代碼即可繪制任何圖形，甚至是實(shí)現(xiàn)一些簡單的動(dòng)畫特效。今天要分享的一款CSS3小貓笑臉動(dòng)畫就是一個(gè)相當(dāng)?shù)湫偷陌咐萌佟Ｊ纠胁粌H用CSS3繪制了小貓的臉部初狰，非常生動(dòng)，而且小貓的眼睛還耳朵還會(huì)萌動(dòng)互例，十分可愛奢入。

小貓

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>純CSS3繪制的小貓笑臉動(dòng)畫DEMO演示</title>

<link type="text/css" href="maolaoshifu.css" rel="stylesheet"/>

</head>
<body>
<div class="mao_box">
    <div class="mao">
        <div class="mao_head">
            <div class="huawen">
                <div><!--頭部花紋——左邊橙色--></div>
            </div>
        </div>
        <div class="erduo">
            <div></div>
            <div></div>
        </div>
        <div class="yanjing">
            <div>
                <div class="yanquan">
                    <div></div>
                </div>
                <div class="yanquan_hedding">

                </div>
                <div class="hong"></div>
            </div>
            <div class="yan_right">
                <div class="yanquan">
                    <div></div>
                </div>
                <div class="yanquan_hedding">

                </div>
                <div class="hong"></div>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="face_huawen">
            <div class="face_huawen_huawen huawen_left">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>

            </div>
            <div class="face_huawen_huawen huawen_right">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>

            </div>
            <div style="clear:both"></div>
        </div>
        <div class="bizi">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="zuiba_box">
            <div class="zuiba">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>
 
<br><br><br><br><br>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>

maolaoshifu.css

body {
    margin: 0px;
    background: #F6F7A7;
}

.mao_box {
    position: relative;
    top: 50px;
    /*width:424px;*/
}

.mao {
    margin: 0 auto;
    width: 400px;
}

.mao_head {
    margin: 0 auto;
    width: 400px;
    height: 340px;
    background: #F6F7F2;
    position: relative;
    border-radius: 50% 50% 35% 35%;
    border: solid 2px #2e2e2e;
    overflow: hidden;
    z-index: 10;
}

.huawen {
    position: absolute;
    height: 160px;
    width: 180px;
    background: #8D8D8D;
    left: 110px;
    border-radius: 0% 0% 50% 50%;
    overflow: hidden;
}

    .huawen > div:first-child {
        height: 160px;
        width: 90px;
        background: #F0AC6B;
    }

/*耳朵*/
.erduo {
    width: 374px;
    height: 120px;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -187px;
    border-radius: 0% 0% 0% 0%;
}
    /*左耳*/
    .erduo > div:first-child {
        height: 200px;
        width: 160px;
        border: 2px solid #2e2e2e;
        background: #f3f3f3;
        transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
        border-radius: 4% 80% 0% 50%;
        position: absolute;
        left: -20px;
        top: 0px;
        transition: transform 1s,left 1s;
    }
    /*右耳*/
    .erduo > div:last-child {
        height: 180px;
        width: 160px;
        border: 2px solid #2e2e2e;
        background: #f3f3f3;
        transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        border-radius: 80% 4% 50% 0%;
        position: absolute;
        right: -20px;
        top: 0px;
          transition: transform 1s,right 1s;
    }
/*鼠標(biāo)浮動(dòng)耳朵樣式*/
/*左耳*/
.mao:hover .erduo > div:first-child {
    left: -10px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    border-radius: 4% 80% 0% 60%;
    /*transition: all 1s;*/
     /*transition: transform 1s,left 1s;*/
}

.mao:hover .erduo > div:last-child {
    right: -10px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    border-radius: 80% 4% 60% 0%;
    /*transition: transform 1s,right 1s;*/
}
/*眼睛*/
.yanjing {
    height: 60px;
    width: 300px;
    position: absolute;
    top: 200px;
    z-index: 20;
    left: 50%;
    margin-left: -150px;
    overflow: hidden;
}
/*左眼*/
.yanquan {
    height: 100px;
    width: 100px;
    border: 2px solid #2e2e2e;
    border-radius: 50% 50% 50% 50%;
    overflow: hidden;
    position: absolute;
}
    /*眼珠子 左*/
    .yanquan > div:first-child {
        height: 100px;
        width: 30px;
        background-color: #2e2e2e;
        margin-left: 35px;
        transition:all 1s;
          /*transition-property: width;
       transition-duration: 2s;*/
    }
.mao:hover .yanquan > div:first-child {
  width:40px;
    margin-left: 30px;
    /*transition:all 1s;*/
  
}
.yanquan_hedding {
    height: 100px;
    width: 180px;
    border-top: 2px solid #2e2e2e;
    border-radius: 50% 50% 50% 50%;
    background: #F6F7F2;
    margin-top: 50px;
    margin-left: -40px;
    position: absolute;
     transition: margin-top 1s;
}

.hong {
    position: absolute;
    height: 28px;
    width: 70px;
    background: red;
    top: 34px;
    /*top: 64px;*/
    left: 18px;
    border-radius: 50% 50% 50% 50%;
    background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
    background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
    background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
    opacity: 0.0;
    /*transition: opacity 0.5s ease-in 0.2s;*/
}

.yan_right {
    left: 196px;
    top: 0px;
    background: red;
    position: absolute;
}
/*眼睛浮動(dòng)屬性*/
.mao:hover .yanquan_hedding {
    margin-top: 30px;
    /*transition: margin-top 1s;*/
}

.mao:hover .hong {
    /*top: 34px;*/
    opacity: 0.8;
    transition: opacity 0.5s ease-in 0.2s;
}

/*臉部花紋*/
/*左邊花紋*/
.face_huawen {
    height: 80px;
    width: 380px;
    position: absolute;
    top: 190px;
    z-index: 20;
    left: 50%;
    margin-left: -190px;
}

.face_huawen_huawen > div:first-child {
    width: 30px;
    height: 10px;
    border-top: 6px #E53941 solid;
    border-radius: 30% 80% 20% 50%;
    transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    margin-left: 20px;
}

.face_huawen_huawen > div:nth-child(2) {
    width: 20px;
    height: 6px;
    background-color: #E53941;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    margin-left: 20px;
}

.face_huawen_huawen > div:nth-child(3) {
    /*margin-top:10px;*/
    width: 32px;
    height: 10px;
    border-bottom: 4px #E53941 solid;
    border-radius: 30% 0% 90% 30%;
    transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    margin-left: 8px;
}

.face_huawen_huawen > div:nth-child(4) {
    margin-top: 20px;
    width: 26px;
    height: 20px;
    border-bottom: 4px #E53941 solid;
    border-radius: 30% 0% 90% 30%;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    margin-left: 28px;
}

.face_huawen_huawen > div:last-child {
    width: 22px;
    height: 10px;
    border-bottom: 3px #E53941 solid;
    border-radius: 0% 0% 50% 50%;
    transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -8px;
}
/*右邊花紋*/
.huawen_right {
    float: right;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
    -moz-transform: rotateY(180deg); /* Firefox */
    margin-top: -85px;
}
/*鼻子*/
.bizi {
    width: 30px;
    height: 36px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: 260px;
    z-index: 30;
}

    .bizi > div:first-child {
        width: 30px;
        height: 10px;
        border-bottom: 8px solid #2e2e2e;
        border-radius: 0% 0% 50% 50%;
        margin-top: -10px;
    }

.zuiba_box {
    width: 200px;
    height: 36px;
    position: absolute;
    overflow: hidden;
    left: 50%;
    margin-left: -100px;
    top: 260px;
    z-index: 30;
}

.zuiba {
    margin-left: 85px;
    margin-top: 6px;
}

    .zuiba > div:first-child {
        width: 4px;
        height: 8px;
        background: #2e2e2e;
        margin-left: 13px;
    }
    /*右半邊嘴巴*/
    .zuiba > div:nth-child(2) {
        width: 50px;
        height: 40px;
        border-bottom: 4px solid #2e2e2e;
        border-left: 4px solid #2e2e2e;
        border-radius:40% 0% 20% 50%;
        margin-left: 13px;
        margin-top: -26px;
        position:absolute;
            transition:  border-radius  1s;
    }
    /*左半邊嘴巴*/
    .zuiba > div:nth-child(3) {
        width: 50px;
        height: 40px;
        border-bottom: 4px solid #2e2e2e;
        border-right: 4px solid #2e2e2e;
        border-radius:0% 40% 50% 20%;
        margin-left: -38px;
        margin-top: -26px;
        position:absolute;
            transition:  border-radius  1s;
       
    }

.mao:hover .zuiba > div:nth-child(2) {
    border-radius: 50% 50% 50% 50%;
          width: 40px;
           /*transition:  border-radius  1s ;*/
}
.mao:hover .zuiba > div:nth-child(3) {
   
         width: 40px;
          margin-left: -30px;
          border-radius: 50% 50% 50% 50%;
          /*transition:  border-radius  1s;*/
}
.ceshi {
    width: 26px;
    height: 26px;
    -webkit-border-radius: 50% 50% 50% 0;
    -moz-border-radius: 50% 50% 50% 0;
    -o-border-radius: 50% 50% 50% 0;
    border-radius: 50% 50% 50% 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 1px 4px 7px;
    border: 2px solid;
}

純CSS3繪制可愛小男孩動(dòng)畫超酷面部表情

今天我們又要來分享一款純CSS3繪制的可愛小男孩動(dòng)畫，除了繪制的小男孩逼真可愛外媳叨，其面部表情也十分酷腥光。整個(gè)動(dòng)畫是利用純CSS3實(shí)現(xiàn)，沒有用圖片和JS糊秆，不知道你們的瀏覽器中效果怎么樣武福。

面部表情

index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>純CSS3繪制可愛小男孩動(dòng)畫在線演示</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
  <section class="butters">
  <div class="hair"></div> 
  <div class="head">
          <div class="eyebrow"></div>
          <div class="eye">
              <div class="iris"></div>
              <div class="iris-up"></div>
          </div>
          <div class="closed_eye">
            <div class="closed_eyelid"></div>
          </div> 
          <div class="mouth"></div>  
          <div class="opened_mouth"></div>       
  </div>
  <div class="body">
    <div class="armpits"></div>
    <div class="ziper"></div>  
    <div class="arm">
      <div class="hand">
        <div class="thumb"></div>
      </div>
    </div>
  </div>
  <div class="leg">
    <div class="feet"></div>  
  </div> 
</section>

</body>

</html>

style.css

.butters{
    margin-left: 200px;
    margin-top: 50px;
}

.butters .hair{
   margin-left: -135px;
   margin-top: -10px;
   position: absolute;
   display: block;
   color: #f6f92c;
   width: 350px;
   height: 20px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid #f6f92c;
   border-left:   100px solid transparent;
   -webkit-transform: rotate(0deg);
   -moz-transform:    rotate(0deg);
   -ms-transform:     rotate(0deg);
   -o-transform:      rotate(0deg);
   
   -webkit-transform: scale(0.4);
   -moz-transform:     scale(0.4);
   -ms-transform:      scale(0.4);
   -o-transform:       scale(0.4);   


}
.butters .hair:before {
   border-bottom: 50px solid #f6f92c;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 10px;
   width: 350px;
   top: 30px;
   left: -40px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
.butters .hair:after {
   position: absolute;
   display: block;
   color: #f6f92c;
   top: 0px;
   left: -40px;
   width: 300px;
   height: 20px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #f6f92c;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(30deg);
   -moz-transform:    rotate(30deg);
   -ms-transform:     rotate(30deg);
   -o-transform:      rotate(30deg);
   content: '';
}
.butters .head{
    position:absolute;
    width:250px;
    height:250px;
    background:#ffedcb;
    z-index:-1;
    margin-left: 20px;
    margin-top: 20px;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%; 
    -o-border-radius:100%;  
    border-radius:100%; 
}

.butters .eyebrow{
    position: absolute;
    margin-left: 65px;
    margin-top: 85px;
    width: 30px;
    height: 3px;
    background:#000;
    z-index: 4;
    
    -webkit-transform:rotate(-25deg);
    -moz-transform:rotate(-25deg);
    -ms-transform:rotate(-25deg);
    -o-transform:rotate(-25deg);    
    transform:rotate(-25deg);
    
    -webkit-animation: eyebrow_raise 8s infinite step-start 0s;
    -moz-animation: eyebrow_raise 8s infinite step-start 0s;
    -o-animation: eyebrow_raise 8s infinite step-start 0s;
    -ms-animation: eyebrow_raise 8s infinite step-start 0s;
    animation: eyebrow_raise 8s infinite step-start 0s;
}

@-webkit-keyframes eyebrow_raise{
    0%{ margin-top: 85px; margin-left: 65px;}
    20%{ margin-top: 80px; margin-left: 80px;}
    8%{ margin-top: 85px; margin-left: 65px;}

}   
.butters .eyebrow:after{
    content:"";
    position: absolute;
    margin-left: 75px;
    margin-top: 35px;
    width: 30px;
    height: 3px;
    background:#000;
    z-index: 4;
    
    -webkit-transform:rotate(50deg);
    -moz-transform:rotate(50deg);
    -ms-transform:rotate(50deg);
    -o-transform:rotate(50deg); 
    transform:rotate(50deg);
    
    -webkit-animation: eyebrow_raise_after 8s infinite step-start 0s;
    -moz-animation: eyebrow_raise_after 8s infinite step-start 0s;
    -o-animation: eyebrow_raise_after 8s infinite step-start 0s;
    -ms-animation: eyebrow_raise_after 8s infinite step-start 0s;
    animation: eyebrow_raise_after 8s infinite step-start 0s;
    
}

@-webkit-keyframes eyebrow_raise_after{
    0%{ margin-top: 35px; margin-left: 75px;}
    20%{ margin-top: 30px; margin-left: 55px;}
    8%{ margin-top: 35px; margin-left: 75px;}

}

.butters .eye{
    position:absolute;
    top:90px;
    left:60px;
    width:60px;
    height:80px;
    background-color:#FFF;
    z-index:3;

    -webkit-border-bottom-right-radius:5px 5px; 
    -moz-border-bottom-right-radius:5px 5px;    
    -ms-border-bottom-right-radius:5px 5px; 
    -o-border-bottom-right-radius:5px 5px;          
    border-bottom-right-radius:5px 5px;     
    
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;         
    -o-border-radius:100%;  
    border-radius:100%;
            
    -webkit-transform:rotate(25deg);
    -moz-transform:rotate(25deg);
    -ms-transform:rotate(25deg);
    -o-transform:rotate(25deg); 
    transform:rotate(25deg);        
}
.butters .eye:after{
    content:"";
    position:absolute;
    display:block;
    top: -25px;
    right:-62px;
    width:60px;
    height:80px;
    
    background-color:#FFF;

    -webkit-border-radius:100%;
    -moz-border-radius:100%;        
    -ms-border-radius:100%;
    -o-border-radius:100%;
    border-radius:100%;
                
    -webkit-transform:rotate(-50deg);
    -moz-transform:rotate(-50deg);
    -ms-transform:rotate(-50deg);   
    -o-transform:rotate(-50deg);    
    transform:rotate(-50deg);       
}
.butters .iris{
    position:absolute;
    margin-top: 30px;
    right:10px;
    width:7px;
    height:7px;
    background:#000;
    
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;                  
    border-radius:100%; 
    
    -webkit-animation: iris_down 6s infinite step-start 0s;
    -moz-animation: iris_down 6s infinite step-start 0s;
    -o-animation: iris_down 6s infinite step-start 0s;
    -ms-animation: iris_down 6s infinite step-start 0s;
    animation: iris_down 6s infinite step-start 0s;
    
}
.butters .iris:after{
    content:"";
    position:absolute;
    margin-top: -10px;
    left:25px;
    width:7px;
    height:7px;
    background:#000;
    z-index:1;
    
    -webkit-border-radius:100%;
    -moz-border-radius:100%;            
    -ms-border-radius:100%;
    -o-border-radius:100%;
    border-radius:100%;         
}

@-webkit-keyframes iris_down{
    30%{ margin-top: 5px; }
    30%{ margin-top: 35px; }
    30%{ margin-top: 35px; }

}   

.butters .closed_eye{
    position:absolute;
    top:90px;
    left:60px;
    width:60px;
    height:80px;
    background-color:#ffedcb;
    border:1px solid #eed6a8;
    z-index:3;
    opacity:0;
    
    -webkit-border-bottom-right-radius:5px 5px; 
    -moz-border-bottom-right-radius:5px 5px;    
    -ms-border-bottom-right-radius:5px 5px; 
    -o-border-bottom-right-radius:5px 5px;          
    border-bottom-right-radius:5px 5px;     
    
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -ms-border-radius:100%;         
    -o-border-radius:100%;  
    border-radius:100%;
            
    -webkit-transform:rotate(25deg);
    -moz-transform:rotate(25deg);
    -ms-transform:rotate(25deg);
    -o-transform:rotate(25deg); 
    transform:rotate(25deg);        

    -webkit-animation: close_eyes 3s infinite step-start 0s;
    -moz-animation: close_eyes 3s infinite step-start 0s;
    -o-animation: close_eyes 3s infinite step-start 0s;
    -ms-animation: close_eyes 3s infinite step-start 0s;
    animation: close_eyes 3s infinite step-start 0s;
}
@-webkit-keyframes close_eyes{
    0%{ opacity: 0; }
    5%{ opacity: 1; }
    8%{ opacity: 0; }

}   
.butters .closed_eye:after{
    content:"";
    position:absolute;
    display:block;
    top:-25px;
    right:-62px;
    width:60px;
    height:80px;
    background-color:#ffedcb;
    border:1px solid #eed6a8;

    -webkit-border-radius:100%;
    -moz-border-radius:100%;        
    -ms-border-radius:100%;
    -o-border-radius:100%;
    border-radius:100%;
                
    -webkit-transform:rotate(-50deg);
    -moz-transform:rotate(-50deg);
    -ms-transform:rotate(-50deg);   
    -o-transform:rotate(-50deg);    
    transform:rotate(-50deg);   
    
    -webkit-animation: close_eyes 3s infinite step-start 0s;
    -moz-animation: close_eyes 3s infinite step-start 0s;
    -o-animation: close_eyes 3s infinite step-start 0s;
    -ms-animation: close_eyes 3s infinite step-start 0s;
    animation: close_eyes 3s infinite step-start 0s;
        
}
.butters .closed_eyelid{
    position:absolute;
    top:30px;
    left:0px;
    border-top:1px solid #eed6a8;
    width:60px;
    height:50px;
    border-radius:100%; 
    
}
.butters .closed_eyelid:after{
    content:"";
    position:absolute;
    top:-35px;
    left:70px;
    border-top:1px solid #eed6a8;
    width:60px;
    height:50px;
    border-radius:100%;
    z-index:3;
    
    -webkit-transform:rotate(-60deg);
    -moz-transform:rotate(-60deg);
    -ms-transform:rotate(-60deg);   
    -o-transform:rotate(-60deg);    
    transform:rotate(-60deg);
}

 
.butters .mouth{
            margin-top: 200px;
            position:relative;
            width:30px;
            height:25px;
            border-top:1px solid #000;
            border-left:1px solid #000;
            border-top-left-radius: 100%;
            margin-left:110px;
            -webkit-transform:rotate(40deg);
            -moz-transform:rotate(40deg);
            -ms-transform:rotate(40deg);    
            -o-transform:rotate(40deg); 
            transform:rotate(40deg);
         
         -webkit-animation: closes_mouth 8s infinite step-start 0s;
         -moz-animation: closes_mouth 8s infinite step-start 0s;
         -o-animation: closes_mouth 8s infinite step-start 0s;
         -ms-animation: closes_mouth 8s infinite step-start 0s;
         animation: closes_mouth 8s infinite step-start 0s;
            
  }
    
.butters .opened_mouth{
            position:relative;
            margin-left: 100px;
            margin-top: -20px;
            width:40px;
            height:10px;
            border-radius: 100%;
            background-color: #000;
            z-index: 4;
            opacity: 0 !important;
            
            -webkit-transform:rotate(15deg);
            -moz-transform:rotate(15deg);
            -ms-transform:rotate(15deg);    
            -o-transform:rotate(15deg); 
            transform:rotate(15deg);
            
    -webkit-animation: open_mouth 8s infinite step-start 0s;
    -moz-animation: open_mouth 8s infinite step-start 0s;
    -o-animation: open_mouth 8s infinite step-start 0s;
    -ms-animation: open_mouth 8s infinite step-start 0s;
    animation: open_mouth 8s infinite step-start 0s;
  }
  @-webkit-keyframes open_mouth{
    0%{ opacity: 0; }
    20%{ opacity: 1; }
    8%{ opacity: 0; }
  
  }
  @-webkit-keyframes closes_mouth{
    0%{ opacity: 1; }
    20%{ opacity: 0; }
    8%{ opacity: 1; }
  
  }
.butters .body{
    position:relative;
    top:210px;
    left:65px;
    width:160px;
    height:200px;
    background:#64d0b6;
    border:solid #64d0b6;
    border-width:0 3px 0 0;
    z-index:-2;
    
    -webkit-border-top-right-radius:20px 120px; 
    -moz-border-top-right-radius:20px 120px;
    -ms-border-top-right-radius:20px 120px;
    -o-border-top-right-radius:20px 120px;      
    border-top-right-radius:20px 120px; 
    
    -webkit-border-bottom-right-radius:20px 120px;  
    -moz-border-bottom-right-radius:20px 120px; 
    -ms-border-bottom-right-radius:20px 120px;  
    -o-border-bottom-right-radius:20px 120px;               
    border-bottom-right-radius:20px 120px;  
    
    -webkit-transform:rotate(90deg);    
    -moz-transform:rotate(90deg);   
    -ms-transform:rotate(90deg);    
    -o-transform:rotate(90deg);         
    transform:rotate(90deg);    
}

.butters .armpits{
    position: absolute;
    width:70px; 
    height:190px;
    margin-top: 5px; 
    background: #64d0b6;
    z-index: 1;
}
.butters .ziper{
    position:absolute;
    top:100px;
    left:50px;
    width:110px;
    height:2px;
    background:#000;
    z-index:10;
}
.butters .arm{
    position:relative;
    top:135px;
    left:40px;
    width:50px;
    height:150px;
    background: #64d0b6;
    border:solid #000;
    border-width:0 0 0 2px;
    
    -webkit-border-top-right-radius:40px 120px;
    -moz-border-top-right-radius:40px 120px;
    -ms-border-top-right-radius:40px 120px;
    -o-border-top-right-radius:40px 120px;      
    border-top-right-radius:40px 120px;
        
    -moz-border-bottom-right-radius:40px 120px;         
    -webkit-border-bottom-right-radius:40px 120px;  
    -ms-border-bottom-right-radius:40px 120px;  
    -o-border-bottom-right-radius:40px 120px;   
    border-bottom-right-radius:40px 120px;              

    -webkit-transform:rotate(110deg);
    -moz-transform:rotate(110deg);
    -ms-transform:rotate(110deg);
    -o-transform:rotate(110deg);
    transform:rotate(110deg);           
}
.butters .arm:after{
    content:"";
    position:absolute;
    display:block;
    top:75px;
    right:200px;
    width:50px;
    height:150px;
    background:#64d0b6;
    border:solid #000;
    border-width:0 2px 0 0;
    
    
    -webkit-border-top-left-radius:40px 120px;
    -moz-border-top-left-radius:40px 120px;
    -ms-border-top-left-radius:40px 120px;
    -o-border-top-left-radius:40px 120px;           
    border-top-left-radius:40px 120px;
        
    -webkit-border-bottom-left-radius:40px 120px;   
    -moz-border-bottom-left-radius:40px 120px;      
    -ms-border-bottom-left-radius:40px 120px;   
    -o-border-bottom-left-radius:40px 120px;    
    border-bottom-left-radius:40px 120px;           
        
    -webkit-transform:rotate(-35deg);
    -moz-transform:rotate(-35deg);  
    -ms-transform:rotate(-35deg);
    -o-transform:rotate(-35deg);
    transform:rotate(-35deg);   
}
.butters .hand{
    position:absolute;
    top:-10px;
    left: -15px;
    width:55px;
    height:55px;
    background:#ffedcb;

    -webkit-border-radius:100%; 
    -moz-border-radius:100%;
    -ms-border-radius:100%; 
    -o-border-radius:100%;  
    border-radius:100%; 
}


.butters .hand:after{
    content:"";
    position:absolute;
    top:80px;
    left:-220px;
    width:55px;
    height:55px;
    background: #ffedcb;
    z-index:1;
        
    -webkit-border-radius:100%;         
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;      
    border-radius:100%; 
}

.butters .thumb{
    position:absolute;
    top:30px;
    left: 0px;
    width:20px;
    height:20px;
    background:#ffedcb;
    border: 1px solid #333;
    -webkit-border-radius:100%; 
    -moz-border-radius:100%;
    -ms-border-radius:100%; 
    -o-border-radius:100%;  
    border-radius:100%; 
    z-index: 4;
}


.butters .thumb:after{
    content:"";
    position:absolute;
    top:70px;
    left:-180px;
    width:20px;
    height:20px;
    border: 1px solid #333;
    background: #ffedcb;
    z-index:4;
        
    -webkit-border-radius:100%;         
    -moz-border-radius:100%;
    -ms-border-radius:100%;
    -o-border-radius:100%;      
    border-radius:100%; 
}
.butters .leg{
    position:relative;
    top:160px;
    left:54px;
    width:185px;
    height:50px;
    background:#195438;
    z-index:-3;
}
.butters .feet{
    position:absolute;
    top:50px;
    left:-5px;
    width:195px;
    height:10px;
    background:#000;

    -webkit-border-radius:15px;     
    -moz-border-radius:15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;          
    border-radius:15px;
}

來源于網(wǎng)絡(luò)，整理于此

最后編輯于：2017.12.04 06:56:29

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末痘番，一起剝皮案震驚了整個(gè)濱河市捉片，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌汞舱，老刑警劉巖伍纫，帶你破解...
沈念sama閱讀 218,682評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異昂芜，居然都是意外死亡莹规，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,277評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門泌神，熙熙樓的掌柜王于貴愁眉苦臉地迎上來访惜，“玉大人，你說我怎么就攤上這事腻扇≌龋” “怎么了？”我有些...
開封第一講書人閱讀 165,083評(píng)論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵幼苛，是天一觀的道長窒篱。經(jīng)常有香客問我，道長舶沿，這世上最難降的妖魔是什么墙杯？我笑而不...
開封第一講書人閱讀 58,763評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮括荡，結(jié)果婚禮上高镐，老公的妹妹穿的比我還像新娘。我一直安慰自己畸冲，他們只是感情好嫉髓，可當(dāng)我...
茶點(diǎn)故事閱讀 67,785評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布观腊。她就那樣靜靜地躺著，像睡著了一般算行。火紅的嫁衣襯著肌膚如雪梧油。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,624評(píng)論 1贊 305
城市分裂傳說
那天州邢，我揣著相機(jī)與錄音儡陨，去河邊找鬼。笑死量淌，一個(gè)胖子當(dāng)著我的面吹牛骗村，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播呀枢，決...
沈念sama閱讀 40,358評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼胚股，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了硫狞？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,261評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤晃痴，失蹤者是張志新（化名）和其女友劉穎残吩，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倘核，經(jīng)...
沈念sama閱讀 45,722評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡泣侮，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了紧唱。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片活尊。...
茶點(diǎn)故事閱讀 40,030評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖漏益，靈堂內(nèi)的尸體忽然破棺而出蛹锰，到底是詐尸還是另有隱情，我是刑警寧澤绰疤，帶...
沈念sama閱讀 35,737評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布铜犬，位于F島的核電站，受9級(jí)特大地震影響轻庆，放射性物質(zhì)發(fā)生泄漏癣猾。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,360評(píng)論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一余爆、第九天我趴在偏房一處隱蔽的房頂上張望纷宇。院中可真熱鬧，春花似錦蛾方、人聲如沸像捶。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,941評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽作岖。三九已至唆垃，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間痘儡，已是汗流浹背辕万。一陣腳步聲響...
開封第一講書人閱讀 33,057評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留沉删，地道東北人渐尿。一個(gè)月前我還...
沈念sama閱讀 48,237評(píng)論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長得像矾瑰，于是被迫代替她去往敵國和親砖茸。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,976評(píng)論 2贊 355

純CSS3繪制的逼真二跋，呆萌战惊，超酷的CSS3動(dòng)畫

純CSS3繪制的逼真，呆萌扎即，超酷的CSS3動(dòng)畫

純CSS3人物行走動(dòng)畫逼真炫酷CSS3動(dòng)畫

純CSS3繪制的小貓笑臉動(dòng)畫超呆萌

純CSS3繪制可愛小男孩動(dòng)畫超酷面部表情

推薦閱讀更多精彩內(nèi)容

純CSS3繪制的逼真，呆萌扎即，超酷的CSS3動(dòng)畫

純CSS3人物行走動(dòng)畫 逼真炫酷CSS3動(dòng)畫

純CSS3繪制的小貓笑臉動(dòng)畫 超呆萌

純CSS3繪制可愛小男孩動(dòng)畫 超酷面部表情

推薦閱讀更多精彩內(nèi)容

純CSS3人物行走動(dòng)畫逼真炫酷CSS3動(dòng)畫

純CSS3繪制的小貓笑臉動(dòng)畫超呆萌

純CSS3繪制可愛小男孩動(dòng)畫超酷面部表情