Tiktok is convenient, small air conditioning special effect html+css+js

Look at the effect first (the source code is at the end):


The video effect is as follows, with sound effect Station B:

A fan shared this effect with me. I thought it was very interesting, and then studied it. The specific implementation is as follows (there may be many codes, but they are relatively simple. Come on):

Implementation process:

1. Define label:

 <!-- Bottom box -->
    <div class="container">
        <!-- Air conditioning as a whole -->
        <div class="air">
            <!-- Picture showing air conditioning parameters -->
            <img src="./air-conditioning.png" alt="x" class="picture">
            <!-- Picture in display mode. The default is snowflake -->
            <img class="pattern" src="./snow.png" alt="x">
            <!-- Display temperature -->
            <span class="font">17°C</span>
            <!-- logo,If you put a special character directly, you won't quote the font icon -->
            <span class="logo">?</span>
            <!-- Small green dot in the lower right corner of the air conditioner -->
            <span class="dot"></span>
        </div>
        <!-- Show the effect of wind. There are 3 winds inside -->
        <div class="wind">
            <span class="wind1"></span>
            <span class="wind2"></span>
            <span class="wind3"></span>
        </div>
        <!-- Button box -->
        <div class="btn">
            <!-- upper -->
            <div class="up">▲</div>
            <!-- lower -->
            <div class="down">▼</div> 
            <!-- sun -->
            <div class="sun"></div>
            <!-- snowflake -->
            <div class="snow"></div>
            <!-- switch -->
            <div class="open"></div>
        </div>
    </div>
    <!-- Music when the air conditioner is running -->
    <audio src="./open.mp3" class="music" loop></audio>
    <!-- Music with a "Ding" sound when you click the button -->

2. Define the global css style as usual and copy it:

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 241, 241);
        }

3. css style of bottom box:

.container{
            position: relative;
            width: 400px;
            height: 500px;
        }

position: relative; Relative positioning

4. css style of air conditioner appearance:

.air{
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-radius: 10px 10px 0 0;
            filter: drop-shadow(0 2px 4px rgb(145, 145, 145));
        }
        .air::after{
            content: '';
            position: absolute;
            bottom: -21px;
            left: 0;
            height: 20px;
            width: 300px;
            background-color: rgb(255, 255, 255);
            border-radius: 0 0 20px 20px;
        }

margin: 0 auto; Center.
background-color: rgb(255, 255, 255); The background is white.
border-radius: 10px 10px 0 0; Radians of the four corners.
filter: drop-shadow(0 2px 4px rgb(145, 145, 145)); Shadows.

5. The css style of parameter picture and mode picture is mainly positioned at the corresponding position:

.picture{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 40px;
            height: 65px;
            border-radius: 5px;
        }
        .pattern{
            position: absolute;
            top: 25px;
            right: 35px;
            width: 20px;
            height: 20px;
            opacity: 0;
            transition: all 0.3s;
        }

position: absolute; Absolute positioning.
opacity: 0; If the transparency is 0, it will not be displayed first. You can write 1 first for observation, and then change it to 0 when writing js.

6. Define temperature font css Style:

.font{
            /* Reference LED font */
            font-family: "led regular";
            position: absolute;
            right: 30px;
            top: 45px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            color: rgb(184, 184, 184);
            opacity: 0;
            transition: all 0.3s;
        }

The font effect of LED light style is generated by the external file I directly introduced, so I don't write it separately. If you want all the source files and materials, you can leave a message or send a private letter to me in your email and I'll send it to you.
line-height: 30px; Row spacing.
transition: all 0.3s; Transition effect.

7. The css style of logo and small green dot in the lower right corner can be realized. Just locate it in the corresponding position:

.logo{
            position: absolute;
            left: 50%;
            bottom: 3px;
            transform: translateX(-50%);
            font-size: 10px;
            color: rgb(139, 139, 139);
        }
        .dot{
            position: absolute;
            bottom: -8px;
            right: 12px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgb(19, 221, 53);
            z-index: 1;
            opacity: 0;
            transition: all 0.3s;
        }

left: 50%;
transform: translateX(-50%); You can also center left and right in this way.
z-index: 1; It's displayed on the top layer. Don't be covered.

8. css style of the bottom box of the wind:

.wind{
            position: relative;
            top: 30px;
            width: 250px;
            height: 60px;
            margin: 0 auto;
            opacity: 0;
            transition: all 1.2s;
            animation: move 1.5s ease-in-out infinite;
        }
        @keyframes move{
            0%,100%{
                transform: translateY(0px);
            }
            50%{
                transform: translateY(5px);
            }
        }

margin: 0 auto; Center.
animation: move 1.5s ease-in-out infinite; Animate repetitions.
transform: translateY(0px); Offset the corresponding distance on the Y axis.

9. The style of three small winds shall be positioned at the corresponding position:

.wind>span{
            position: absolute;
            width: 5px;
            height: 40px;
            background-color: rgb(206, 206, 206);
 
        }
        .wind1{           
            left: 20%;           
            transform: rotate(20deg);
        }
        .wind2{           
            left: 50%;           
        }
        .wind3{           
            left: 80%;           
            transform: rotate(-20deg);
        } 

transform: rotate(20deg); Rotate a certain angle.

10. css style of button box:

 .btn{
            position: relative;
            top: 50px;
            margin:0 auto;
            width: 100px;
            height: 150px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }

display: flex; flex layout.
justify-content: space-around; The child elements divide the remaining space horizontally.
flex-wrap: wrap; Multiple lines are allowed.
align-items: center; Center vertically.

11. Common style of all buttons:

.btn>div{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            font-size: 12px;
            line-height: 35px;
            text-align: center;
            background-color: rgb(204, 204, 204);
            box-shadow: 0 2px 4px rgb(151, 151, 151);
            cursor: pointer;
            user-select: none;
        }
        .btn>div:active{
            background-color: rgb(240, 240, 240);
        }

border-radius: 50%; Turn into a circle.
text-align: center; Text centered.
box-shadow: 0 2px 4px rgb(151, 151, 151); Shadows.
cursor: pointer; The style is small hand.
user-select: none; Text cannot be selected.
. BTN > div: active: click the mouse to change the style instantly.

12. Unique background color or picture of each button:

.sun,.snow,.open{
            background-size: 50% 50%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }
        .btn .sun{
            background-image: url(./sun.png);
            background-color: rgb(255, 130, 13);
        }
        .btn .snow{
            background-image: url(./snow.png);
            background-color: rgb(13, 138, 255);
        }
        .btn .open{
            background-image: url(./open.png);
            background-color: rgb(33, 255, 13);
        }

background-size: 50% 50%; Background image size.
background-position: 50% 50%; Location of background image.
background-repeat: no-repeat; The background image is not tiled.

13. Start js section, get elements and define variables.

         /* switch */
        var open = document.querySelector(".open");
        /* Sun button */
        var sun = document.querySelector(".sun");
        /* Snowflake button */
        var snow = document.querySelector(".snow");
        /* Up button */
        var up = document.querySelector(".up");
        /* Down button */
        var down = document.querySelector(".down");
        /* Pattern picture */
        var pattern = document.querySelector(".pattern");
        /* temperature */
        var font = document.querySelector(".font");
        /* Little green dot */
        var dot = document.querySelector(".dot");
        /* wind */
        var wind = document.querySelector(".wind");
        /* Music when the air conditioner is running */
        var music = document.querySelector(".music");
        /* Music with a "Ding" sound when you click the button*/
        var ding = document.querySelector(".ding");
        /* Variable to judge the switch state */
        var temp = 1;
        /* Temperature size */
        var num = 17;

14. When the switch button is clicked, the transparency of the corresponding mode, font, etc. changes to 1:

 open.addEventListener('click',function(){
            if(temp==0){
            // The background color turns green
                open.style.backgroundColor = 'rgb(33, 255, 13)';
                pattern.style.opacity = 0;
                font.style.opacity = 0;
                dot.style.opacity = 0;
                wind.style.opacity = 0;               
                temp=1;
                // Pause the music of the air conditioner
                music.pause();
            }else if(temp==1){
            // Turn red
                open.style.backgroundColor = 'red';
                pattern.style.opacity = 1;
                font.style.opacity = 1;
                dot.style.opacity = 1;
                wind.style.opacity = 1;
                temp=0;
                // Music to start air conditioning
                music.play();
            }
        })

15. Change when clicking the up button, other buttons and so on:

up.addEventListener('click',function(){
           if(num==30) return ;
            //Temperature plus 1
            num++;
            // Temperature text rendering
            font.innerHTML = num+"°C";
            // Ding music reload
            ding.load();
            //Ding music playing
            ding.play();
        })
        down.addEventListener('click',function(){
         if(num==16) return ;
            num--;
            font.innerHTML = num+"°C";
            ding.load();
            ding.play();
        })
        sun.addEventListener('click',function(){
            pattern.src = "./sun.png";
            ding.play();
            music.load();
            music.play();
        })
        snow.addEventListener('click',function(){
            pattern.src = "./snow.png";
            ding.play();
            music.load();
            music.play();
        })

Full code:

<!DOCTYPE html>
<html lang="zh-CN">
<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>Small air conditioner</title>
    <style>
        @font-face {
         font-family: 'led regular';
         src: url('./font/ds_digital/DS-DIGI.TTF');
        }

        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 241, 241);
        }
        .container{
            position: relative;
            width: 400px;
            height: 500px;
           /*  border: 1px solid rgb(201, 201, 201); */
        }
        .air{
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-radius: 10px 10px 0 0;
            filter: drop-shadow(0 2px 4px rgb(145, 145, 145));
        }
        .air::after{
            content: '';
            position: absolute;
            bottom: -21px;
            left: 0;
            height: 20px;
            width: 300px;
            background-color: rgb(255, 255, 255);
            border-radius: 0 0 20px 20px;
        }
        .picture{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 40px;
            height: 65px;
            border-radius: 5px;
        }
        .pattern{
            position: absolute;
            top: 25px;
            right: 35px;
            width: 20px;
            height: 20px;
            opacity: 0;
            transition: all 0.3s;
        }
        .font{
            /* Reference LED font */
            font-family: "led regular";
            position: absolute;
            right: 30px;
            top: 45px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            color: rgb(184, 184, 184);
            opacity: 0;
            transition: all 0.3s;
        }
        .logo{
            position: absolute;
            left: 50%;
            bottom: 3px;
            transform: translateX(-50%);
            font-size: 10px;
            color: rgb(139, 139, 139);
        }
        .dot{
            position: absolute;
            bottom: -8px;
            right: 12px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgb(19, 221, 53);
            z-index: 1;
            opacity: 0;
            transition: all 0.3s;
        }
        .wind{
            position: relative;
            top: 30px;
            width: 250px;
            height: 60px;
            margin: 0 auto;
            opacity: 0;
            transition: all 1.2s;
            animation: move 1.5s ease-in-out infinite;
        }
        @keyframes move{
            0%,100%{
                transform: translateY(0px);
            }
            50%{
                transform: translateY(5px);
            }
        }
        .wind>span{
            position: absolute;
            width: 5px;
            height: 40px;
            background-color: rgb(206, 206, 206);
 
        }
        .wind1{           
            left: 20%;           
            transform: rotate(20deg);
        }
        .wind2{           
            left: 50%;           
        }
        .wind3{           
            left: 80%;           
            transform: rotate(-20deg);
        }
        .btn{
            position: relative;
            top: 50px;
            margin:0 auto;
            width: 100px;
            height: 150px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        .btn>div{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            font-size: 12px;
            line-height: 35px;
            text-align: center;
            background-color: rgb(204, 204, 204);
            box-shadow: 0 2px 4px rgb(151, 151, 151);
            cursor: pointer;
            user-select: none;
        }
        .btn>div:active{
            background-color: rgb(240, 240, 240);
        }
        .sun,.snow,.open{
            background-size: 50% 50%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }
        .btn .sun{
            background-image: url(./sun.png);
            background-color: rgb(255, 130, 13);
        }
        .btn .snow{
            background-image: url(./snow.png);
            background-color: rgb(13, 138, 255);
        }
        .btn .open{
            background-image: url(./open.png);
            background-color: rgb(33, 255, 13);
        }
    </style>
</head>
<body>
    <!-- Bottom box -->
    <div class="container">
        <!-- Air conditioning as a whole -->
        <div class="air">
            <!-- Picture showing air conditioning parameters -->
            <img src="./air-conditioning.png" alt="x" class="picture">
            <!-- Picture in display mode. The default is snowflake -->
            <img class="pattern" src="./snow.png" alt="x">
            <!-- Display temperature -->
            <span class="font">17°C</span>
            <!-- logo,If you put a special character directly, you won't quote the font icon -->
            <span class="logo">?</span>
            <!-- Small green dot in the lower right corner of the air conditioner -->
            <span class="dot"></span>
        </div>
        <!-- Show the effect of wind. There are 3 winds inside -->
        <div class="wind">
            <span class="wind1"></span>
            <span class="wind2"></span>
            <span class="wind3"></span>
        </div>
        <!-- Button box -->
        <div class="btn">
            <!-- upper -->
            <div class="up">▲</div>
            <!-- lower -->
            <div class="down">▼</div> 
            <!-- sun -->
            <div class="sun"></div>
            <!-- snowflake -->
            <div class="snow"></div>
            <!-- switch -->
            <div class="open"></div>
        </div>
    </div>
    <!-- Music when the air conditioner is running -->
    <audio src="./open.mp3" class="music" loop></audio>
    <!-- Music with a "Ding" sound when you click the button -->
    <audio src="./12763.wav" class="ding"></audio>
    <script>
        /* switch */
        var open = document.querySelector(".open");
        /* Sun button */
        var sun = document.querySelector(".sun");
        /* Snowflake button */
        var snow = document.querySelector(".snow");
        /* Up button */
        var up = document.querySelector(".up");
        /* Down button */
        var down = document.querySelector(".down");
        /* Pattern picture */
        var pattern = document.querySelector(".pattern");
        /* temperature */
        var font = document.querySelector(".font");
        /* Little green dot */
        var dot = document.querySelector(".dot");
        /* wind */
        var wind = document.querySelector(".wind");
        /* Music when the air conditioner is running */
        var music = document.querySelector(".music");
        /* Music with a "Ding" sound when you click the button*/
        var ding = document.querySelector(".ding");
        /* Variable to judge the switch state */
        var temp = 1;
        /* Temperature size */
        var num = 17;

        open.addEventListener('click',function(){
            if(temp==0){
                open.style.backgroundColor = 'rgb(33, 255, 13)';
                pattern.style.opacity = 0;
                font.style.opacity = 0;
                dot.style.opacity = 0;
                wind.style.opacity = 0;               
                temp=1;
                music.pause();
            }else if(temp==1){
                open.style.backgroundColor = 'red';
                pattern.style.opacity = 1;
                font.style.opacity = 1;
                dot.style.opacity = 1;
                wind.style.opacity = 1;
                temp=0;
                music.play();
            }
        })
        up.addEventListener('click',function(){
            if(num==30) return ;
            num++;
            font.innerHTML = num+"°C";
            ding.load();
            ding.play();
        })
        down.addEventListener('click',function(){
            if(num==16) return ;
            num--;
            font.innerHTML = num+"°C";
            ding.load();
            ding.play();
        })
        sun.addEventListener('click',function(){
            pattern.src = "./sun.png";
            ding.play();
            music.load();
            music.play();
        })
        snow.addEventListener('click',function(){
            pattern.src = "./snow.png";
            ding.play();
            music.load();
            music.play();
        })
    </script>
</body>
</html>

Summary:


Other articles:
Text smoke effect html+css+js
Surround reflection loading effect html+css
Bubble floating background effect html+css
Simple clock effect html+css+js
Cyberpunk style button html+css
Simulated Netease cloud official website rotation map html+css+js
Water wave loading animation html+css
Navigation bar scrolling gradient effect html+css+js
Book page turning html+css
3D photo album html+css
Neon painting board effect html+css+js
Summary of some css attributes (1)
Sass summary notes
... wait
Go to my home page to see more~

Keywords: Front-end Android Vue.js html

Added by theoph on Tue, 01 Mar 2022 21:36:05 +0200