当前位置：首页 → 问答吧 → 教程：纯CSS和JavaScript做的一个大风车效果

教程：纯CSS和JavaScript做的一个大风车效果

时间：2010-05-25

来源：互联网

下面是我用脚本联合样式表做的风车效果
首先要用CSS做出风车的样子，这个就要根据div的框模型了，当边框的值较小的时候每条边框看起来是一条直线，然而当边框的值变大的时候，边框的棱角就很清晰了，这一点可以根据把一个块的四个边框设成不同的颜色查看效果。当块的长和宽都为零，而border值设得很大时，这时每条边都是三角形的，如图：
，
然后写四个div，把他们拼贴成如图2的样子，分别对块1、2、3、4，的右、下、上、左边设置不同的颜色，就成了风车的基本原形了。

代码如下：HTML

复制内容到剪贴板

代码:

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以上和火狐上表现都很好，大家多顶一下啊