抖音便捷小空调特效 html+css+js

最新推荐文章于 2025-08-21 13:16:15 发布

原创

最新推荐文章于 2025-08-21 13:16:15 发布 · 6.5k 阅读

105 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #css3

先看效果（源码在最后）：

在这里插入图片描述
视频效果如下，有音效 B站：

有位粉丝给我分享了这个效果，我觉得挺有趣，然后研究了研究，具体实现如下（代码可能比较多，但都是比较简单的，加油）：

实现过程：

1.定义标签：

 <!-- 底层盒子 -->
    <div class="container">
        <!-- 空调整体 -->
        <div class="air">
            <!-- 显示空调参数的图片 -->
            <img src="./air-conditioning.png" alt="x" class="picture">
            <!-- 显示模式的图片，默认为雪花 -->
            <img class="pattern" src="./snow.png" alt="x">
            <!-- 显示温度 -->
            <span class="font">17°C</span>
            <!-- logo，直接放个特殊字符，就不引字体图标了 -->
            <span class="logo">☁</span>
            <!-- 空调右下角的小绿点 -->
            <span class="dot"></span>
        </div>
        <!-- 显示风的效果，里面为3条风 -->
        <div class="wind">
            <span class="wind1"></span>
            <span class="wind2"></span>
            <span class="wind3"></span>
        </div>
        <!-- 装按钮的盒子 -->
        <div class="btn">
            <!-- 上 -->
            <div class="up">▲</div>
            <!-- 下 -->
            <div class="down">▼</div> 
            <!-- 太阳 -->
            <div class="sun"></div>
            <!-- 雪花 -->
            <div class="snow"></div>
            <!-- 开关 -->
            <div class="open"></div>
        </div>
    </div>
    <!-- 空调运行时的音乐 -->
    <audio src="./open.mp3" class="music" loop></audio>
    <!-- 点击按钮时“叮”一声响的音乐 -->

2. 老样子定义全局css样式，复制即可：

*{
   
   
            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样式：

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

position：relative；相对定位

4. 制作空调外形的css样式：

.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; 居中。
background-color: rgb(255, 255, 255);背景白色。
border-radius: 10px 10px 0 0; 四个角的弧度。
filter: drop-shadow(0 2px 4px rgb(145, 145, 145)); 阴影。

5. 参数图片和模式图片css样式，主要是定位在对应位置就好：

.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；绝对定位。
opacity: 0; 透明度为0，先不显示。可以先写1好观察，写到js时再换成0。

6.定义温度字体css样式：

.font{
   
   
            /* 引用LED字体 */
            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);