js和css3实现的空调效果
分类：实例代码
分享一段代码实例，它利用js和css3实现的空调效果。
当然效果并不是太逼真，主要是用来进行js和css3相关知识的学习。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 400px;
height: 340px;
margin-top: 150px;
margin-left: 150px;
}
.main .container {
width: 300px;
height: 150px;
position: relative;
perspective: 150px;
}
.main .container .box {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.main .container .box figure {
display: block;
position: absolute;
}
.main .container .box .front {
width: 300px;
height: 150px;
background-color: rgba(255, 160, 122, .7);
}
.main .container .box .front h1 {
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
color: #FFF;
margin-left: 20px;
margin-top: 20px;
}
.main .container .box .front span {
width: 60px;
height: 30px;
line-height: 35px;
font-size: 20px;
color: #FFF;
text-align: center;
position: absolute;
top: 40px;
right: 30px;
background-color: rgba(95, 95, 95, 1);
display: inline-block;
border-radius: 5px;
}
.main .container .box .front .light-1 {
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #ceccc8;
position: absolute;
top: 85px;
right: 40px;
display: inline-block;
}
.main .container .box .front .light-2 {
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #ceccc8;
position: absolute;
top: 85px;
right: 60px;
display: inline-block;
}
.main .container .box .front .light-2.active {
background-color: #56FA0A;
box-shadow: 0 0 10px 1px #FFF;
}
.main .container .box .back {
width: 300px;
height: 150px;
transform: translateZ(-20px);
background-color: rgba(50, 50, 50, 1);
}
.main .container .box .right {
width: 20px;
height: 150px;
left: 290px;
transform: translateZ(-10px) rotateY(90deg);
background-color: rgba(254, 205, 82, .8);
}
.main .container .box .left {
width: 20px;
height: 150px;
left: -10px;
transform: translateZ(-10px) rotateY(-90deg);
background-color: rgba(254, 205, 82, .8);
}
.main .container .box .top {
width: 300px;
height: 20px;
top: -10px;
transform: translateZ(-10px) rotateX(90deg);
background-color: rgba(18, 20, 80, .8);
}
.main .container .box .bottom {
width: 300px;
height: 20px;
top: 140px;
transform: translateZ(-10px) rotateX(-90deg);
background-color: rgba(18, 20, 80, .8);
box-shadow: 40px -10px 30px 4px gray;
}
.main .container .box .div-1 {
width: 260px;
height: 10px;
position: absolute;
top: 110px;
left: 20px;
background-color: rgba(255, 255, 255, .8);
transform: translateZ(-5px) rotateX(90deg);
}
.main .container .box .div-1:nth-of-type(2) {
top: 120px;
}
.animate-cycle {
animation: cycle 12s linear infinite both;
}
@keyframes cycle {
0% {
transform: translateZ(-5px) rotateX(90deg);
}
25% {
transform: translateZ(-5px) rotateX(20deg);
}
50% {
transform: translateZ(-5px) rotateX(90deg);
}
75% {
transform: translateZ(-5px) rotateX(160deg);
}
100% {
transform: translateZ(-5px) rotateX(90deg);
}
}
.main .box-1 {
width: 80px;
height: 150px;
border: 1px solid #F57E0F;
margin-top: 20px;
margin-left: 20px;
background-color: #19e6f8;
}
.main .box-1 span {
width: 50px;
height: 25px;
background-color: #F57E0F;
color: #FFF;
display: block;
line-height: 25px;
text-align: center;
margin-top: 10px;
margin-left: 15px;
font-size: 14px;
cursor: pointer;
}
.main .box-1 span:hover {
background-color: #fcd05a;
}
</style>
<script>
window.onload = function() {
var getIdObject = function(id) {
return document.getElementById(id);
}
var openOrClose = getIdObject('openOrClose'),
add = getIdObject('add'),
reduce = getIdObject('reduce'),
wind = getIdObject('wind'),
num = getIdObject('num'),
light = getIdObject('light'),
div_1 = getIdObject('div_1'),
div_2 = getIdObject('div_2'),
windStatus = 0,
status = 0;
openOrClose.onclick = function() {
if (!status) {
status = 1;
light.className = 'light-2 active';
} else {
status = 0;
light.className = 'light-2';
windStatus = 0;
div_1.className = 'div-1';
div_2.className = 'div-1';
}
}
add.onclick = function() {
var numVal = parseInt(num.innerHTML);
if (!status || numVal >= 32) {
return;
} else {
num.innerHTML = ++numVal + ' oC';
}
}
reduce.onclick = function() {
var numVal = parseInt(num.innerHTML);
if (!status || numVal <= 16) {
return;
} else {
num.innerHTML = --numVal + ' oC';
}
}
wind.onclick = function() {
if (!status) return;
if (!windStatus) {
windStatus = 1;
div_1.className = 'div-1 animate-cycle';
div_2.className = 'div-1 animate-cycle';
} else {
windStatus = 0;
div_1.className = 'div-1';
div_2.className = 'div-1';
}
}
}
</script>
</head>
<body>
<div class="main">
<div class="container">
<div class="box">
<figure class="front">
<h1>GREE</h1>
<span id="num">18 oC</span>
<div class="light-1"></div>
<div class="light-2" id="light"></div>
</figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
<div class="div-1" id="div_1"></div>
<div class="div-1" id="div_2"></div>
</div><!--box-->
</div><!--container-->
<div class="box-1">
<span id="openOrClose">开/关</span>
<span id="add">＋</span>
<span id="reduce">－</span>
<span id="wind">风向</span>
</div><!--box-1-->
</div><!--main-->
</body>
</html>
js和css3实现的空调效果，这样的场景在实际项目中还是用的比较多的，关于js和css3实现的空调效果就介绍到这了。
js和css3实现的空调效果属于前端实例代码，有关更多实例代码大家可以查看。