乙個發光的搜尋邊框（純CSS3）

這是效果圖，邊框會不停的閃，相容各種瀏覽器

html**：

<

body
>
<
div 
class
="container"
>
<
form 
method
="post"
action
="#"
>
<
div 
class
="input-group"
>
<
input 
type
="text"
placeholder
="請告訴我，你在尋找什麼"
>
<
span 
class
="input-group-btn"
>
<
button 
class
="btn"
type
="submit"
>立即搜尋
button
>
span
>
div>
form
>
div>
body
>

@charset "utf-8";

/*css document 
*/bodyinput 
/*設定外部容器樣式 開始 使用**查詢以相容各種裝置
*/.container@media(min-width:800px) and (max-width:1280px)}
@media(min-width:1281px)}
/*設定外部容器樣式 結束 
*//*
設定表單組中輸入框的樣式
*/.input-group.input-group input @media(min-width:800px) and (max-width:1280px)}
/*設定按鈕樣式的內邊距 
*/.btn
/*設定表單組中按鈕的樣式 
*/.input-group .input-group-btn .btn@media(min-width:800px) and (max-width:1280px)}
@media(min-width:1281px)}
/*設定表單組元素統一向左浮動    即讓輸入框和按鈕和在一起
*/.input-group input,.input-group button
/*定義動畫幀 開始 
*/@-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 的animation 它共有8個屬性 animation name 規定 keyframes 動畫的名稱。用來定義乙個動畫的名稱。如果要設定幾個animation給乙個元素，我們只需要以列表的形式，用逗號 隔開 animation duration 動畫時長 ...

純CSS3實現圓圈動態發光特效動畫

效果圖 這個效果的具體實現主要是用到了css3 的animation 它共有8個屬性 animation name 規定 keyframes 動畫的名稱。用來定義乙個動畫的名稱。如果要設定幾個animation給乙個元素，我們只需要以列表的形式，用逗號 隔開 animation duration 動...

使用純CSS3實現乙個日食動畫

日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。所以要構造日食，我們須要2個物件 乙個代表月亮，乙個代表太陽。我們把整個日食過程分解為3個階段 1.緩慢移入 2.短暫停留 3.緩慢移出。在此期間。會產生3個彼此關聯的動畫。首先是月亮的位置移動，我們通過改變月亮的x座標 left或righ...