整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
計(jì)給出的樣式是這樣的：
設(shè)計(jì)圖
毛筆的位置是當(dāng)前的進(jìn)度，毛筆左側(cè)的部分為橘黃色，右側(cè)為灰色。這里我拋磚引玉，列舉三個(gè)實(shí)現(xiàn)方法。
用一張圖片做為遮罩層，圖片整體為白色，中間不規(guī)則的部分為透明色。下方是長方形的一個(gè)進(jìn)度條。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不規(guī)則圖形進(jìn)度條（1）</title>
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-1 {background-color: #999;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; background-color: #FFBD44;
transition: width .5s ease;
}
.progress-bar .mask {
position: absolute; left: 0; top: 0; z-index: 1; width: 680px; height: 60px;
background: url("./progress_mask.png") no-repeat 0 0; background-size: 100% 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
</head>
<body>
<h2>方法1：鏤空遮罩</h2>
<div class="plan plan-1">
<div class="progress-bar" id="progressBar">
<div class="mask"></div>
<img class="brush" src="./brush.png" />
</div>
</div>
<div class="controller">
<input id="controller" type="range" min="0" max="100" value="0" />
</div>
<script>
let controller=document.querySelector('#controller');
let progressBar=document.querySelector('#progressBar');
controller.addEventListener('change', progressChange);
function progressChange () {
let value=parseFloat(this.value);
let width=Math.round(680 * value / 100);
progressBar.style=`width: ${width}px`;
}
</script>
</body>
</html>用兩張圖片來實(shí)現(xiàn)，一張是灰色的，一張是橘黃色，灰色的在下方，默認(rèn)顯示；橘黃色在上方，高度與下方灰色圖片一致，寬度方向被所在元素寬度裁切。
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-2 {background: url("./progress_gray.png") no-repeat 0 0; background-size: auto 100%;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
<body>
<h2>方法2：圖片堆疊</h2>
<div class="plan plan-2">
<div class="progress-bar" id="progressBar">
<img class="brush" src="./brush.png" />
</div>
</div>
</body>方法3：濾鏡
用一張圖片來實(shí)現(xiàn)，一張橘黃色的，將進(jìn)度條分成左右兩部分，背景圖一樣，只是右側(cè)的部分使用濾鏡置灰。
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-3 {display: flex;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
}
.progress-cover {
width: 0; flex-grow: 1; filter:grayscale(1);
background: url("./progress_orange.png") no-repeat right top; background-size: auto 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
<body>
<h2>方法3：濾鏡</h2>
<div class="plan plan-3">
<div class="progress-bar" id="progressBar">
<img class="brush" src="./brush.png" />
</div>
<div class="progress-cover"></div>
</div>
</body>上述代碼的效果是這樣的：
效果圖
目前大多數(shù)人對于CSS的使用只是停留在基本層面，設(shè)置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發(fā)時(shí)省去很多時(shí)間。
今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。
CSS
如何將一張彩色的圖片在頁面上展示成黑白圖片呢？
我們需要用到一個(gè)filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。
我們看到下面一張圖片。
原始圖片
當(dāng)我們加上以下一段代碼后。
CSS代碼
可以看到圖片如下所示。
處理過的圖片
有的時(shí)候我們將網(wǎng)頁的頂部設(shè)置為陰影效果，這個(gè)是怎么做到的呢？
利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個(gè)div，設(shè)置一個(gè)高度，寬度為100%
將其position設(shè)置為fixed，然后設(shè)置偏移量為設(shè)定的高度值。
設(shè)置box-shadow屬性，值等于設(shè)定的高度值。
得到的代碼如下所示。
頁面頂部加陰影
運(yùn)行完上述代碼后，就可以看到整個(gè)頁面頂部有陰影的效果。
假如有一個(gè)很簡單的頁面，需要所有的元素都垂直居中顯示，實(shí)現(xiàn)的方法其實(shí)很簡單。
將與align有關(guān)的屬性設(shè)置為center。
displag設(shè)置為flex。
得到的代碼如下所示。
垂直居中的CSS方法
設(shè)置以后，我們可以看到不管將窗口設(shè)置為多高，所有元素都是垂直居中的狀態(tài)。
但是這種方法有個(gè)弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時(shí)，頁面會被水平撐開，不太美觀。
因此這種方法建議在頁面元素少的情況下使用。
元素垂直居中
在一個(gè)使用ul>li創(chuàng)建的列表中，如果想要選擇其中的幾個(gè)元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個(gè)元素。
那么假如我們想選擇第一個(gè)到第三個(gè)元素，使用nth-child該怎么做呢？
很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設(shè)置屬性。
其實(shí)還有一種更簡單的方法，那就是使用負(fù)數(shù)選擇器。
:nth-child(-n+3)，就代表選擇從第一個(gè)到第三個(gè)元素。
我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設(shè)置為none，這樣就可以將li全部隱藏起來。
HTML代碼
然后通過nth-child選擇器設(shè)置css屬性。
nth-child選擇器
最后看看頁面上的內(nèi)容呈現(xiàn)，可以看出實(shí)際選中的li只有前三個(gè)，符合預(yù)期。
頁面內(nèi)容
頁面的table元素，如果不對tr>td設(shè)置寬度，列td的寬度是會隨著內(nèi)容的變化而變化，這樣就會造成頁面布局很難看。
我們可以將表格的每列設(shè)置成相同的寬度，這樣不管內(nèi)容怎么變化都不會改變頁面的布局。
只需要使用如下一個(gè)屬性即可。
表格列等寬
實(shí)際的效果如下圖所示。
表格列等寬
在CSS3中新增了一個(gè)calc()方法，用于動態(tài)的計(jì)算值，不管是數(shù)值還是百分比，都可以參與計(jì)算。
這個(gè)方法非常適用于自適應(yīng)的容器中，動態(tài)計(jì)算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時(shí)候，不會改變元素之間的布局。
例如以下我們定義的兩個(gè)div。
CSS屬性
看到的頁面效果如下圖所示。
calc()效果
假設(shè)在頁面上有一個(gè)很重要的區(qū)域，只是只讀的，不能讓鼠標(biāo)點(diǎn)擊，可以直接禁用掉鼠標(biāo)點(diǎn)擊事件。
這個(gè)在CSS3中新增了pointer-event屬性，只要將其設(shè)置為none即可。
禁用鼠標(biāo)點(diǎn)擊
有的時(shí)候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。
漸變文字
這個(gè)效果是怎么實(shí)現(xiàn)的呢?
通過設(shè)置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個(gè)屬性是專門用來產(chǎn)生遮罩效果的。
然后將遮罩效果的字與原來的文章重合，就可以達(dá)到上述效果。
我們設(shè)置一個(gè)h2標(biāo)簽，然后設(shè)置data-text屬性，date-text屬性值與頁面顯示值一樣。
HTML元素
然后設(shè)置對應(yīng)的CSS屬性。
CSS屬性
當(dāng)我們在頁面運(yùn)行后，我們就可以得到上面的文字漸變效果。
和上面的漸變文本類似，模糊文本也有專門的屬性可以設(shè)置，那就是text-shadow。
通過下面一段簡單的代碼，就可以得到模糊文本了。
模糊文本樣式
得到的效果如下圖所示。
模糊文本
今天這篇文章主要介紹了CSS中幾個(gè)高級的使用技巧，可以讓你在實(shí)現(xiàn)相同效果時(shí)，減少很多的代碼量，提高工作效率。
大家要好好掌握~
目前大多數(shù)人對于CSS的使用只是停留在基本層面，設(shè)置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發(fā)時(shí)省去很多時(shí)間。
今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。
CSS
如何將一張彩色的圖片在頁面上展示成黑白圖片呢？
我們需要用到一個(gè)filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。
我們看到下面一張圖片。
原始圖片
當(dāng)我們加上以下一段代碼后。
CSS代碼
可以看到圖片如下所示。
處理過的圖片
有的時(shí)候我們將網(wǎng)頁的頂部設(shè)置為陰影效果，這個(gè)是怎么做到的呢？
利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個(gè)div，設(shè)置一個(gè)高度，寬度為100%
將其position設(shè)置為fixed，然后設(shè)置偏移量為設(shè)定的高度值。
設(shè)置box-shadow屬性，值等于設(shè)定的高度值。
得到的代碼如下所示。
頁面頂部加陰影
運(yùn)行完上述代碼后，就可以看到整個(gè)頁面頂部有陰影的效果。
假如有一個(gè)很簡單的頁面，需要所有的元素都垂直居中顯示，實(shí)現(xiàn)的方法其實(shí)很簡單。
將與align有關(guān)的屬性設(shè)置為center。
displag設(shè)置為flex。
得到的代碼如下所示。
垂直居中的CSS方法
設(shè)置以后，我們可以看到不管將窗口設(shè)置為多高，所有元素都是垂直居中的狀態(tài)。
但是這種方法有個(gè)弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時(shí)，頁面會被水平撐開，不太美觀。
因此這種方法建議在頁面元素少的情況下使用。
元素垂直居中
在一個(gè)使用ul>li創(chuàng)建的列表中，如果想要選擇其中的幾個(gè)元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個(gè)元素。
那么假如我們想選擇第一個(gè)到第三個(gè)元素，使用nth-child該怎么做呢？
很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設(shè)置屬性。
其實(shí)還有一種更簡單的方法，那就是使用負(fù)數(shù)選擇器。
:nth-child(-n+3)，就代表選擇從第一個(gè)到第三個(gè)元素。
我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設(shè)置為none，這樣就可以將li全部隱藏起來。
HTML代碼
然后通過nth-child選擇器設(shè)置css屬性。
nth-child選擇器
最后看看頁面上的內(nèi)容呈現(xiàn)，可以看出實(shí)際選中的li只有前三個(gè)，符合預(yù)期。
頁面內(nèi)容
頁面的table元素，如果不對tr>td設(shè)置寬度，列td的寬度是會隨著內(nèi)容的變化而變化，這樣就會造成頁面布局很難看。
我們可以將表格的每列設(shè)置成相同的寬度，這樣不管內(nèi)容怎么變化都不會改變頁面的布局。
只需要使用如下一個(gè)屬性即可。
表格列等寬
實(shí)際的效果如下圖所示。
表格列等寬
在CSS3中新增了一個(gè)calc()方法，用于動態(tài)的計(jì)算值，不管是數(shù)值還是百分比，都可以參與計(jì)算。
這個(gè)方法非常適用于自適應(yīng)的容器中，動態(tài)計(jì)算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時(shí)候，不會改變元素之間的布局。
例如以下我們定義的兩個(gè)div。
CSS屬性
看到的頁面效果如下圖所示。
calc()效果
假設(shè)在頁面上有一個(gè)很重要的區(qū)域，只是只讀的，不能讓鼠標(biāo)點(diǎn)擊，可以直接禁用掉鼠標(biāo)點(diǎn)擊事件。
這個(gè)在CSS3中新增了pointer-event屬性，只要將其設(shè)置為none即可。
禁用鼠標(biāo)點(diǎn)擊
有的時(shí)候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。
漸變文字
這個(gè)效果是怎么實(shí)現(xiàn)的呢?
通過設(shè)置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個(gè)屬性是專門用來產(chǎn)生遮罩效果的。
然后將遮罩效果的字與原來的文章重合，就可以達(dá)到上述效果。
我們設(shè)置一個(gè)h2標(biāo)簽，然后設(shè)置data-text屬性，date-text屬性值與頁面顯示值一樣。
HTML元素
然后設(shè)置對應(yīng)的CSS屬性。
CSS屬性
當(dāng)我們在頁面運(yùn)行后，我們就可以得到上面的文字漸變效果。
和上面的漸變文本類似，模糊文本也有專門的屬性可以設(shè)置，那就是text-shadow。
通過下面一段簡單的代碼，就可以得到模糊文本了。
模糊文本樣式
得到的效果如下圖所示。
模糊文本
今天這篇文章主要介紹了CSS中幾個(gè)高級的使用技巧，可以讓你在實(shí)現(xiàn)相同效果時(shí)，減少很多的代碼量，提高工作效率。
大家要好好掌握~
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
