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