js简单实现大风车

r囧r小猫 2023-07-12 09:17 6阅读 0赞

**今天分享下大风车的制作，效果图如下，其实看着挺好看的，哈哈…**  
![在这里插入图片描述][20200308123117377.gif]

## HTML和CSS ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]  
上述代码主要就是搭建一个风车的形状和按钮的初始状态。

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

**上述代码的效果图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]

## js操作 ##

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

[20200308123117377.gif]: https://img-blog.csdnimg.cn/20200308123117377.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020030810132280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200308101754415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200308103333615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70