js简单实现大风车

今天分享下大风车的制作，效果图如下，其实看着挺好看的，哈哈…

HTML和CSS

上述代码主要就是搭建一个风车的形状和按钮的初始状态。

1. 先给个容器包括四个扇叶，设置形状背景和相对定位，因为四个扇叶要定位到上面。
2. 风车四个边，固定宽高，加上绝对定位，改变左上的形状，使其变成尖角。同时改变旋转基点，其他三个扇叶依次旋转90度倍数就可以了。
3. 改变按钮的位置，加上背景。value是按钮上要显示的初始值，给个id方便下面js的操作。
4. 写动画，就是旋转360度，加给包裹四个扇叶的容器，初始加上paused，一开始让动画不进行。

上述代码的效果图如下：

js操作

js中注意规范上个博客写过，现在就直接讲解代码。
同样是先找到包裹扇叶的容器和两个按钮容器，然后就是有两个点击触发函数。一个控制动画开始关闭，一个控制速度，其实就是控制动画完成时间。
onclick就是点击操作的属性，开始按钮点击首先判断开始状态，然后改变动画播放状态。同样的速度点击触发函数也是先判断一开始的value值，然后改变动画播放时间。就这么简单，有不懂得或错的地方，欢迎评论！！！