gzwnzss 發表於 2021-2-7 21:15:34

纯css滚动进度条，横向进度条随着页面滚动而变化

效果如下：<br /><img title="240317077s.png" id="aimg_10196" aid="10196" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202102/07/211341hm6zmelfembbz363.png" src="https://www.dismall.com/data/attachment/forum/202102/07/211341hm6zmelfembbz363.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="300" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br />鼠标往下移动就会变化<br /><ol><li>&nbsp; &nbsp; &lt;style&gt;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;body {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;background-image: linear-gradient(to top right, #32a6ff 50%, #fff 50%);<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;background-size: 100% calc(100% - 100vh + 5px);<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;background-repeat: no-repeat;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br /><li><br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;body::after {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; content: '';<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; position: fixed;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; top: 3px;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; bottom: 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; left: 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; right: 0;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; background: #fff;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; z-index: -1;<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;}<br /><li>&nbsp; &nbsp; &lt;/style&gt;</ol><br /><br />变化<em>, </em>滚动<em>, </em>进度<em>, </em>效果<em>, </em>如下
頁: [1]
查看完整版本: 纯css滚动进度条，横向进度条随着页面滚动而变化