原文:
炫酷的css3發光搜尋表單,附演示和原始碼
圖上的搜尋框在被啟用的時候會出現閃閃發光的特效。
我們可以在這裡檢視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發光搜尋表單的demo演示。下面我們來一起看看源 html 非常簡單,乙個文字框和乙個提交按鈕 form action method input type search placeholder what are you loo...
前端酷炫效果參考 純CSS3實現的一些酷炫效果
之前在網上看到一些用純css3實現的酷炫效果,以為實現起來比較困難,於是想看看具體是怎麼實現的。一 笑臉貓動畫 實現效果如下 這個實現起來確實比較麻煩,很多地方需要花時間,有耐心地調整。1.先看下頁面結構 2.再看css部分 1.先看臉部face face top 100px left 50 top...
CSS3的文字發光特效
這是一款基於純css3的文字發光特效,當我們將滑鼠滑過文字時,文字就會模擬發光動畫,展現出非常酷的發光畫面。另外,由於引用了特殊字型,所以整個文字效果看起來有著3d立體的特效,如果你的網路無法載入這些字型,可能是由於國外的這個 被牆的緣故,就像google的字型庫 被遮蔽那樣。html red bl...