炎炎夏日，CSS给你开个空调，带来一丝凉爽

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

枯藤老树昏鸦，空调WiFi西瓜，这是炎炎夏日里的三大保命神器。什么，你没空调？别急，等我给你写一个，至少可以望梅止渴。

先找个好看点的空调，然后用我们的 HTML + CSS 魔法实现出来。于是找到了这么一个：

代码实现

先画上基本的轮廓，包含空调机身，底部出风口

<div class="kt">
	<!-- 空调机身 -->
	<div class="kt-body"></div>
	<!-- 空调底部 -->
	<div class="kt-bottom">
		<!-- 底部出风口 -->
		<div class="kt-bottom-main">
			<!-- 底部出风口挡板 -->
			<div id="outlet" class="kt-bottom-outlet"></div>
		</div>
	</div>
</div>

用样式点缀上，一个基本的空调轮廓不就出来了

.kt{
	width: 645px;
	margin: 20px auto;
}
.kt-body{
	position: relative;
	width: 645px;
	height: 174px;
	background-color: #F0EFF2;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.kt-bottom{
	width: 645px;
	height: 30px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border: 5px solid #e0dfe2;
	background-color: #9a9ea1;
	box-sizing: border-box;
}
.kt-bottom-main{
	position: relative;
	width: 560px;
	margin: 0 auto;
	height: 20px;
	background-color: #666;
}
.kt-bottom-outlet{
	width: 556px;
	height: 19px;
	margin: 0 auto;
	background-color: #9a9ea1;
}

当空调打开时，底部出风口挡板就会旋转打开，关闭的时候，又会旋转缓慢关闭，这里就用到了 CSS 动画来实现。 打开时，给挡板添加一个 active 类，关闭时，移除 active 类，并添加一个 unactive 类，CSS 动画就放在这两个类上。

.active{
	animation: openkt 2s ease forwards;
}
.unactive{
	transform: rotateX(60deg);
	animation: closekt 2s ease forwards;
}
@keyframes openkt {
	to{
		transform: rotateX(60deg);
	}
}
@keyframes closekt {
	to{
		transform: rotateX(0deg);
	}
}

在 animation 中可以看到有一个值叫 forwards，这个其实是 animation-fill-mode 属性的值，作用是动画结束后，停留在最后一帧，保持挡板打开着的状态。如果没有加这个值，挡板旋转完，又会立即恢复成原样，因为 animation-fill-mode 默认值为 none，动画在动画执行之前和之后不会应用任何样式到目标元素。

给空调机身加上温度显示屏和空调logo，让其更像一个真空调

<div class="kt-body">
	<!-- 假装是个小米空调 -->
	<div class="kt-logo">MI</div>
	<!-- 温度显示屏 -->
	<div class="kt-screen">
		<div class="kt-number">
			<span id="temperature">26</span>
			<span class="kt-number-span">℃</span>
		</div>
	</div>
</div>

.kt-logo{
	position: absolute;
	left: 60px;
	bottom: 30px;
	font-size: 16px;
	color: #9a9ea1;
	font-weight: bold;
}
.kt-screen{
	position: absolute;
	right: 60px;
	top: 59px;
	width: 56px;
	height: 56px;
	background-color: #000;
	border-radius: 56px;
}
.kt-number{
	display: none;
	position: relative;
	font-size: 20px;
	color: #fff;
	text-align: center;
	line-height: 56px;
	font-family: Arial, Helvetica, sans-serif;
}
.kt-number-span{
	position: absolute;
	top: -8px;
	right: 5px;
	font-size: 12px;
	transform: scale(0.5);
}

有了空调，就得配个遥控器，并且可以通过遥控器来开关，以及调整温度。

<div class="ykq">
	<!-- 开关按钮 -->
	<div class="ykq-switch" onclick="handleSwitch()">电源</div>
	<!-- 调高温度 -->
	<div class="ykq-add" onclick="add()">+</div>
	<!-- 调低按钮 -->
	<div class="ykq-minus" onclick="minus()">-</div>
	<!-- 假装是个小米遥控器 -->
	<div class="ykq-logo">MI</div>
</div>

var temperature = document.getElementById('temperature');
        var outlet = document.getElementById('outlet');
        var action = false;
        var number = 26;

		// 点击开关按钮事件，用action变量记录当前开关状态
        function handleSwitch(){
            if(action){
                closeKT();
                action = false;
            }else{
                openKT();
                action = true;
            }
        }
		
		// 开空调，打开挡板，并显示温度
        function openKT(){
            temperature.parentElement.style.display = 'block';
            outlet.classList.remove('unactive');
            outlet.classList.add('active');
        }
		// 关空调，关闭挡板，并隐藏温度
        function closeKT(){
            temperature.parentElement.style.display = 'none';
            outlet.classList.remove('active');
            outlet.classList.add('unactive');
        }

        function minus(){
            if(!action) return;
            number--;
            temperature.innerHTML = number;
        }
        function add(){
            if(!action) return;
            number++;
            temperature.innerHTML = number;
        }

码上掘金

以上代码已放到码上掘金中，有兴趣可以去开下空调试试。希望能够在炎热的夏季，给大家带来一丝丝凉意哦。 码上掘金