HTML5和CSS3实现的自定义3D滑块控件

2020-01-16 17:40:43 滑块

滑块(slider)这种控件一般用在范围选取上面,比如结合图表生成一定范围的数据。今天我们分享的这个滑杆控件自定义程度非常高,特别是使用了CSS3的3D特性,让整一个滑块控件效果更加炫酷。

使用方法:
引入css

<link rel="stylesheet" href="css/style.css">

尾部引入js

<script  src="js/index.js"></script>

调用HTML

<main class="perspective" id="first-bar">
  <section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
  </section>
  <input class="bar-input" type="range" min="0" max="100" value="64" />
</main>
  • 上一篇:没有了
  • 下一篇:没有了

评论