前言
2017-百度前端技術(shù)學(xué)院編碼任務(wù)：鼠標(biāo)懸浮模糊效果
任務(wù)描述
- 實(shí)現(xiàn)圖示效果 點(diǎn)擊查看
- 實(shí)現(xiàn)文字的流光漸變動畫
- 背景圖需要進(jìn)行模糊處理
- 實(shí)現(xiàn)按鈕邊框的從中間到兩邊擴(kuò)展開
實(shí)現(xiàn)
這個任務(wù)主要是學(xué)習(xí)和使用CSS3大部分的屬性霹购，主要使用的屬性如下：
- CSS3 背景 - background
- CSS3 漸變 - gradients
- CSS3 轉(zhuǎn)換 - transform
- CSS3 過渡 - transition
- CSS3 動畫 - animation
- CSS3 濾鏡 - filter
頁面結(jié)構(gòu)
其實(shí)剛開始泉手，我就在結(jié)構(gòu)上面犯了錯誤。如果把圖片作為背景圖片使用，當(dāng)使用filter模糊效果的時候诅挑，任何子元素都會產(chǎn)生模糊效果，那么后面文字和邊框都是模糊不清的友鼻，所以應(yīng)該采用單獨(dú)使用圖片元素 img 來顯示背景圖片奋姿。
<article class="box-warp">
<img class="box-img" >
<div class="box-background">
<h2 class="box-background__title">浙江美術(shù)館</h2>
<button type="button" class="box-background__btn">點(diǎn)擊查看</button>
</div>
</article>
實(shí)現(xiàn)文字的流光漸變動畫
整體思路：利用漸變屬性來設(shè)置背景顏色效果，同時背景剪裁為文字區(qū)域古沥，設(shè)置文字顏色為透明色瘸右，最后給予動畫效果讓其動起來。
首先設(shè)置背景圖片為線性漸變linear-gradient岩齿，設(shè)置方向?yàn)閺淖蟮接也⑶以O(shè)置2段相同的顏色節(jié)點(diǎn)太颤，0%和100%為相同的顏色，這樣才可以更好的實(shí)現(xiàn)文字流光的效果盹沈。
漸變的方向其實(shí)是通過設(shè)置角度來控制龄章，角度是通過水平線和漸變線之間產(chǎn)生的。默認(rèn)方向從下到上就是0deg、從左到右就是90deg做裙。
background-image: linear-gradient(left,red,orange 25%,red 50%,orange 75%,red ); /*背景漸變色*/
我們發(fā)現(xiàn)整個背景都是漸變色岗憋，我們只是需要文字的顏色變?yōu)闈u變而已。我們開始利用-webkit-background-clip屬性來背景剪裁為文字锚贱，同時設(shè)置文字的-webkit-text-fill-color或者color屬性讓其文字顏色為透明色仔戈，這樣才有讓文字顯示為漸變色。
這里需要注意的是：背景裁剪為文字當(dāng)前只有webkit內(nèi)核瀏覽器支持拧廊，同時設(shè)置-webkit-text-fill-color和color监徘，那么前者會覆蓋后者屬性值。
另外我們需要設(shè)置background-size: 200% 100%;卦绣，因?yàn)闈u變顏色設(shè)置為2段相同的顏色節(jié)點(diǎn)耐量，目的是為了重復(fù)2段相同的顏色，實(shí)現(xiàn)動畫文字流光效果滤港。
-webkit-text-fill-color: transparent; /*文字透明 color: transparent; 同樣的效果*/
-webkit-background-clip: text; /*背景裁剪為文字 當(dāng)前只有webkit內(nèi)核瀏覽器支持*/
background-size: 200% 100%;
目前就差動畫了廊蜒，首先需要設(shè)置動畫規(guī)則 keyframes ，然后設(shè)置animation動畫周期時間溅漾、速度曲線和播放次數(shù)山叮。因?yàn)楸尘伴L度為200%，所以動畫規(guī)則設(shè)置100% {background-position: -100% 0;}添履，讓其沿著X軸變化從而產(chǎn)生流動效果屁倔。
/*文字流光動畫*/
@keyframes flowLight
{
0% {background-position: 0 0;}
100% {background-position: -100% 0;}
}
/*規(guī)則名稱為flowLight，周期時間為3s暮胧，速度曲線為勻速锐借，播放次數(shù)為無限次（永遠(yuǎn)*/
animation: flowLight 3s linear infinite;
到此文字流光效果實(shí)現(xiàn)了
背景圖模糊處理
背景圖模糊處理是設(shè)置filter: blur(3px);，CSS3的filter(濾鏡) 屬性主要是針對圖片進(jìn)行處理往衷，比如黑白钞翔、對比和亮度等等。
.box-warp:hover .box-img{ filter: blur(3px); }
這樣背景模糊的效果就實(shí)現(xiàn)了席舍。
按鈕邊框的從中間到兩邊擴(kuò)展開
剛開始沒什么思路布轿，后來搜索才知道通過偽元素::before和::after可以實(shí)現(xiàn)這樣的效果。思路是通過絕對定位設(shè)置前后偽元素來顯示上下和左右邊框来颤，設(shè)置元素上下邊框的偽元素left：50%汰扭，左右top：50%，通過改變其定位福铅、寬度和高度來實(shí)現(xiàn)效果萝毛。
.box-background::before{
position: absolute;
left: 50%;
top:0;
content: '';
border: 3px solid #ffcc00;
border-width: 3px 0;
width: 0;
height: 100%;
box-sizing: border-box;
transition: all 1s; /*過渡*/
}
.box-background::after{
position: absolute;
left: 0;
top:50%;
content: '';
border: 2px solid #ffcc00;
border-width: 0 2px;
width: 100%;
height: 0;
box-sizing: border-box;
transition: all 1s;
}
.box-warp:hover .box-background::before{
left: 0;
width: 100%;
}
.box-warp:hover .box-background::after{
top: 0;
height: 100%;
}
隱藏和顯示
隱藏和顯示是通過設(shè)置opacity屬性來實(shí)現(xiàn),初始狀態(tài)為0，鼠標(biāo)滑動為1來實(shí)現(xiàn)滑黔。
.box-warp:hover .box-background{ opacity: 1; }
由于CSS3的兼容性珊泳，在完成此效果時鲁冯，只在webkit內(nèi)核的瀏覽器進(jìn)行測試，如需兼容其他瀏覽器色查，請自行加上瀏覽器前綴薯演。
CSS3的許多新特效非常酷炫秧了，可以實(shí)現(xiàn)非常復(fù)雜的效果和動畫跨扮，值得大家好好看看。
問題
當(dāng)我想鼠標(biāo)移動到a元素上面時產(chǎn)生手指效果验毡，但是卻發(fā)現(xiàn)無效衡创。通過排查是偽元素覆蓋在a元素上面，導(dǎo)致根本無法接觸晶通。那么怎么能改變其它們的層疊關(guān)系呢璃氢？我想到了z-index屬性，因?yàn)檫@個問題我重新學(xué)習(xí)了z-index屬性的使用狮辽。
- z-index什么時候有效?
對于一個已經(jīng)定位的元素（即position屬性值是非static的元素)
- z-index值越大元素越靠前一也，對嗎？
我們現(xiàn)在div(A)和div(B)中再分別創(chuàng)建一個小的div(c)和div(d)
我們試試把div(A)的Z-index設(shè)置成auto喉脖。
再試試只把div(a)設(shè)置為auto
其實(shí)主要是找到對比元素之間的基準(zhǔn)堆疊上下文椰苟，以此數(shù)字越大層級越高。
取值：
auto: 元素不會建立一個新的本地堆疊上下文树叽。當(dāng)前堆疊上下文中新生成的元素和父元素堆疊層級相同舆蝴。
<integer>: 整型數(shù)字是生成的元素在當(dāng)前堆疊上下文中的堆疊層級。元素同時會創(chuàng)建一個堆疊層級為0的本地堆疊上下文题诵。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進(jìn)行對比洁仗。
通俗說，設(shè)置auto時元素堆疊等級和父元素一樣性锭，遇到堆疊上下文之后根據(jù)大小來判斷層級赠潦。設(shè)置具體數(shù)字的元素同樣遇到堆疊上下文根據(jù)大小來判斷層級，它的子元素和外界元素進(jìn)行比較時,采用父元素的Z-index進(jìn)行比較, 和兄弟元素比較采用自身的Z-index篷店。
-
z-index 不設(shè)置和設(shè)置為0有什么區(qū)別?
如果不設(shè)置Z-index那么默認(rèn)值為auto,則不建立層疊上下文祭椰。設(shè)置為0則會脫離文檔流,建立層疊上下文臭家。
由于CSS3的兼容性疲陕，在完成此效果時，只在webkit內(nèi)核的瀏覽器進(jìn)行測試钉赁，如需兼容其他瀏覽器蹄殃，請自行加上瀏覽器前綴。
CSS3的許多新特效非衬悴龋酷炫诅岩，可以實(shí)現(xiàn)非常復(fù)雜的效果和動畫讳苦，值得大家好好看看。
參考鏈接
