<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现拖动拉开序幕特效</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #151515; } div { position: relative; } #rangeValue { position: relative; display: block; font-size: 6em; color: rgba(0, 0, 0, 0.8); z-index: 2; text-align: center; } #rangeValue::after { content: '%'; } #fillRangeValue { position: fixed; top: 0; left: 0; height: 100%; width: 0; background: #00adff; z-index: 1; } .range { position: relative; width: 400px; height: 15px; -webkit-appearance: none; background: rgba(0, 0, 0, 0.8); outline: none; border-radius: 15px; box-shadow: 0 0 0 2px #151515, inset 0 0 5px #000; z-index: 2; overflow: hidden; } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #00adff; border: 4px solid #222; z-index: 2; box-shadow: -407px 0 0 400px #00adff; } </style></head><body> <div> <h2 id="rangeValue"></h2> <div id="fillRangeValue"></div> <input type="range" class="range" value="0" min="0" max="100" onmousemove="rangeSlider(this.value)" onchange="rangeSlider(this.value)"> </div> <script> function rangeSlider(value) { document.getElementById('rangeValue').innerHTML = value document.getElementById('fillRangeValue').style.width = `${value}%` } </script></body></html>
JS实现拖动拉开序幕特效
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
CSS 3.0实现水滴加载特效
下一篇:
CSS 3.0实现泡泡特效