炫酷的CSS3發光搜尋表單,附演示和原始碼

2021-09-06 14:55:55 字數 1517 閱讀 9525

原文:

炫酷的css3發光搜尋表單,附演示和原始碼

圖上的搜尋框在被啟用的時候會出現閃閃發光的特效。

我們可以在這裡檢視css3發光搜尋表單的demo演示。

下面我們來一起看看源**。

html**非常簡單,乙個文字框和乙個提交按鈕:

<

form

action

=""method

="">

<

input

type

="search"

placeholder

="what are you looking for?"

>

<

button

>search

button

>

form

>

然後重點就是css3**了,首先是對搜尋框和搜尋按鈕的樣式進行初始化,為了配合背景能出現發光的效果,我們使用了glow動畫,我們對它們的樣式作了如下設定:

.webdesigntuts-workshop .webdesigntuts-workshop:before,

.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

下面是我們定義的glow動畫,為了適應不同核心的瀏覽器,我們分別對其做了如下設定:

@-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...