2013-05-28 分類: 網(wǎng)站建設(shè)
如何實現(xiàn)網(wǎng)頁頂部展現(xiàn)的滾動進度條隨著頁面的滾動進度而變化長短這樣的效果?很多網(wǎng)站制作開發(fā)人員看到這樣的效果時,第一反應就是借助Javascript,但是這樣簡單的效果用JS來實現(xiàn)是很麻煩的,我們可以用CSS來實現(xiàn)以下進度條的滾動效果。
首先,拿的這樣的效果時,我們要先分析需求,考慮一個問題,如何得知用戶當前滾動頁面的距離并且通知頂部進度條?正常分析應該是這樣的,但是這就陷入了傳統(tǒng)的思維。進度條就只是進度條,接收頁面滾動距離,改變寬度。如果頁面滾動和進度條是一個整體呢?
假設(shè)我們的頁面被包裹在
中,可以滾動的是整個 body,給它添加這樣一個從左下到到右上角的線性漸變:body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-repeat: no-repeat;}
那么,我們可以得到一個這樣的效果:
黃色塊的顏色變化其實已經(jīng)很能表達整體的進度了。接下來我們運用一個偽元素,把多出來的部分遮住:
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;}
這樣一來,進度條的滾動效果大致就已經(jīng)完成了。用純CSS來實現(xiàn)進度條效果,可以說是很秀的了。
當前標題:純CSS實現(xiàn)進度條滾動效果,不可思議!
標題網(wǎng)址:http://redsoil1982.com.cn/news/812.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號、網(wǎng)站建設(shè)、外貿(mào)建站、手機網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容