CSS3十二生肖--蛇

CSS3十二生肖--贪吃蛇版

实在没时间做了，哈，就做个简易版的吧。逗死我了。

<!--蛇-->

<div class="snake">

    <div class="head"></div>

    <div class="eyes"></div>

    <div class="mouth"></div>

    <div class="body"></div>

    <div class="body"></div>

    <div class="body"></div>

    <div class="body"></div>

    <div class="body"></div>

    <div class="body"></div>

    <div class="tail"></div>

    <div class="tail"></div>

    <div class="tail"></div>

    <div class="tail"></div>

    <div class="tail"></div>

</div>

body{font-size: 10px;background:white;margin:10em;}

.snake{width:100px;height:20px;}

.snake .head{background:green;margin-top:2px;width:30px;height:30px;margin-left:-10px;}

.snake .body,.snake .tail{background:green;margin-top:2px;width:15px;height:15px;}

.snake .tail{margin-top:2px;margin-right:2px;float:left;}

.snake .eyes{position: relative;}

.snake .eyes::before,

.snake .eyes::after{

    position: absolute;

    content:'';

    width: 4px;

    height: 4px;

    border-radius: 2px;

    background:#fff;

    top:-20px;

}

.snake .eyes::before{left:-1px}

.snake .eyes::after{left:8px}

.snake .mouth{position: relative;}

.snake .mouth::after{

    position: absolute;

    content:'';

    width:9px;

    height: 2px;

    background:#fff;

    top:-10px;

}