This is the 15th day of my participation in wen Challenge

The sun is burning, come and cool off!

Implementation effect

Look! It’s cool!

The implementation process

  1. HTML structure

First begin with HTML, we will be at the top of the text and the fan is divided into two parts, then separate the fan and the switch button, for fan structure, I believe many people will think that this is a picture, but actually this is through the border – the radius attribute draw the leaf shape, through 2 stick that somehow the joining together into the shape of the fan

<div class="fan">
    <div class="title">/ / literal...</div>
    <div class="container">
        <div class="header">// Fan head...</div>
        <div class="stick"></div>/ / stick<div class="footer"></div>/ / the base<div class="switch">/ / button...</div>
    </div>
</div>
Copy the code
  1. CSS styles

The main idea is to position one end of the fan blade to the center of the circle, and then adjust the shape of the fan blade through border-radius. For the processing of the three fan blades, we first position them together, and then rotate them apart to form an effect around the center of the circle

.leaf { position: absolute; top: 140px; left: 140px; width: 100px; height: 78px; border: 10px solid black; border-radius: 19% 50%; transform-origin: 0 0; Transform: rotate(120deg); transform: rotate(120deg); transform: rotate(120deg); /* rotate */}. Leaf-2 {transform: rotate(240deg); }Copy the code
  1. Effect of rotation

There are many methods to achieve the effect of rotation, JS timer, CSS3 and so on can be achieved, here using CSS3 animation to achieve. First of all, write a rotation animation, can make the fan turn, and then through JS to control the fan switch

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1080deg); }}.leafs {
    animation: rotate 0s infinite linear;
}/* Outer box of fan blade */
Copy the code

Just like this, after ensuring that the animation is correct, we set the animation time to 0s

  1. Control the speed

By clicking different buttons, the rotation speed can be changed, that is, the animation time can be changed. By default, the fan is turned off. When we click gears 1 to 3, we add animation time to Leafs, that is, the larger the number of gears, the shorter the animation time will be

switch (index) {
    case '0':
        rot(0)
        leafs.classList.add('out')
        break;
    case '1':
        leafs.classList.remove('out')
        rot(2)
        break;
    case '2':
        leafs.classList.remove('out')
        rot(1.3)
        break;
    case '3':
        leafs.classList.remove('out')
        rot(7.)
        break;
}
function rot(rate) {
      leafs.style.animationDuration = `${rate}s`
}
Copy the code

By clicking different buttons to pass in different rates to realize the function of speed control

  1. Slowly stop when closing

You may find that in the above code, there will be a class name out, which is the core I use to realize slow stop. When clicking close, add an end animation to the leaf leafs again

.out {
    animation: lastRotate 2.6 s 1 ease-out ! important;
}
Copy the code

In this way, when the user clicks the close button, the original animation time is set to 0 before adding a new animation, which is an ease-out effect and slows down to realize the function of slow stop

The realization effect is general, when the speed is too fast, the speed will still have the effect of mutation

The implementation code

The HTML code

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Cloud fan</title>
    <link rel="stylesheet" href="fan.css">
    <script src="fan.js"></script>
</head>

<body>
    <div class="fan">
        <div class="title">
            <h2>Cool cloud fan in summer<br>
                <p class="small">"Look, the fan turns. It's cool."</p>
            </h2>
        </div>
        <div class="container">
            <div class="header">
                <div class="leafs">
                    <div class="circle"></div>
                    <div class="leaf leaf-1"></div>
                    <div class="leaf leaf-2"></div>
                    <div class="leaf leaf-3"></div>
                </div>
            </div>
            <div class="stick"></div>
            <div class="footer"></div>
            <div class="switch">
                <div class="selected" id="close">guan</div>
                <div id="first">1</div>
                <div id="second">2</div>
                <div id="third">3</div>
            </div>
        </div>
    </div>
</body>

</html>
Copy the code

JS code

window.addEventListener('load'.function () {
    let leafs = document.querySelector('.leafs');
    let switchBox = document.querySelector('.switch');
    let len = switchBox.children.length;
    for (let i = 0; i < len; i++) {
        switchBox.children[i].setAttribute('data-index', i)
    }
    switchBox.addEventListener('click'.function (e) {
        let target = e.target;
        for (let i = 0; i < len; i++) {
            switchBox.children[i].className = ' '
        }
        target.classList.add('selected');
        let index = target.dataset.index;
        switch (index) {
            case '0':
                rot(0)
                leafs.classList.add('out')
                break;
            case '1':
                leafs.classList.remove('out')
                rot(2)
                break;
            case '2':
                leafs.classList.remove('out')
                rot(1.3)
                break;
            case '3':
                leafs.classList.remove('out')
                rot(7.)
                break; }})function rot(rate) {
        leafs.style.animationDuration = `${rate}s`}})Copy the code

CSS code is too long, I will not put up, if you need to leave a message

conclusion

I was under the sun

Just want to hold an umbrella for you

You leaned on my shoulder

Take a deep breath for fear of forgetting

Hot summer, head fan, in the dormitory code is really very happy!