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;
}
` || ''}
`
}
html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码相关推荐
- node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...
- CSS文本样式和CSS3文本效果以及背景
CSS文本样式 text-indent属性 text-indent属性可以为特定选项的文本进行首行缩进,取值可以是长度值或百分比,它的属性值通常使用em作为单位,text-indent: 2em;表示 ...
- 3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
- html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下. 首先要和大家分享的是,如何使用div+css创建三角形.在这里我先把相关代码粘贴出来,然后再为大家讲解原理 ...
- js修改css hover样式,JS实现css hover操作的方法示例
JS实现css hover操作的方法示例 发布时间:2020-09-01 14:46:32 来源:脚本之家 阅读:118 作者:谢玉胜 本文实例讲述了JS实现css hover操作的方法.分享给大家供 ...
- css 3d魔方源代码,CSS3 3D环境实现立体 魔方效果代码(示例代码)
魔方 section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspectiv ...
- 用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...
- css 默认样式初始化
1.css reset:这个是我们在做项目时比较常用的一套css初始化样式,在这里就直接给出代码了 html, body, div, span, applet, object, iframe, h1, ...
- jquery 图像滑块_jQuery CSS图像滑块–自行编写代码
jquery 图像滑块 Today we will learn how to make our own jQuery image slider. This Article is a part of & ...
最新文章
- R语言plotly可视化:plotly可视化多个直方图、通过bingroup参数设置多个直方图使用相同的bins设置(Share bins between histograms)
- SLAM: 图像角点检测的Fast算法(OpenCV文档)
- python自动寻路模板_Python实现的简单模板引擎功能示例
- PHP程序员最易犯10种错误
- 机器学习实战6-sklearn训练决策树实现分类和回归
- 查找字符串前缀python_python-从一组(相似)字符串中确定前缀
- python list转dict
- redis并发锁 thinkphp5_资深架构师经典总结:Redis分布式锁实现理解
- android 底部导航总结
- TLS(Thread Local Storage)问题demo
- RenderSettings 渲染设置
- TwinCAT与台达伺服驱动器连接调试控制电机正反转
- 按头安利 好看又实用的冰淇淋VRay材质球素材看这里
- 基于android的共享车位app
- 为什么使用非线性激活函数?常见的非线性激活函数及优缺点对比
- STM32+光敏模块
- 通孔的作用是什么linux,转载:PCB名詞解釋:通孔、盲孔、埋孔
- SSM框架上传文件并不刷新页面,并预览图片
- Lua环境搭建 Win10
- linux 批量查找关键词,Linux上批量查找文件里面带的关键字(grep 关键字的用法)