中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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

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

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

假設(shè)我們的頁面被包裹在 中,可以滾動(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)度了。接下來我們運(yùn)用一個(gè)偽元素,把多出來的部分遮?。?

body::after {

content: "";

position: fixed;

top: 5px;

left: 0;

bottom: 0;

right: 0;

background: #fff;

z-index: -1;}

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

當(dāng)前標(biāo)題:純CSS實(shí)現(xiàn)進(jìn)度條滾動(dòng)效果,不可思議!
標(biāo)題網(wǎng)址:http://m.rwnh.cn/news/812.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、網(wǎng)站建設(shè)、外貿(mào)建站手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站企業(yè)建站

廣告

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

手機(jī)網(wǎng)站建設(shè)
芦山县| 含山县| 清水河县| 赣榆县| 房山区| 桐柏县| 安陆市| 福鼎市| 闽清县| 乃东县| 准格尔旗| 博白县| 车险| 九龙城区| 呼玛县| 齐河县| 石景山区| 常德市| 屏东市| 鱼台县| 浦北县| 自贡市| 黄浦区| 伊金霍洛旗| 曲靖市| 永寿县| 什邡市| 沙洋县| 达孜县| 秭归县| 崇礼县| 彩票| 西乌| 藁城市| 镇雄县| 姚安县| 郯城县| 安阳市| 临沭县| 金门县| 黄陵县|