圖上的搜尋框在被啟用的時候會出現閃閃發光的特效。
我們可以在這裡檢視css3發光搜尋表單的demo演示。
下面我們來一起看看源**。
html**非常簡單，乙個文字框和乙個提交按鈕：
<然後重點就是css3**了，首先是對搜尋框和搜尋按鈕的樣式進行初始化，為了配合背景能出現發光的效果，我們使用了glow動畫，我們對它們的樣式作了如下設定：form
action
=""method
="">
<
input
type
="search"
placeholder
="what are you looking for?"
>
<
button
>search
button
>
form
>
.webdesigntuts-workshop .webdesigntuts-workshop:before,下面是我們定義的glow動畫，為了適應不同核心的瀏覽器，我們分別對其做了如下設定：.webdesigntuts-workshop:after .webdesigntuts-workshop:before .webdesigntuts-workshop:after .webdesigntuts-workshop form .webdesigntuts-workshop input .ie .webdesigntuts-workshop input .webdesigntuts-workshop input::-webkit-input-placeholder .webdesigntuts-workshop input:-moz-placeholder .webdesigntuts-workshop input:focus .webdesigntuts-workshop input:focus::-webkit-input-placeholder .webdesigntuts-workshop input:focus:-moz-placeholder .webdesigntuts-workshop button .webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus .webdesigntuts-workshop button:active
@-webkit-keyframes glow 100% }@-moz-keyframes glow 100% }
@-o-keyframes glow 100% }
@-ms-keyframes glow 100% }
@keyframes glow 100% }
炫酷的CSS3發光搜尋表單，附演示和原始碼
原文 炫酷的css3發光搜尋表單，附演示和原始碼 圖上的搜尋框在被啟用的時候會出現閃閃發光的特效。我們可以在這裡檢視css3發光搜尋表單的demo演示。下面我們來一起看看源 html 非常簡單，乙個文字框和乙個提交按鈕 form action method input type search pla...
前端酷炫效果參考 純CSS3實現的一些酷炫效果
之前在網上看到一些用純css3實現的酷炫效果，以為實現起來比較困難，於是想看看具體是怎麼實現的。一 笑臉貓動畫 實現效果如下 這個實現起來確實比較麻煩，很多地方需要花時間，有耐心地調整。1.先看下頁面結構 2.再看css部分 1.先看臉部face face top 100px left 50 top...
CSS3的文字發光特效
這是一款基於純css3的文字發光特效，當我們將滑鼠滑過文字時，文字就會模擬發光動畫，展現出非常酷的發光畫面。另外，由於引用了特殊字型，所以整個文字效果看起來有著3d立體的特效，如果你的網路無法載入這些字型，可能是由於國外的這個 被牆的緣故，就像google的字型庫 被遮蔽那樣。html red bl...