<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5和CSS3实现的自定义3D滑杆</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> <b>3D</b> 滑块</h1> <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="101" value="64" /> </main> <p>Simple Range</p> <main class="perspective" id="second-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="101" value="37" /> </main> <p>Patterned Range</p> <main class="perspective" id="third-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> <div class="indicator">89%</div> </section> <input class="bar-input" type="range" min="0" max="100" value="89" /> </main> <p class="third-bar-p">Gradient Range with Indicator</p> <script src="index.js"></script> </body> </html>
HTML5和CSS3实现的自定义3D滑杆
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
HTML5 Emoji自定义表情编辑器
下一篇：
CSS3和SVG实现的圆环菜单动画