又到周末了，這一天天過的真快，明天應(yīng)該回老家了，不知道會(huì)不會(huì)有機(jī)會(huì)進(jìn)行編寫，盡量爭取吧，實(shí)在不想就這樣間斷。如果說從前會(huì)一天天無聊到爆，那現(xiàn)在自己應(yīng)該是一天天忙的要死，欠缺了太多東西，那些浪費(fèi)的時(shí)間可不是懊惱就能解決的，出來混，終歸是要還的啊。

先來幅圖畫，顯示下什么是所謂的高亮效果
 

在輸入框周圍出現(xiàn)了亮光，或者說陰影造成邊框發(fā)亮的假象，這就是我所說的高亮效果，那究竟該如何是實(shí)現(xiàn)呢？

這樣我們先來上一下代碼，我是用的楓樹瀏覽器，是webkit內(nèi)核，所以這里只寫了webkit


就這么了了幾句話就實(shí)現(xiàn)了功能，圖我就不上了，大致跟上面一個(gè)效果，則來分析一下成功的幾個(gè)關(guān)鍵點(diǎn)：

1、transition的過渡，border linear .2s這是說border屬性的逐步過渡，而后面則是對(duì)陰影部分的逐步過渡；

2、rgba（a，b，c，d），這個(gè)前面我們?cè)?jīng)用到過很多次，前三位湊成顏色，而第四位則是透明度，還需牢記才是；

3、box-shadow：x y 10px rgba（a，b，c，d），同樣在前面用到過很多次，x y分別是陰影的方向， 然后是陰影蔓延距離，最后則是陰影部分的顏色；

4、最后則是：hover，偽元素和偽類可以單獨(dú)寫一篇了吧，但是這個(gè)：hover起碼我們都是相當(dāng)熟悉的了吧

當(dāng)然，不要忘記html部分的編寫哦


這個(gè)可以直接復(fù)制去試試效果哦，不過我敲出來的只是webkit瀏覽器的額

最新評(píng)論