html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码

一款JS+CSS3交互式拖动滑块选择工资条代码，可以托工工资下面的滑块来实时改变工资的数值大小，除了数字变化的同时还有一个颜色的平滑变化，当数值到最大值时，有一个文字的摆动动画特效。

查看演示

下载资源：

9

次 下载资源

下载积分：

20

积分

页面的head部分，需设置好页面元素的样式，代码如下： 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);

}

}

页面的body部分，需设置好文字和滑块元素，代码如下：

你想要多少月收入？

$50,000/month

页面的底部，需设置好滑块拖动的事件响应，代码如下： 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;

}

` || ''}

`

}