JS-in-CSS响应滑块

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #eee;
  text-align: center;
  font-family: 'Lato', sans-serif;
}
h1 {
  color: #666;
  font-size: 4vw;
}
#text {
  display: block;
  text-align: center;
  font-size: 10vw;
  font-weight: 900;
  margin: 5px auto 15px auto;
  transition: color .1s ease-in-out;
  color: #fff;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               rgba(0,0,0,.1) 0 6px 1px,
               rgba(0,0,0,.1) 0 0 5px,
               rgba(0,0,0,.3) 0 1px 3px,
               rgba(0,0,0,.2) 0 3px 5px,
               rgba(0,0,0,.25) 0 5px 10px,
               rgba(0,0,0,.2) 0 10px 10px,
               rgba(0,0,0,.15) 0 20px 20px;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

@keyframes wiggle {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
    transform: scale3d(.95,.95,.95) rotate3d(0,0,1,-3deg);
  }
  30%, 50%, 70g, 90% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    -ms-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    -ms-transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-3deg);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
}

JavaScript

var input = document.querySelector('[type=range]')

input.addEventListener('input', function(e) {
  var text = document.getElementById('text')
  text.innerHTML = '$' + this.value + ',000/month'
  JSinCSS()
})

window.addEventListener('load', JSinCSS)
window.addEventListener('resize', JSinCSS)
window.addEventListener('input', JSinCSS)
window.addEventListener('click', JSinCSS)

function JSinCSS() {

var tag = document.querySelector('#JSinCSS')

if (!tag) {

tag = document.createElement('style')
    tag.id = 'JSinCSS'
    document.head.appendChild(tag)

}

tag.innerHTML = `

${slider.value < 10 && `
      #text {
        color: #efe;
        text-shadow:
          0 1px 0 #bcb,
          0 2px 0 #b4c4b4,
          0 3px 0 #aba,
          0 4px 0 #a4b4a4,
          0 5px 0 #9a9,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

${10 <= slider.value && `
      #text {
        color: #cfc;
        text-shadow:
          0 1px 0 #bcb,
          0 2px 0 #b4c4b4,
          0 3px 0 #aba,
          0 4px 0 #a4b4a4,
          0 5px 0 #9a9,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

${20 <= slider.value && `
      #text {
        color: #afa;
        text-shadow:
          0 1px 0 #78cc78,
          0 2px 0 #70c470,
          0 3px 0 #68bb68,
          0 4px 0 #60b460,
          0 5px 0 #58aa58,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

${30 <= slider.value && `
      #text {
        color: #9f9;
        text-shadow:
          0 1px 0 #6c6,
          0 2px 0 #60c460,
          0 3px 0 #56bb56,
          0 4px 0 #50b450,
          0 5px 0 #46aa46,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

${40 <= slider.value && `
      #text {
        color: #77ff77;
        text-shadow:
          0 1px 0 #3bcc3b,
          0 2px 0 #34c434,
          0 3px 0 #2bbb2b,
          0 4px 0 #24b424,
          0 5px 0 #1baa1b,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
      }
    ` || ''}

${slider.value == 50 && `
      #text {
        color: #fe0;
        text-shadow:
          0 1px 0 #ccbb00,
          0 2px 0 #c9b900,
          0 3px 0 #bbaa00,
          0 4px 0 #b9a900,
          0 5px 0 #aa9900,
          rgba(0,0,0,.1) 0 6px 1px,
          rgba(0,0,0,.1) 0 0 5px,
          rgba(0,0,0,.3) 0 1px 3px,
          rgba(0,0,0,.2) 0 3px 5px,
          rgba(0,0,0,.25) 0 5px 10px,
          rgba(0,0,0,.2) 0 10px 10px,
          rgba(0,0,0,.15) 0 20px 20px
        ;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: wiggle;
        animation-name: wiggle;
      }
    ` || ''}

}

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