CSS和JavaScript打造的转动风车效果

下面是我用脚本联合样式表打造的转动风车效果。

　　首先要用CSS做出风车的样子，这个就要根据div的框模型了，当边框的值较小的时候每条边框看起来是一条直线，然而当边框的值变大的时候，边框的棱角就很清晰了，这一点可以根据把一个块的四个边框设成不同的颜色查看效果。当块的长和宽都为零，而border值设得很大时，这时每条边都是三角形的，如图：



　　代码如下：

　　HTML：

<div id="box">
  <div id="box1" class="block"></div>
  <div id="box2" class="block"></div>
  <div id="box3" class="block"></div>
  <div id="box4" class="block"></div>
</div>

　　CSS：

.block{
    height:0px;
    width:0px;
    border-top-width:50px;
    border-right-width:50px;
    border-bottom-width:50px;
    border-left-width:50px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
}
#box1{
    float:left;
    border-right-color: #FF0000;
}
#box2{
    float:left;
    border-bottom-color:#FFFF00;
}
#box3{
    float:left;
    border-top-color:#999999;
}
#box4{
    float:left;
    border-bottom-color:#cc6666;
}
#box{
    height:200px;
    width:200px;
    margin:50px auto;
}

　　接下来要做的就是让这个风车旋转起来了，脚本如下：

//定义风车四个颜色的数组
var color= new Array('red','blue','green','yellow');
//定义临时变量，轮换颜色时要用
var tem=0;
//定义速度，也就是间隔多长时间转一下，单位为毫秒
var speed=500;
//自定义函数，简化获取id对象的代码
function get(id){
    return document.getElementById(id);
}
//让风车转动的函数
function zhuan(){
    tem++;
    var b1=get('box1');
    var b2=get('box2');
    var b3=get('box3');
    var b4=get('box4');
    b1.style.borderRightColor=color[tem%4];
    b2.style.borderBottomColor=color[(tem+3)%4];
    b3.style.borderTopColor=color[(tem+1)%4];
    b4.style.borderLeftColor=color[(tem+2)%4];
    //每隔一定时间调用一下自身，这样就一直转动了        
    setTimeout(zhuan,speed);
}

　　OK，这样就完成了一个转动的风车的效果了，在IE6以上和火狐上表现都很好，完整的代码和效果如下：