纯CSS3绘制的逼真，呆萌，超酷的CSS3动画

纯CSS3人物行走动画逼真炫酷CSS3动画

CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人物行走，而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个CSS3人物行走动画的基础，我们就可以更方便的在浏览器上实现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人物行走在线动画在线演示</title>

</head>

<body>

<link rel="stylesheet" href="http://andrew-hoyer.com/experiments/walking/assets/webkit_keyframes.css" type="text/css">     <link rel="stylesheet" href="http://andrew-hoyer.com/experiments/walking/assets/moz_keyframes.css" type="text/css">     <link rel="stylesheet" href="http://andrew-hoyer.com/experiments/walking/assets/common.css" 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.51.la/4473358.js"></script>
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/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绘制的小猫笑脸动画超呆萌

CSS3的强大之处在于你不需要一行JS代码即可绘制任何图形，甚至是实现一些简单的动画特效。今天要分享的一款CSS3小猫笑脸动画就是一个相当典型的案例。示例中不仅用CSS3绘制了小猫的脸部，非常生动，而且小猫的眼睛还耳朵还会萌动，十分可爱。

小猫

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>纯CSS3绘制的小猫笑脸动画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;
    }
/*鼠标浮动耳朵样式*/
/*左耳*/
.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;
}
/*眼睛浮动属性*/
.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绘制可爱小男孩动画超酷面部表情

今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。

面部表情

index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>纯CSS3绘制可爱小男孩动画在线演示</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;
}

来源于网络，整理于此

最后编辑于：2017.12.04 06:56:29

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,258评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,335评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,225评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,126评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,140评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,098评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,018评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,857评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,298评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,518评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,400评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,993评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,638评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,661评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352

纯CSS3绘制的逼真，呆萌，超酷的CSS3动画

纯CSS3人物行走动画 逼真炫酷CSS3动画

纯CSS3绘制的小猫笑脸动画 超呆萌

纯CSS3绘制可爱小男孩动画 超酷面部表情

推荐阅读更多精彩内容

纯CSS3人物行走动画逼真炫酷CSS3动画

纯CSS3绘制的小猫笑脸动画超呆萌

纯CSS3绘制可爱小男孩动画超酷面部表情