基于jQueryUI的炫酷3D立体滑块特效

PetitQ 其他代码 2018-11-11 1.52K 0 0

这是一款基于 jQueryUI 的炫酷 3D 立体滑块特效。该滑块使用 CSS3 制作为带阴影效果的立体形状，滑块的拖动是通过 jQueryUI 来实现，在滑块拖动的时候，还可以显示联动的数值，效果非常不错。

HTML 结构

该滑块的 HTML 结构非常简单，实际上就是一个 3D 立方体。a、b、c、d 分别为立方体的左右和上前 4 个面，div.slider-range-min 是滑块的凹槽。实际的滑块是一个<input>元素。

也想出现在这里？联系我们吧

```
<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>
```

CSS 样式

立方体的基本样式如下：

```
.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;
```
```
}
```
```
/* 定位 */
```
```
.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);

```
}
```

然后分别为每个面设置颜色。接着设置滑块的一些样式：

```
#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;
```
```
}
```

Javascript

在 jQuery 代码中使用 jQueryUI 的 slider()方法来制作滑块。并使数值和滑块进行联动。

```
$(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');

```
  });
```

基于 jQueryUI 的炫酷 3D 立体滑块特效

已有 380 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

基于jQueryUI的炫酷3D立体滑块特效

HTML 结构

CSS 样式

Javascript

基于 jQueryUI 的炫酷 3D 立体滑块特效

相关文章

EZView - 图片PDF文件预览jquery插件

HTML5炫酷光粒子动画特效

CSS剪裁GIF背景图片动画特效

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

Javascript

基于 jQueryUI 的炫酷 3D 立体滑块特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复