jQuery UI 3D立体滑块特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI 3D立体滑块特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI 3D立体滑块特效</title>
<link rel='stylesheet prefetch' href='css/jquery-ui.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<article class="htmleaf-container">
	<section id="content">
	  <h1>你的预算是多少？</h1>
	  <div class="cube">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div id="slider-range-min"></div>
	  </div>
	  <input type="text" id="amount" />
	</section>
</article>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script>
$(function () {
	$('#slider-range-min').slider({
		range: 'min',
		value: 50,
		min: 0,
		max: 100,
		slide: function (event, ui) {
			$('#amount').val('$' + ui.value + ',000');
			$('.a, .b, .c, .d').width(ui.value + '%');
		}
	});
	$('.ui-slider-handle').text('<>');
	$('#amount').val('$' + $('#slider-range-min').slider('value') + ',000');
});

</script>
</body>
</html>

CSS代码(styles.css):

@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,900);@import url(http://fonts.useso.com/css?family=Anonymous+Pro);@import url(http://fonts.useso.com/css?family=Exo:300,800);*{margin:0px;padding:0px;}
.cube{position:relative;width:500px;height:60px;margin:5rem auto;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;}
/* positions */
.a,.b,.c,.d{position:absolute;width:50%;height:100%;left:0px;z-index:222;}
.a:before,.b:before,.c:before,.d:before,.a:after,.b:after{content:'';position:absolute;top:0px;left:0px;width:500px;height:60px;}
.a:before,.b:before,.c:before,.d:before{z-index:111;}
.a:after,.b:after{z-index:333;}
.b{top:0px;-webkit-transform:rotateX(75deg) translateY(-60px);-moz-transform:rotateX(75deg) translateY(-60px);-o-transform:rotateX(75deg) translateY(-60px);-ms-transform:rotateX(75deg) translateY(-60px);transform:rotateX(75deg) translateY(-60px);-webkit-transform-origin:0% 0%;-moz-transform-origin:0% 0%;-o-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;}
.c{top:0px;-webkit-transform:rotateX(75deg);-moz-transform:rotateX(75deg);-o-transform:rotateX(75deg);-ms-transform:rotateX(75deg);transform:rotateX(75deg);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;}
.d{-webkit-transform:translateZ(-60px) translateY(-15px);-moz-transform:translateZ(-60px) translateY(-15px);-o-transform:translateZ(-60px) translateY(-15px);-ms-transform:translateZ(-60px) translateY(-15px);transform:translateZ(-60px) translateY(-15px);}
/* colors */
.a,.b{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(116,198,43,0.8)),to(rgba(116,198,43,0.8)));background-image:-webkit-linear-gradient(top,rgba(116,198,43,0.8),rgba(116,198,43,0.8));background-image:-moz-linear-gradient(top,rgba(116,198,43,0.8),rgba(116,198,43,0.8));background-image:-o-linear-gradient(top,rgba(116,198,43,0.8),rgba(116,198,43,0.8));background-image:linear-gradient(to bottom,rgba(116,198,43,0.8),rgba(116,198,43,0.8));background-repeat:no-repeat;background-size:100% 100%;background-position:0% 0%;}
.c,.d{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(116,198,43,0.5)),to(rgba(116,198,43,0.5)));background-image:-webkit-linear-gradient(top,rgba(116,198,43,0.5),rgba(116,198,43,0.5));background-image:-moz-linear-gradient(top,rgba(116,198,43,0.5),rgba(116,198,43,0.5));background-image:-o-linear-gradient(top,rgba(116,198,43,0.5),rgba(116,198,43,0.5));background-image:linear-gradient(to bottom,rgba(116,198,43,0.5),rgba(116,198,43,0.5));background-repeat:no-repeat;background-size:100% 100%;background-position:0% 0%;}
.c:before{-webkit-box-shadow:0px 30px 20px -20px rgba(0,0,0,0.4),0px 40px 15px -15px rgba(0,0,0,0.25);-moz-box-shadow:0px 30px 20px -20px rgba(0,0,0,0.4),0px 40px 15px -15px rgba(0,0,0,0.25);box-shadow:0px 30px 20px -20px rgba(0,0,0,0.4),0px 40px 15px -15px rgba(0,0,0,0.25);}
.a:before,.b:before,.c:before,.d:before{background-color:rgba(0,0,0,0.05);}
.a:after{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.07)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.07),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.07),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,0.07),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,0.07),rgba(0,0,0,0));}
.b:after{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.1)),to(rgba(255,255,255,0.25)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.1),rgba(255,255,255,0.25));background-image:-moz-linear-gradient(top,rgba(255,255,255,0.1),rgba(255,255,255,0.25));background-image:-o-linear-gradient(top,rgba(255,255,255,0.1),rgba(255,255,255,0.25));background-image:linear-gradient(to bottom,rgba(255,255,255,0.1),rgba(255,255,255,0.25));}
/* jQuery stuff */
#slider-range-min{position:absolute;width:94%;left:3%;top:27px;margin:0px;z-index:999;}
.ui-slider{height:5px;border:none;background:rgba(0,0,0,0.1);-webkit-box-shadow:0px 2px 2px rgba(255,255,255,0.25),inset 0px 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0px 2px 2px rgba(255,255,255,0.25),inset 0px 1px 3px rgba(0,0,0,0.3);box-shadow:0px 2px 2px rgba(255,255,255,0.25),inset 0px 1px 3px rgba(0,0,0,0.3);}
.ui-slider:before,.ui-slider:after{content:'IIIIIIIIIII';position:absolute;left:2px;width:100%;font-family:'Source Sans Pro',sans-serif;font-size:1.2rem;font-weight:300;color:rgba(0,0,0,0.3);letter-spacing:41px;text-shadow:1px 1px 0px rgba(255,255,255,0.2);}
.ui-slider:before{top:-1.4rem;}
.ui-slider:after{bottom:-1.4rem;}
.ui-slider-range{background:transparent;}
.ui-slider .ui-slider-handle{top:-8px;width:26px;height:20px;margin-left:-15px;padding-left:4px;border:none;background:rgba(255,255,255,0.7);border-radius:2px;text-align:center;font-family:'Anonymous Pro',sans-serif;font-size:1.2rem;line-height:20px;color:rgba(0,0,0,0.5);text-decoration:none;letter-spacing:3px;cursor:pointer;text-shadow:1px 1px 2px rgba(255,255,255,1);-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-moz-box-shadow:1px 1px 8px rgba(0,0,0,0.3);box-shadow:1px 1px 8px rgba(0,0,0,0.3);}
.ui-slider .ui-slider-handle:focus{outline:none;}
/* typo */
h1{font-size:2.7rem;font-weight:200;color:rgba(0,0,0,0.6);text-shadow:1px 1px 0px rgba(255,255,255,0.3);}
p{font-size:1.2rem;font-weight:300;line-height:1.8rem;color:rgba(0,0,0,0.8);}
.credits a{position:relative;display:inline-block;color:#529e0e;text-decoration:none;}
.credits a:after{content:'';position:absolute;left:-1.5%;bottom:-1px;width:0%;height:1px;background:#529e0e;-webkit-transition:width 0.1s;-moz-transition:width 0.1s;-o-transition:width 0.1s;transition:width 0.1s;}
.credits a:hover::after{width:103%;}
#amount{position:relative;display:inline-block;padding-bottom:5rem;text-align:center;font-family:'Exo',sans-serif;font-weight:800;font-size:4rem;color:#529e0e;background:transparent;border:none;}
#amount:focus{outline:none;}
/* base */
#content{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding-top:5rem;text-align:center;}
html,body{height:100%;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.08)),to(rgba(0,0,0,0.05)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.08),rgba(0,0,0,0.05));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.08),rgba(0,0,0,0.05));background-image:-o-linear-gradient(top,rgba(0,0,0,0.08),rgba(0,0,0,0.05));background-image:linear-gradient(to bottom,rgba(0,0,0,0.08),rgba(0,0,0,0.05));background-repeat:no-repeat;background-size:100% 100%;background-position:0% 0%;font-family:'Source Sans Pro',sans-serif;}

附件:下载该文件资源,减少时间成本(增值服务)