给大家分享一个用原生JS实现的拖动拉开序幕特效，效果如下：
以下是代码实现，欢迎大家复制粘贴和收藏。
<!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;}#percent {position: relative;display: block;font-size: 6em;color: rgba(0, 0, 0, 0.8);z-index: 2;text-align: center;}#percent::after {content: '%';}#wall {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="percent"></h2><div id="wall"></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('percent').innerHTML = valuedocument.getElementById('wall').style.width = `${value}%`}</script></body></html>
如果觉得《原生JS实现拖动拉开序幕特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
