瞌睡的大白

       最近做了个小网页，页面效果为瞌睡的大白，（眼皮会眨）图片如下
（源码地址：https://github.com/monster-hui/sleepy-Baymax）

         其身体用css3实现通过设置不同的z-index实现各部分的层次关系，主要麻烦的就是设置相应的大小位置等。相同的部分可以通过相同的css实现，然后通过分设置

    transform:rotate(角度);实现方向的转换，在通过设置position:relative;  然后调整期top:和 left:值设置摆放位置。

          这里主要介绍眼皮部分的眨眼实现，基本原理是设置与眼睛略大颜色为白色的两个圆覆盖在眼睛上，通过定时器定时调整眼皮top值大小来实现眨眼过程。其中需要设置的

1.右眼皮移动方向，向下移动到眼睛底部后，就向上移动，首先为了实现这个过程应确定眼皮top的对大最小值，这个只要在firebug里调整top值大小原则合适的值即可。

          这里指的注意的是设置top时一定要记得加“px”，o1.style.top=i+"px";（我就是因为忘了加这个折腾了好久才发现的忘了加“px”）；

2.为了实现瞌睡的效果，我们知道人瞌睡的时候是眼皮是慢慢的下来，然后猛地清醒然后睁眼（及眼皮迅速向上移动）。

         首先想到的是判断眼皮到边缘时改变定时器的定时时间，使时间值变小。于是设置这time变量判断不同边界改变下time值其中（-10和4分别是上下边界top值）

               var time=100；

             interid=setInterval(function(){
               。。。
                if(i<=-10){time=100}
                if(i>=4){time=10}    
            },time);

        这样设置后发现time值可以正确改变，可是定时器定时时间永远的100，眼皮上下的速度一样。

        （这里不太明白为啥？反正实现不了预期效果。）

       于是想了另一种解决方案：调整top每次改变的量，下来的时候是每次+1，上去的时候是每次-5，

            interid=setInterval(function(){
                i+=j;
                o1.style.top=i+"px";
                o2.style.top=-13+i+"px";
                if(i<=-10){j=1}
                if(i>=4){j=-5}    
            },100);

       这样就可以了。

   到此关于这个瞌睡的大白就做出来的，小伙伴们有更好的解决办法，或者知道上面改变定时器事件方法的问题在哪的话，希望多多交流，在此非常感谢。！！