純CSS實(shí)現(xiàn)進(jìn)度條滾動(dòng)效果，不可思議！

2013-05-28    分類： 網(wǎng)站建設(shè)

如何實(shí)現(xiàn)網(wǎng)頁(yè)頂部展現(xiàn)的滾動(dòng)進(jìn)度條隨著頁(yè)面的滾動(dòng)進(jìn)度而變化長(zhǎng)短這樣的效果？很多網(wǎng)站制作開發(fā)人員看到這樣的效果時(shí)，第一反應(yīng)就是借助Javascript，但是這樣簡(jiǎn)單的效果用JS來(lái)實(shí)現(xiàn)是很麻煩的，我們可以用CSS來(lái)實(shí)現(xiàn)以下進(jìn)度條的滾動(dòng)效果。

首先，拿的這樣的效果時(shí)，我們要先分析需求，考慮一個(gè)問(wèn)題，如何得知用戶當(dāng)前滾動(dòng)頁(yè)面的距離并且通知頂部進(jìn)度條？正常分析應(yīng)該是這樣的，但是這就陷入了傳統(tǒng)的思維。進(jìn)度條就只是進(jìn)度條，接收頁(yè)面滾動(dòng)距離，改變寬度。如果頁(yè)面滾動(dòng)和進(jìn)度條是一個(gè)整體呢？

假設(shè)我們的頁(yè)面被包裹在 <body> 中，可以滾動(dòng)的是整個(gè) body，給它添加這樣一個(gè)從左下到到右上角的線性漸變：

body {

background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%)；

background-repeat: no-repeat;}

那么，我們可以得到一個(gè)這樣的效果：

黃色塊的顏色變化其實(shí)已經(jīng)很能表達(dá)整體的進(jìn)度了。接下來(lái)我們運(yùn)用一個(gè)偽元素，把多出來(lái)的部分遮住：

body::after {

content: "";

position: fixed;

top: 5px;

left: 0;

bottom: 0;

right: 0;

background: #fff;

z-index: -1;}

這樣一來(lái)，進(jìn)度條的滾動(dòng)效果大致就已經(jīng)完成了。用純CSS來(lái)實(shí)現(xiàn)進(jìn)度條效果，可以說(shuō)是很秀的了。

網(wǎng)站標(biāo)題：純CSS實(shí)現(xiàn)進(jìn)度條滾動(dòng)效果，不可思議！
分享鏈接：http://muchs.cn/news12/812.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化

網(wǎng)站建設(shè)知識(shí)