首先，我們先準備好html**:
此時，我們先看一下此時未加樣式時的執行效果：
接著我們再設定頁面外部容器的樣式：
@charset "utf-8";在修改完表單布局以及內外邊距後，我們再設定表單組input-group及其內部元素的樣式：*/* 設定外部容器樣式 開始 */
.container
.container form
form
/* 設定外部容器樣式 結束 *
.input-group input此時我們來預覽一下表單應用樣式後的效果：.btn
.input-group .input-group-btn .btn
/*設定表單組元素統一向左浮動*/
.input-group input,.input-group button
從效果圖我們可以發現，搜尋表單組的樣式已經出來了，但是並不是我們期待的發光效果。
我們要知道如果單憑css2或css1，是實現不了發光動畫效果的，這個時候我們可以借助css3的動畫效果。
現在我們利用css3新增動畫特性，定義動畫幀：
/* 定義動畫幀 開始 */我在一開始也講了，當表單組中的元素或元件獲得焦點的時候，該元素或元件有發光效果。@-webkit-keyframes glow
100%
}@-moz-keyframes glow
100%
}@-o-keyframes glow
100%
}@-ms-keyframes glow
100%
}@keyframes glow
100%
}/* 定義動畫幀 結束 */
此時我們給表單組中的元素應用獲得焦點時的樣式：
.input-group input:focus,.input-group .input-group-btn .btn:focus
CSS3的文字發光特效
這是一款基於純css3的文字發光特效，當我們將滑鼠滑過文字時，文字就會模擬發光動畫，展現出非常酷的發光畫面。另外，由於引用了特殊字型，所以整個文字效果看起來有著3d立體的特效，如果你的網路無法載入這些字型，可能是由於國外的這個 被牆的緣故，就像google的字型庫 被遮蔽那樣。html red bl...
純CSS3實現圓圈動態發光特效動畫
效果圖 這個效果的具體實現主要是用到了css3 的animation 它共有8個屬性 animation name 規定 keyframes 動畫的名稱。用來定義乙個動畫的名稱。如果要設定幾個animation給乙個元素，我們只需要以列表的形式，用逗號 隔開 animation duration 動...
炫酷的CSS3發光搜尋表單，附演示和原始碼
原文 炫酷的css3發光搜尋表單，附演示和原始碼 圖上的搜尋框在被啟用的時候會出現閃閃發光的特效。我們可以在這裡檢視css3發光搜尋表單的demo演示。下面我們來一起看看源 html 非常簡單，乙個文字框和乙個提交按鈕 form action method input type search pla...