我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

我们之前已经完成了一个小风车，但是呢，过于单调了，我打算给它加一个棍子，再加一个可以控制转动速度的按钮，就很完美了

思路

棍子可以使用一个div元素，通过定位把他定位到风车中间，然后把两头变圆，这样一个风车棍子就完成了
控制速度本质上是控制animation的duration属性，动画完成时间越短，速度越快

实现

现在dom中添加一个棍子的div

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="rod"></div>

rod就代表我们风车的棍子首先把棍子定位到风车中间，然后把头部变圆

.rod {
    position: absolute;
    width: 10px;
    height: 200px;
    background-color: #a3f93b;
    left: 50%;
    top: 100px;
    transform: translate(-5px);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

此时的棍子已经在风车中间了

看下效果

棍子已经完成，下一步我们来添加两个按钮，绑定click事件，控制风车的转动速度按钮采用flex布局，分布在分车棍子的两边先看html

<div id="app">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="rod"></div>
    <div class="btn">
        <button>加速</button>
        <button>减速</button>
    </div>
</div>

css中

.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 150px;
}

button {
    width: 50px;
    border: none;
    background-color: aqua;
    border-radius: 15px;
}

给btn添加事件

定义一个timer来控制动画完成的时间通过操作dom的style的animationDuration属性，来控制

const btns = document.querySelectorAll("button")
const car = document.querySelector("ul")
let timer = 3
btns[0].addEventListener("click", () => {
    car.style.animationDuration = (timer - 0.5) + "s"
    timer -= 0.5
})
btns[1].addEventListener("click", () => {
    car.style.animationDuration = (timer + 0.5) + "s"
    timer += 0.5
})

此时我们已经可以自由控制风车的速度了，而且没美观了很多，但是当timer = 0时会停止，我们可以判断一下是否为0，如果是，那么就让他变成0.1好了

btns[0].addEventListener("click", () => {
    timer -= 0.5
    if (timer === 0) {
        timer = 0.1
    }
    car.style.animationDuration = (timer) + "s"

})

这样当timer为0，就会是0.1

结束

先看效果

ok，大家如果喜欢，记得点个赞，爱你

夏天到了，画个会加速的小风车

前言

思路

实现

结束