云空调：开源网页工具，给你的夏日带去清凉

云空调（Air Conditioner）是一个有趣的开源网页工具，由开发者 YunYouJun 创建，获得了超过 3000 颗 GitHub 星标。它用纯 HTML + CSS 实现了一个可以远程控制的虚拟空调界面，打开网页就能看到空调出风的动画效果，虽然物理上没有凉风，但视觉上给人带来了”凉爽”的感觉，是一个兼具实用性和趣味性的创意项目。

这个项目的诞生源于一个有趣的想法：很多人夏天在办公室或宿舍里热得不行，但空调遥控器却不在手边，或者空调被设置得太冷。云空调网页版让你随时随地打开一个网页就能”开空调”，配合一些远程控制硬件（如 ESP32、树莓派），甚至可以真的控制实体空调。

云空调的核心功能

虚拟空调界面：网页上呈现一台拟物的空调室内机，显示当前温度、制冷模式、风速设置等信息。界面上有一个可爱的雪人图标，制冷时会飘出雪花动画。

多种模式切换：支持制冷（雪花）、制热（小太阳）、送风（风车）和除湿四种模式，每种模式都有对应的动画效果。

温度调节：可以在 16°C 到 30°C 之间调节温度，数字实时变化。

风速控制：支持低、中、高、自动四种风速。

睡眠模式：开启后屏幕亮度降低，动画变柔和，适合晚上使用。

定时功能：可以设置定时开关机。

云空调的使用方式

方式一：直接访问在线版

开发者已经将网页部署到了云端，可以直接访问以下地址使用：

正式版：https://ac.yunyoujun.cn
开发测试版：https://ac.yyjj.moe

方式二：嵌入 iframe

如果你想在个人网站或博客中添加一个空调小工具，可以在页面中嵌入 iframe：

iframe height=”740″ src=”https://ac.yunyoujun.cn”/iframe

方式三：自行部署

云空调支持 Docker 部署，一条命令即可完成：

docker run -d -p 3000:3000 –name air-conditioner yunyoujun/air-conditioner

部署时可以配置以下环境变量自定义域名和端口：

AC_NGINX_DOMAIN：指定域名
AC_NGINX_PORT：指定监听端口

方式四：使用腾讯云 Webify 一键部署

项目提供了腾讯云 Webify 的部署按钮，可以一键将项目部署到腾讯云的 CDN 加速节点上，访问速度快，配置简单。

云空调的适用场景

给网页博客增加趣味性：将云空调嵌入个人博客或作品集网站，访客可以互动，给网站增加记忆点。

作为 UI/UX 设计参考：云空调是一个很好的 CSS 动画参考项目，学习如何用纯 CSS 实现流畅的粒子动画、状态切换和拟物化界面。

ESP32 远程控制项目：结合 ESP32 开发板和红外发射模块，可以将云空调网页变成真正的空调遥控器。项目本身不含硬件控制逻辑，但可以作为控制界面前端。

活动互动装置：在线下活动或展会中，可以用云空调作为互动装置，让参与者通过扫码控制屏幕上的空调，增加活动趣味性。

桌面壁纸模式：配合 Wallpaper Engine（Windows）或桌面整理工具，将云空调网页设置为桌面壁纸，获得持续的小空调陪伴体验。

技术实现亮点

云空调项目虽然功能简单，但技术实现上有很多值得学习的地方：

纯 CSS 动画：空调出风、雪花开、太阳光效等动画全部使用 CSS keyframes 实现，不需要 Canvas 或 JavaScript 动画库，体现了 CSS 的强大能力。

响应式设计：页面在手机、平板和桌面端都有良好的显示效果，可以自适应不同屏幕尺寸。

低性能消耗：由于使用纯 CSS 绘制而非 Canvas，CPU 占用极低，即使在性能有限的设备上也能流畅运行。

代码结构清晰：项目代码组织合理，对于想学习如何组织简单前端项目的人来说，是一个很好的参考。

开源协议

云空调采用 MIT 开源许可证，可以自由使用、修改和分发，包括用于商业项目。如果你在项目中有所改进，建议回馈社区，但非强制要求。

项目地址：https://github.com/YunYouJun/air-conditioner

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