用css和uniapp在微信小程序中实现“空调”开关效果。

1、效果图

关机状态

开机状态

遥控器

2、全部代码

<template>
	<view class="body">
		<view class="kt">
			<view class="kt-body">
					<!-- 空调logo -->
					<view class="kt-logo">MI</view>
					<!-- 显示屏 -->
					<view class="kt-screen">
						<view class="kt-number" v-if="isOpen">
							<text>{{wdNum}}</text>
							<text class="kt-number-text">℃</text>
						</view>
					</view>
			</view>
			<!-- 空调底部 -->
			<view class="kt-bottom">
				<!-- 底部出风口 -->
				<view class="kt-bottom-main">
					<!-- 底部出风口挡板 -->
					<view class="kt-bottom-outlet" :class="isOpen?'active':'unactive'"></view>
				</view>
			</view>
		</view>
		<!-- 空调风 -->
		<view class="wind" :class="{showWind:isOpen}">
			<view class="windItem"></view>
			<view class="windItem"></view>
			<view class="windItem"></view>
			<view class="windItem"></view>
			<view class="windItem"></view>
		</view>
		<!-- 遥控器 -->
		<view class="ykq">
			<!-- 开关按钮 -->
			<view class="ykq-switch" @click="ktSwitch()">
				<tn-button shape="icon" fontSize="44" fontColor="#E83A30" shadow width="100rpx" height="100rpx">
					<text class="tn-icon-power"></text>
				</tn-button>
			</view>
			<view class="" style="display: flex; justify-content: space-between;width: 100%;">
				<!-- 调高温度 -->
				<view class="ykq-switch" @click="updateWd(1)">
					<tn-button shape="icon" fontSize="44" shadow width="100rpx" height="100rpx">
						<text class="tn-icon-add"></text>
					</tn-button>
				</view>
				<!-- 调低按钮 -->
				<view class="ykq-switch" @click="updateWd(-1)">
					<tn-button shape="icon" fontSize="44" shadow width="100rpx" height="100rpx">
						<text class="tn-icon-reduce"></text>
					</tn-button>
				</view>
			</view>
			<view class="ykq-switch">
				<tn-button shape="icon" fontSize="44" fontColor="#FBBD12" shadow width="100rpx" height="100rpx" openType="share">
					<text class="tn-icon-share"></text>
				</tn-button>
			</view>
 
			<!-- 遥控器logo -->
			<view class="ykq-logo">MI</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				//是否开机
				isOpen:false,
				//温度
				wdNum:26,
			}
		},
		//1.发送给朋友
		onShareAppMessage(res) {
			return{
				title:"空调已开到"+this.wdNum+"°C,快进来吹空调吧~",
				path:'/pagesCss/css/kongTiao?wdNum='+this.wdNum+'&isOpen='+this.isOpen
			}
		},
		//2.分享到朋友圈
		onShareTimeline() {
			return{
				title:"空调已开到"+this.wdNum+"°C,快进来吹空调吧~",
			}
		},
		onLoad(e) {
			if(e.wdNum){
				this.wdNum = parseInt(e.wdNum) 
			}
			if(e.isOpen=="true"){
				this.isOpen = true
			}
		},
		methods: {
			//空调开关
			ktSwitch(){
				this.isOpen = !this.isOpen
				uni.vibrateShort()
			},
			//修改温度
			updateWd(value){
				this.wdNum += value
				uni.vibrateShort()
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.body{
		padding: 32rpx;
	}
	.kt {
		width: 100%;
		box-shadow: 0px 0px 10px 0px rgba(51, 51,51, 0.3);
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
 
	.kt-body {
		position: relative;
		width: 100%;
		height: 200rpx;
		background-color: #F0EFF2;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		.kt-logo{
			position: absolute;
			left: 60rpx;
			bottom: 30rpx;
			font-size: 32rpx;
			color: #9a9ea1;
			font-weight: 600;
		}
		.kt-screen{
			position: absolute;
			right: 50rpx;
			top: 100rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: #000;
			border-radius: 50%;
		}
		.kt-number{
			position: relative;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
		.kt-number-text{
			position: absolute;
			top: -8rpx;
			right: 6rpx;
			font-size: 12rpx;
			transform: scale(0.5);
		}
	}
 
	.kt-bottom {
		width: 100%;
		height: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border: 10rpx solid #e0dfe2;
		background-color: #9a9ea1;
		box-sizing: border-box;
	}
 
	.kt-bottom-main {
		position: relative;
		width: 560rpx;
		margin: 0 auto;
		height: 20rpx;
		background-color: #666;
		border-radius: 4rpx;
	}
 
	.kt-bottom-outlet {
		width: 556rpx;
		height: 18rpx;
		margin: 0 auto;
		background-color: #9a9ea1;
		border-radius: 4rpx;
		transform-origin: center top; 
	}
	.active{
		animation: openkt 2s ease forwards;
	}
	.unactive{
		transform: rotateX(90deg);
		animation: closekt 2s ease forwards;
	}
	@keyframes openkt {
		to{
			transform: rotateX(90deg);
		}
	}
	@keyframes closekt {
		to{
			transform: rotateX(0deg);
		}
	}
	
	.wind{
		width: 100%;
		height: 0px;
		display: flex;
		justify-content: space-evenly;
		transition-duration: 2s;
		.windItem{
			width: 8rpx;
			height: 100%;
			background-color: rgba(51, 51,51, 0.2);
			animation: dh 10s infinite;
		}
		@keyframes dh {
		  0% {
		    height: 80%;
		  }
		  50% {
		    height: 100%;
		  }
		  100% {
		    height: 80%;
		  }
		}
		.windItem:nth-child(1){
			transform: rotate(30deg);
			animation-duration:8s;
		}
		.windItem:nth-child(2){
			transform: rotate(15deg);
			animation-duration:6s;
		}
		.windItem:nth-child(4){
			transform: rotate(-15deg);
			animation-duration:6s;
		}
		.windItem:nth-child(5){
			transform: rotate(-30deg);
			animation-duration:8s;
		}
	}
	.showWind{
		height: 100px;
	}
	
	.ykq{
		position: fixed;
		bottom: 150rpx;
		left: 50%;
		transform: translate(-50%,0);
		padding: 64rpx 0;
		width: 300rpx;
		background-color: #f7f7f7;
		border-radius: 20rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(51, 51,51, 0.3);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.ykq-switch{
			width: 100%;
			text-align: center;
		}
		.ykq-logo{
			margin-top: 32rpx;
			font-size: 32rpx;
			color: rgba(51, 51,51, 0.7);
		}
	}
	
</style>

3、查看效果

微信小程序搜索“知遇工具箱”，可查看具体效果和更多内容。