CSS3动态改变滑杆数值代码CSS3动态改变滑杆数值代码是一款很酷的CSS3滑杆控件，这款滑杆空间的外观是自定义的，鼠标滑过滑杆时，滑杆的触点会出现渐变的背景颜色。同时，这款CSS3滑杆还支持动态改变滑杆的数值，这款滑杆控件可以应用在数值控制的应用上。CSS3滑杆自定义鼠标滑过
<style>
@import url(http://fonts.googleapis.com/css?family=Dosis:700);
body {
font-family: "Dosis", Helvetica, Arial, sans-serif;
background: #ecf0f1;
color: #34495e;
padding-top: 40px;
text-shadow: white 1px 1px 1px;
}
.value {
border-bottom: 4px dashed #bdc3c7;
text-align: center;
font-weight: bold;
font-size: 10em;
width: 300px;
height: 100px;
line-height: 60px;
margin: 40px auto;
letter-spacing: -0.07em;
text-shadow: white 2px 2px 2px;
}
input[type="range"] {
display: block;
-webkit-appearance: none;
background-color: #bdc3c7;
width: 300px;
height: 5px;
border-radius: 5px;
margin: 0 auto;
outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #e74c3c;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
transition: 0.3s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: white;
border: 2px solid #e74c3c;
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.6);
}
</style>
CSS3动态改变滑杆数值代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/css3texiao/8417.html
源码搜藏承诺：本站所有资源无病毒，无弹窗，无干扰链接！
下一篇：CSS3实现自定义聊天窗口
CSS3制作3D图片立方体旋转特效
jQuery+CSS3遮罩弹出层动画代码
CSS3鼠标滑过tip提示框动画特效
jQuery和CSS3添加到购物车特效
CSS3绘制各种图形图标样式特效