js和css3實現的空調效果

admin發表於2017-04-15
JSCSSS3

分享一段程式碼例項，它利用js和css3實現的空調效果。

當然效果並不是太逼真，主要是用來進行js和css3相關知識的學習。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章