用CSS3實作發光的邊框效果

有些網站中的input輸入框選中時，可以看到邊框發亮的漸變效果，由于需要，這裡要做一個塊的邊框發亮效果，如圖所示。

CSS代碼如下：

@-webkit-keyframes  shineRed {
from { -webkit-box-shadow: 0 0 5px #bbb; }
50% { -webkit-box-shadow: 0 0 10px red; }
to { -webkit-box-shadow: 0 0 5px #bbb; }
}
@-webkit-keyframes shineBlue {
        from { -webkit-box-shadow: 0 0 9px #333; }
        50% { -webkit-box-shadow: 0 0 18px blue; }
        to { -webkit-box-shadow: 0 0 9px #333; }
}
.shine_red{
-webkit-animation-name: shineRed; 
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite; 
}           

HTML代碼如下：

<ul>
        <li class="shine_red"></li>
        <li class="shine_blue></li>
</ul>           

@-webkit-keyframes是對每一個動畫定義時間軸，可以設定某個時間動畫作用的元素是什麼狀态，後面跟的是用到的動畫的名稱，這裡是shineRed（自定義的，友善記憶，紅色發光取名為shineRed）。

具體就相當于一個時間軸，from表示剛開始的時候，to表示結束的時候，裡面的樣式都是可以自己定義的。

-webkit-animation-name就是調用上面定義的動畫。

-webkit-animation-iteration-count表示動畫的循環次數，用infinite表示無線循環。