<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<div class="main">
<div class="container">
<div class="box">
<figure class="front">
<h1>GREE</h1>
<span id="num">18 ºC</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-->
<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 + ' ºC';
}
}
reduce.onclick = function(){
var numVal = parseInt(num.innerHTML);
if(!status || numVal <= 16){
return;
}else{
num.innerHTML = --numVal + ' ºC';
}
}
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>
</body>
</html>

CSS3简单的空调的更多相关文章

  1. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  2. [原创]css3简单几步画一个乾坤图

    效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;bo ...

  3. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  4. css3简单介绍

    关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"]  选择属性中以a开头的元素: E[alt$="a"]  选 ...

  5. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  6. H5+CSS3简单动画 知识点 汇总

    乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...

  7. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  8. css3 简单动画

    <script> <!-- var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementB ...

  9. CSS3简单的栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. __block存储类型

    __block存储类型 你可以指定引入一个变量为可更改的,即读-写的,通过应用__block 存储类型修饰符.局部变量的__block 的存储和 register.auto.static 等存储类型相 ...

  2. go程序性能优化

    性能优化总结: 1 尽量避免频繁创建对象,即减少&{},new,make的使用2 数组可当切片用,当需要使用切片时,可考虑能使用数组来减少切片的创建3 当某类临时对象被多个协频繁程使用时,可用 ...

  3. 转： 静态模式makefile中$(cobjs): $(obj)/%.o: $(src)/%.c

    4.12 静态模式静态模式规则是这样一个规则:规则存在多个目标,并且不同的目标可以根据目标文件的名字来自动构造出依赖文件.静态模式规则比多目标规则更通用,它不需要多个目标具有相同的依赖.但是静态模式规 ...

  4. tail tailf 使用

    tail -f tailf 用来查看日志的新增内容, tailf 能一直打印日志

  5. GIT,VAGRANT及COREOS

    搞了COREOS才高大上啊. 测试DOCKER安装. 就是WIN下面GIT显得土豪..

  6. 转：阿里旺旺导致python安装包失败的解决办法

    我以前使用web.py没事,今天运行时报错, mimetypes.init() # try to read system mime.types File "D:\ProgramFiles\p ...

  7. bzoj1135

    POI阴影又发作了但这道题挺好的,比较涨知识裸的想法是裸的每次二分图匹配,但显然会TLE这里就要引入Hall定理:二分图G中的两部分顶点组成的集合分别为X, Y, X={X1, X2, X3,X4,. ...

  8. hiho #1044 : 状态压缩·一

    描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车前往下一座城市——那座城市即将举行美食节! 但是不幸的是,小Hi和小Ho并没有能够买到很好的火车票—— ...

  9. JDK安装配置与升级

    一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1. 首先查看系统自带的JDK版本: [root@linux ~]# ...

  10. 数学计数原理（Pólya，高精度）：SGU 294 He's Circles

      He's Circles He wrote n letters "X" and "E" in a circle. He thought that there ...