HTML + CSS + JS 轻松实现抖音小空调特效：酷炫清新，吸睛利器！

2024-01-29 12:18:41

使用抖音特效的优点

易于实现：这个特效只需要简单的 HTML、CSS 和 JavaScript 即可实现，非常适合初学者。
创意动画：该特效利用CSS的动画效果，让一个小空调模型在网页上以清新自然的风格运动。
视觉交互：当用户滚动页面或将鼠标悬停在小空调模型上时，它会做出相应的反应，增强了用户的参与度。
网页设计：该特效可以轻松地集成到网页设计中，为您的网站或博客增添趣味性和互动性。

准备工作

在开始之前，您需要确保您已经安装了最新的 HTML、CSS 和 JavaScript 开发工具，例如 Visual Studio Code 或 Atom。您还需要一个文本编辑器来编写代码。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div class="air-conditioner">
    <div class="air-conditioner-body">
      <div class="air-conditioner-display">
        <div class="air-conditioner-temperature">25°C</div>
        <div class="air-conditioner-mode">制冷</div>
      </div>
      <div class="air-conditioner-buttons">
        <button class="air-conditioner-power">电源</button>
        <button class="air-conditioner-temperature-up">+</button>
        <button class="air-conditioner-temperature-down">-</button>
      </div>
    </div>
    <div class="air-conditioner-fan">
      <div class="air-conditioner-fan-blades"></div>
    </div>
  </div>

</body>
</html>

CSS 代码

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 空调样式 */
.air-conditioner {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #000000;
}

/* 空调主体样式 */
.air-conditioner-body {
  width: 100%;
  height: 150px;
  background-color: #ffffff;
}

/* 空调显示屏样式 */
.air-conditioner-display {
  width: 100%;
  height: 50px;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 空调温度样式 */
.air-conditioner-temperature {
  font-size: 24px;
  font-weight: bold;
}

/* 空调模式样式 */
.air-conditioner-mode {
  font-size: 16px;
}

/* 空调按钮样式 */
.air-conditioner-buttons {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 空调电源按钮样式 */
.air-conditioner-power {
  width: 50px;
  height: 50px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
}

/* 空调温度加减按钮样式 */
.air-conditioner-temperature-up,
.air-conditioner-temperature-down {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 5px;
}

/* 空调风扇样式 */
.air-conditioner-fan {
  width: 100%;
  height: 50px;
  background-color: #000000;
}

/* 空调风扇叶片样式 */
.air-conditioner-fan-blades {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  animation: spin 2s linear infinite;
}

/* 空调风扇叶片动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

JavaScript 代码

// 获取元素
const airConditioner = document.querySelector('.air-conditioner');
const airConditionerDisplay = document.querySelector('.air-conditioner-display');
const airConditionerTemperature = document.querySelector('.air-conditioner-temperature');
const airConditionerMode = document.querySelector('.air-conditioner-mode');
const airConditionerPower = document.querySelector('.air-conditioner-power');
const airConditionerTemperatureUp = document.querySelector('.air-conditioner-temperature-up');
const airConditionerTemperatureDown = document.querySelector('.air-conditioner-temperature-down');

// 初始化变量
let temperature = 25;
let mode = '制冷';
let power = false;

// 添加事件监听器
airConditionerPower.addEventListener('click', () => {
  power = !power;
  if (power) {
    airConditioner.classList.add('air-conditioner-on');
  } else {
    airConditioner.classList.remove('air-conditioner-on');
  }
});

airConditionerTemperatureUp.addEventListener('click', () => {
  if (temperature < 30) {
    temperature++;
    airConditionerTemperature.innerHTML = `${temperature}°C`;
  }
});

airConditionerTemperatureDown.addEventListener('click', () => {
  if (temperature > 16) {
    temperature--;
    airConditionerTemperature.innerHTML = `${temperature}°C`;
  }
});

// 更新显示屏内容
const updateDisplay = () => {
  airConditionerTemperature.innerHTML = `${temperature}°C`;
  airConditionerMode.innerHTML = mode;
};

// 主循环
const mainLoop = () => {
  if (power) {
    updateDisplay();
  }

  requestAnimationFrame(mainLoop);
};

// 启动主循环
mainLoop();