纯css3制作写轮眼开眼及进化过程

今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。以下就直接展示整个效果，上张图，先睹为快：

眼下已经測试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。

温馨提示：以上浏览器版本均最新的；动画过程中每一个阶段大约会停留5秒钟，希望你不会中幻术^_^。

在线演示　　　　源代码下载

---

HTML代码：

<div class="container">
    <!--左眼開始-->
    <div class="eyesBoxs pullLeft">
        <div class="profile skewLeft"></div>
        <div class="shadow skewLeft"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <div class="hook ani-rotateHook">
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
        <div class="trans skewLeft">
            <span class="bar ani-shadow"></span>
        </div>
    </div>
    <!--左眼结束-->
    <!--右眼開始-->
    <div class="eyesBoxs pullRight">
        <div class="profile skewRight"></div>
        <div class="shadow skewRight"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <div class="hook ani-rotateHook">
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
        <div class="trans skewRight">
            <span class="bar ani-shadow"></span>
        </div>
    </div>
    <!--右眼结束-->
</div>