CSS温控器

下载代码

html

css

分享到微信朋友圈

html

css

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  background: #fdfdfd;
  font-family: 'Open Sans', sans-serif;
}

.center_radius, .thermostat, .thermostat .bar, .thermostat .center, .thermostat .center .small {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
}

.thermostat {
  position: absolute;
  width: 400px;
  height: 400px;
  background: #6D697F;
  box-shadow: inset 0px -6px 1px 2px rgba(0, 0, 0, 0.35), 0px 7px 40px 11px rgba(84, 81, 97, 0.4);
}
.thermostat:hover .number {
  opacity: 1;
}
.thermostat .shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateZ(10deg);
          transform: translate(-50%, -50%) rotateZ(10deg);
  width: 25px;
  height: 86%;
  text-align: center;
  -webkit-transition: 0.7s ease;
  transition: 0.7s ease;
  -webkit-animation: shadow 1.4s ease-out both;
          animation: shadow 1.4s ease-out both;
}
.thermostat .shadow .shadow-cube {
  position: absolute;
  top: 0;
  width: 25px;
  height: 0px;
  box-shadow: 0 0 45px 13px rgba(255, 158, 35, 0.5);
}
.thermostat .number {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateZ(10deg);
          transform: translate(-50%, -50%) rotateZ(10deg);
  width: 40px;
  height: 82%;
  text-align: center;
  -webkit-transition: 0.7s ease;
  transition: 0.7s ease;
  opacity: 0;
}
.thermostat .number .ext {
  font-size: 16px;
  color: white;
  font-weight: 1000;
  text-shadow: 1px 3px 3px #302e38;
}
.thermostat .bar {
  position: absolute;
  width: 356px;
  height: 356px;
}
.thermostat .bar .inner_bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 344px;
  height: 344px;
  margin-left: -172px;
  margin-top: -172px;
  border-radius: 100%;
  background-color: #6D697F;
  z-index: 4;
}
.thermostat .bar .inner_bar:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 70px solid transparent;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 150px solid #6D697F;
  bottom: -7px;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
}
.thermostat .bar .hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 356px, 356px, 178px);
  border-radius: 100%;
  background-color: #3a3749;
}
.thermostat .bar .fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 178px, 356px, 0px);
}
.thermostat .bar .fill1 {
  background: -webkit-linear-gradient(top, #FF4900 20%, #FF4900 100%);
}
.thermostat .bar .fill2 {
  background: -webkit-linear-gradient(top, #FF4900 40%, #FF9E23 100%);
}
.thermostat .bar .right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.thermostat .bar .right .fill {
  z-index: 3;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-animation: right 1s linear both;
          animation: right 1s linear both;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.thermostat .bar .left .fill {
  z-index: 1;
  -webkit-animation: left 0.3s linear both;
          animation: left 0.3s linear both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.thermostat .bar span {
  width: 356px;
  font-weight: 800;
  position: absolute;
  bottom: 0px;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  color: #2e2c3a;
  z-index: 10;
}
.thermostat .center {
  position: absolute;
  width: 260px;
  height: 260px;
  background: #e3e4ed;
  -webkit-animation: bound-in 0.6s ease forwards;
          animation: bound-in 0.6s ease forwards;
}
.thermostat .center:hover .arrow {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.thermostat .center:hover .minus {
  left: 10px;
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}
.thermostat .center:hover .plus {
  right: 45px;
  -webkit-transition: right 0.3s ease-out;
  transition: right 0.3s ease-out;
}
.thermostat .center span i {
  position: absolute;
  color: #b9b6c8;
  font-size: 40px;
  font-weight: 500;
  line-height: 260px;
}
.thermostat .center .arrow {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  cursor: pointer;
}
.thermostat .center .minus {
  position: absolute;
  -webkit-animation: arrow-left 1s forwards;
          animation: arrow-left 1s forwards;
}
.thermostat .center .plus {
  position: absolute;
  -webkit-animation: arrow-right 1s forwards;
          animation: arrow-right 1s forwards;
}
.thermostat .center .small {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #F8F9FA;
  text-align: center;
  -webkit-animation: bound-in-small 0.6s ease forwards;
          animation: bound-in-small 0.6s ease forwards;
}
.thermostat .center .small .heat {
  line-height: 150px;
  font-size: 59px;
  color: #57545f;
  font-weight: 300;
}
.thermostat .center .small .heat:after {
  content: '°';
  display: block;
  position: absolute;
  font-size: 40px;
  top: -20px;
  right: 30px;
}

@-webkit-keyframes shadow {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(-190deg);
            transform: translate(-50%, -50%) rotate(-190deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
}
@-webkit-keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@-webkit-keyframes bound-in {
  10% {
    box-shadow: 0px 7px 30px 5px rgba(96, 93, 111, 0.25);
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  80% {
    -webkit-transform: translate(-50%, -50%) scale(1.03);
            transform: translate(-50%, -50%) scale(1.03);
  }
  100% {
    box-shadow: 0px 15px 35px 11px rgba(46, 44, 58, 0.6);
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes bound-in-small {
  0% {
    box-shadow: 0px 5px 10px 5px rgba(96, 93, 111, 0.19);
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  80% {
    -webkit-transform: translate(-50%, -50%) scale(1.03);
            transform: translate(-50%, -50%) scale(1.03);
  }
  100% {
    box-shadow: 0px 15px 35px 5px rgba(96, 93, 111, 0.3);
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes arrow-left {
  0% {
    left: 45px;
    opacity: 0;
  }
  100% {
    left: 10px;
    opacity: 1;
  }
}
@-webkit-keyframes arrow-right {
  0% {
    right: 75px;
    opacity: 0;
  }
  100% {
    right: 45px;
    opacity: 1;
  }
}

JavaScript

var gradi = 19;
var max = 34;
var min = 2;

function updateGr(){
  $(".heat").text("" + gradi);
  $(".ext").text("" + gradi);
  $(".number").css("transform", "translate(-50%, -50%) rotate("+ (-180 + gradi * 10)+"deg)");
  $(".shadow").css("transform", "translate(-50%, -50%) rotate("+ (-180 + gradi * 10)+"deg)");
  $(".fill").css("animation", "none");
  $(".shadow").css("animation", "none");
}

$(".minus").mousedown(function(){ 
  if(gradi > min){
    gradi--;
    updateGr();
    if(gradi >= 18){
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "0s");
    }else if(gradi == 17){
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0.5s");  
    }else{
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0s");
    }
  }
});

$(".plus").mousedown(function(){
  if(gradi < max){
    gradi++;
    updateGr();
    if(gradi > 19){
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "0s");
    }else if(gradi == 19){
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "1s"); 
    }else{
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0s");
    }
  }  
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg