CSS3實(shí)現(xiàn)蘋果手機(jī)解鎖的字體閃亮效果示例
我要評(píng)論0.前言
2016年08月18日 今天看到注意到蘋果手機(jī)的滑動(dòng)解鎖，提示字上會(huì)有一道白光閃過，感覺很炫酷，所以突然就來了興致想要做一個(gè)當(dāng)鼠標(biāo)放在字體上(模擬手指)時(shí)，白光一閃而過，照亮字體的效果。
1.思路
首先呢，需要做出來一道傾斜的白光，這道白光就是用來實(shí)現(xiàn)“照亮字體”的效果的。
這一步做好之后，接下來的事情就簡單了，也就是讓白光先消失，然后當(dāng)鼠標(biāo)移動(dòng)到字體上的時(shí)候，白光出現(xiàn)，從字體上劃過。
2.白光的制作
上面的圖片可以看到，就是白光的邊緣不是由白色直接變成黑色，而是漸變成黑色。所以，我們在制作這到白光的時(shí)候，需要用CSS中的漸變。 <linear-gradient>
制作過程
首先我們先創(chuàng)建一個(gè)div，設(shè)置一個(gè)簡單的居中默認(rèn)樣式。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
div{
width: 700px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
運(yùn)行結(jié)果：
2.設(shè)置漸變。
設(shè)置一個(gè)漸變，由“黑->白->黑"，有一定角度的傾斜。
代碼：
background: -webkit-linear-gradient(-45deg, #000 100px, #FFF 140px, #FFF 220px, #000 260px); /*角度設(shè)定的是-45°*/
此時(shí)，運(yùn)行結(jié)果：
另外，關(guān)于漸變的起始方向角度問題說明：
1.如果沒有設(shè)置漸變的方向和角度，那么默認(rèn)是由上到下漸變；
2.如果設(shè)置了漸變的方向，那么就按照設(shè)置的方向來，
如：設(shè)置了 <background: -webkit-linear-gradient(right,red,yellow，blue)>
漸變方向就是自右往左依次為紅色，黃色，藍(lán)色。
3.可以設(shè)置top right，right bottom，left bottom，top left，表示分別從 對(duì)應(yīng)的四個(gè)角開始漸變
4.可以設(shè)置角度。線性漸變的角度開始是在X軸的負(fù)半軸為起點(diǎn)逆時(shí)針開始算的。這里角度設(shè)置的是-45°，
所以，由左上角到右下角依次漸變。
3.設(shè)置背景文字 到這里，可能有人會(huì)有疑問：為什么要單獨(dú)說設(shè)置背景字呢？
因?yàn)檫@里有一個(gè)不明顯的陷阱！
具體是什么，這里先不交代，等會(huì)會(huì)有具體的現(xiàn)象呈現(xiàn)給大家。
這里先常規(guī)的設(shè)置一下字體。
font-size: 50px; text-align: center; line-height: 200px; color: white; /*設(shè)置的文字是：啦啦啦啦啦啦啦啦德瑪西亞??！*/
4.白光的滑動(dòng)效果
這個(gè)沒什么好說的，先讓白光消失，當(dāng)鼠標(biāo)放在div上的時(shí)候，白光出現(xiàn)，然后劃過。
直接上：
background-position: -1000px,0px;
效果：
呃...呃，什么情況？？
好吧，背景重復(fù)了。 這里一定要設(shè)置background-repeat：no-repeat；（注意：字體是白色的，所以文字暫時(shí)不會(huì)顯示出來）
設(shè)置動(dòng)態(tài)偽類：
div:hover{
background-position: 1000px,0px;
transition:all 5s;
}
為了效果我們設(shè)置整個(gè)body的背景顏色為黑色。
效果，當(dāng)鼠標(biāo)未移到div上時(shí)，只顯示文字，當(dāng)鼠標(biāo)放在div上時(shí)，會(huì)有一道白光劃過。
3.background-clip：text
白光做好了，但是，卻跟我們想象總的不太一樣。
要知道，我們想要的裝逼結(jié)果是只照亮文字，而不是讓你跟一個(gè)激光一樣嗤嗤的劃過去。
所以，這時(shí)，我們便要用到一個(gè)標(biāo)簽: <background-clip:text>
這個(gè)標(biāo)簽意義是：可以將除了文字以外的其他背景，全部切除。這樣就會(huì)實(shí)現(xiàn)我們的效果了。
但是要注意，這個(gè)標(biāo)簽在使用的時(shí)候要加上瀏覽器前綴，因?yàn)楹芏酁g覽器在沒有瀏覽器前綴的時(shí)候，根本無法識(shí)別。
直接看結(jié)果。
納尼？！ 怎么沒有效果？我的白光呢？
這時(shí)，會(huì)發(fā)現(xiàn)，當(dāng)鼠標(biāo)移上去的時(shí)候，什么現(xiàn)象都沒有。白光劃過的現(xiàn)象消失了！
真的消失了嗎？
當(dāng)然不是，這里白光實(shí)際上是存在的，只不過是被文字擋住了。
還記得之前我為什么要把設(shè)置文字單獨(dú)拿出來說了嗎？因?yàn)槲淖秩绻皇菃为?dú)的設(shè)置顏色的話，是不行的。我們需要給文字一個(gè)透明度，這樣才能讓背景的白光，透過文字顯示出來。
這時(shí)候我們給文字的顏色就應(yīng)該用rgba的方法來設(shè)置了，給文字一定的透明度。
<color:rgba(255,255,255,0.1);>
這樣我們想要的照亮字體的效果便實(shí)現(xiàn)啦。( ^__^ )
下面附上整體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
background: #000;
}
div{
width: 1000px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
font-size: 70px;
text-align: center;
line-height: 200px;
color:rgba(255,255,255,1);
background: -webkit-linear-gradient(-45deg,
#000 100px,
#FFF 140px,
#FFF 220px,
#000 260px);
/*角度設(shè)定的是-45°*/
background-position: -1000px,0px;
background-repeat: no-repeat;
-webkit-background-clip: text;
}
div:hover{
background-position: 1000px,0px;
transition:all 5s;
}
</style>
</head>
<body>
<div>啦啦啦啦啦啦啦啦德瑪西亞??！</div>
</body>
</html>
到此這篇關(guān)于CSS3實(shí)現(xiàn)蘋果手機(jī)解鎖的字體閃亮效果示例的文章就介紹到這了,更多相關(guān)CSS3蘋果解鎖字體閃亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3實(shí)現(xiàn)iPhone滑動(dòng)解鎖功能代碼
這篇文章主要介紹了CSS3實(shí)現(xiàn)iPhone滑動(dòng)解鎖功能代碼的相關(guān)資料,需要的朋友可以參考下2016-07-18