又到周末了,這一天天過的真快,明天應該回老家了。不知道會不會有機會進行編寫。盡量爭取吧,實在不想就這樣間斷。假設說從前會一天天無聊到爆,那如今自己應該是一天天忙的要死,欠缺了太多東西,那些浪費的時間可不是懊惱就能解決的。出來混。終歸是要還的啊。
先來幅圖畫,顯示下什么是所謂的高亮效果

在輸入框周圍出現了亮光,或者說陰影造成邊框發亮的假象。這就是我所說的高亮效果,那到底該怎樣是實現呢?
這樣我們先來上一下代碼,我是用的楓樹瀏覽器,是webkit內核。所以這里僅僅寫了webkit
.aa:HOVER{
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
border-color:rgba(141,39,142,.75);
-webkit-box-shadow:0 0 18px rgba(111,1,32,3);
}
.aa{
height: 100px;width: 100px;
}就這么了了幾句話就實現了功能,圖我就不上了,大致跟上面一個效果,則來分析一下成功的幾個關鍵點:
1、transition的過渡。border linear .2s這是說border屬性的逐步過渡。而后面則是對陰影部分的逐步過渡。
2、rgba(a,b,c,d),這個前面我們以前用到過非常多次,前三位湊成顏色。而第四位則是透明度,還需牢記才是。
3、box-shadow:x y 10px rgba(a,b,c,d)。相同在前面用到過非常多次。x y各自是陰影的方向, 然后是陰影蔓延距離。最后則是陰影部分的顏色。
4、最后則是:hover,偽元素和偽類能夠單獨寫一篇了吧,可是這個:hover起碼我們都是相當熟悉的了吧
當然。不要忘記html部分的編寫哦
<input type="text" class="aa">這個能夠直接復制去試試效果哦,只是我敲出來的僅僅是webkit瀏覽器的額
好了。要歇息了,明天還得早起,又要跑兩天啊,時間好多都浪費在路上了......

