直播app开发，加载时采用序幕从左向右拉开的效果

<!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>原生JS实现拖动拉开序幕特效</title><br>    <style><br>        * {<br>            margin: 0;<br>            padding: 0;<br>            box-sizing: border-box;<br>        }<br> <br>        body {<br>            display: flex;<br>            align-items: center;<br>            justify-content: center;<br>            min-height: 100vh;<br>            background: #151515;<br>        }<br> <br>        div {<br>            position: relative;<br>        }<br> <br>        #rangeValue {<br>            position: relative;<br>            display: block;<br>            font-size: 6em;<br>            color: rgba(0, 0, 0, 0.8);<br>            z-index: 2;<br>            text-align: center;<br>        }<br> <br>        #rangeValue::after {<br>            content: '%';<br>        }<br> <br>        #fillRangeValue {<br>            position: fixed;<br>            top: 0;<br>            left: 0;<br>            height: 100%;<br>            width: 0;<br>            background: #00adff;<br>            z-index: 1;<br>        }<br> <br>        .range {<br>            position: relative;<br>            width: 400px;<br>            height: 15px;<br>            -webkit-appearance: none;<br>            background: rgba(0, 0, 0, 0.8);<br>            outline: none;<br>            border-radius: 15px;<br>            box-shadow: 0 0 0 2px #151515, inset 0 0 5px #000;<br>            z-index: 2;<br>            overflow: hidden;<br>        }<br> <br>        .range::-webkit-slider-thumb {<br>            -webkit-appearance: none;<br>            width: 15px;<br>            height: 15px;<br>            border-radius: 50%;<br>            background: #00adff;<br>            border: 4px solid #222;<br>            z-index: 2;<br>            box-shadow: -407px 0 0 400px #00adff;<br>        }<br>    </style><br></head><br> <br><body><br>    <div><br>        <h2 id="rangeValue"></h2><br>        <div id="fillRangeValue"></div><br>        <input type="range" value="0" min="0" max="100" onmousemove="rangeSlider(this.value)"<br>            onchange="rangeSlider(this.value)"><br>    </div><br>    <script><br>        function rangeSlider(value) {<br>            document.getElementById('rangeValue').innerHTML = value<br>            document.getElementById('fillRangeValue').style.width = `${value}%`<br>        }<br>    </script><br></body><br> <br></html>