云空调 YunYouJun/air-conditioner：开源便携小空调，为你的夏日带去清凉

夏天来了，空调成了必需品，但总有些场景让你无法享受空调的凉爽——在办公室座位离空调太远、出租屋没有空调、或者就想在卧室角落放一个”空调”解解馋。云空调（Air Conditioner）这个开源项目，就是为这个有趣的需求而生的。

这是一个纯前端项目，使用 HTML 和 CSS 绘制了一个可以交互的空调界面，支持调节温度、风速、模式等功能，还能播放空调工作时的白噪音。虽说是”假空调”，但视觉效果和交互体验都相当用心，是少见的既有趣又实用的开源小项目。

项目介绍

云空调是由开发者 YunYouJun 创建的便携小空调项目，目前在 GitHub 上已获得超过 3400 颗星。项目完全使用 HTML、CSS 和少量 JavaScript 构建，不依赖 Canvas，纯 CSS 绘制保证了极低的性能消耗和良好的跨平台兼容性。

最实用的功能是可以通过 iframe 直接嵌入到任何网页中。开发者还提供了”上门服务”——将空调嵌入到 Hugo 静态网站生成器的模板中，方便博客主为自己的网站添加一个空调小部件。

主要特色

纯 CSS 绘制是技术亮点。相比 Canvas 或 WebGL，纯 CSS 绘制更轻量，CPU 占用几乎为零，非常省电。空调的出风口、指示灯、显示屏等元素都用 CSS 动画实现，包括风的效果也是纯 CSS 动画。

支持空调工作白噪音。点击开机键后，会播放空调运转时的风声，配合视觉动画，有一定的沉浸感。项目还在探索接入喜马拉雅等音频平台，提供更多音效选择。

支持亮色/暗色模式自适应。能根据系统偏好自动切换配色，在夜间使用时不会刺眼。温度调节范围支持 16°C 到 31°C，覆盖了日常使用的全部范围。

多种部署方式。支持 Docker 部署、Nginx 部署，以及腾讯云 Webify 一键部署，满足不同技术水平的用户需求。

安装部署

最简单的方式是通过 iframe 嵌入到任何网页：
<iframe height="740" src="https://ac.yunyoujun.cn"></iframe>

如果有自己的服务器，可以使用 Docker 部署。设置域名和端口环境变量：
docker run -d \
-p 80:80 \
-e AC_NGINX_DOMAIN=your-domain.com \
-e AC_NGINX_PORT=80 \
yunyoujun/air-conditioner

开发模式本地运行：
git clone https://github.com/YunYouJun/air-conditioner.git
cd air-conditioner
yarn install
yarn start
访问 http://localhost:3000 即可。

使用方法

使用非常简单。打开空调界面后，点击电源按钮开机，可以调节目标温度（拖动或点击温度显示），切换风速（低/中/高），切换制冷/制热模式。点击出风口可以开关风向摇摆功能。

空调显示屏会实时显示当前温度和设置温度，运转时会有风动画和音效。如果想关闭广告，可以设置环境变量 VITE_DISABLE_ADSENSE=true 后重新构建。

作为网站主，可以在自己的博客侧边栏嵌入空调小部件，为访客增加一点趣味性。也有 Hugo 主题集成可以直接使用。

适用场景

个人娱乐在天热时给自己一个”心理安慰”，或者纯粹觉得有趣。博客/网站小部件为网站添加一个互动元素，增加趣味性。嵌入到 Electron 应用中作为桌面壁纸或桌面小工具。演示/分享场合作为有趣的开发者作品展示。

开源协议

本项目采用 MIT 协议开源，可以免费使用、修改和分发，非常宽松。适合开发者学习和参考其 CSS 动画实现方式。

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。