8款純CSS3搜尋框

效果圖：

8款純css3搜尋框

title

>

<

link

href

=""rel=

"stylesheet"

>

<

link

rel=

"stylesheet"

href

="style.css"

>

<

style

>

*   

body   

#container   

div.search   

form   

input, button   

input   

button   

/*搜尋框1*/  

.bar1   

.bar1 input   

.bar1 button   

.bar1 button:before   

/*搜尋框2*/  

.bar2   

.bar2 input, .bar2 button   

.bar2 input   

.bar2 button   

.bar2 button:before   

/*搜尋框3*/  

.bar3   

.bar3 form   

.bar3 input, .bar3 button   

.bar3 button   

.bar3 button:before   

/*搜尋框4*/  

.bar4   

.bar4 form   

.bar4 input, .bar4 button   

.bar4 button   

.bar4 button:before   

/*搜尋框5*/  

.bar5   

.bar5 input, .bar5 button   

.bar5 input   

.bar5 button   

.bar5 button:before   

.bar5 input:focus   

/*搜尋框6*/  

.bar6   

.bar6 input   

.bar6 button   

.bar6 button:before   

/*搜尋框7*/  

.bar7   

.bar7 form   

.bar7 input   

.bar7 input:focus   

.bar7 button   

.bar7 button:before  

/*搜尋框8*/  

.bar8   

.bar8 form   

.bar8 input   

.bar8 input:focus   

.bar8 button   

.bar8 button:before   

style

>

head

>

<

body

>

<

divid

="container"

>

<

divclass

="search bar1"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar2"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar3"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar4"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar5"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar6"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar7"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

<

divclass

="search bar8"

>

<

form

>

<

input

type

="text"

placeholder

="請輸入您要搜尋的內容..."

>

<

button

type

="submit"

>

button

>

form

>

div>

div>

body

>

html

>

一款純css3實現的動畫按鈕

今天給大家分享一款純css3實現的動畫按鈕。第一排的按鈕當滑鼠經過的背景色動畫切換，圖示從右側飛入，第二排的按鈕當滑鼠經過的時候邊框動畫切換，圖示右側飛入，效果非常好，一起看下效果圖 實現的 html div class black a href class btn span become a me...

推薦10款純css3實現的實用按鈕

no1.一款基於css3非常實用的滑鼠懸停特效 這款特效，當滑鼠經過時候乙個半透明的遮罩層倒下來。效果很好，而且是純css3實現的，很少，非常實用。效果如下 no2.一款基於css3的簡單的滑鼠懸停按鈕 這款懸停按鈕滑鼠經過前邊框是間斷的。當滑鼠經過的時候邊框間隔消失。效果圖如下 no3.純css3...

一款純css3實現的翻轉按鈕

之前為大家介紹了好多純css3實現的很漂亮的按鈕。今天小編要給各再分享一款純css3實現的翻轉按鈕。實現中給出了兩種的翻轉特效，一種是基於按扭的左邊緣為中心線，另一種是基於按鈕的中間為中心線。我們一起看下效果圖 實現的 html article a target blank class btn fo...