效果圖：
滑鼠滑入按鈕時，按鈕中原本的文字從下方滑走，同時在原位置上，按鈕文字單個挨個浮現。（原本文字和後面單個浮現的文字內容可不一致，可根據需要進行調整）。
實現思路：
用div模擬button按鈕，並將按鈕文字單個單個的放在其子元素span中，用於後面的單個顯示。而滑鼠沒有觸發時的靜止狀態文字則由div按鈕的偽類::before來承擔。在靜態狀態下將所有span元素的opacity透明度設定為0（元素不可見了，但仍佔據原來的空間），當滑鼠滑入按鈕時，設定所有span元素的透明度為1，但從前往後給span設定不同的延時時間，即形成了上圖中文字依次漸入的效果。滑鼠滑入時原來的文字也是一樣，通過設定opacity為0隱藏，且給乙個豎直方向移動的動畫即可。
**：
1） html結構
get
started
now
/* 靜態按鈕的文字 */
.btn::before
.btn:hover::before
/* 滑鼠滑入逐個漸入的文字 */
.btn>span
.btn:hover>span
.btn:hover>span:nth-child(1)
.btn:hover>span:nth-child(2)
.btn:hover>span:nth-child(3)
/* ...有多少個字就寫多少個延時，每次遞增0.05s差不多，可自行調整，空格最好也算上，不然效果會不太順暢 */
效果圖：
一共用了三張氣泡的（png格式，背景透明）作為背景圖，需自己提前繪製，或者也可以用css繪製（前提是環形氣泡中間不要求是透明的）。
實現思路：
用6個li模擬出現的所有氣泡（數量自定，但數目較多一些顯得自然一些，建議四五個及以上），設定兩個不同的動畫效果（移動translate、大小scale變化），隨機賦給6個li作為動畫animation，並分別給定不同的延時時間（思路同上述效果），營造出隨意的感覺即可。
**：
1）html結構：
.bubble .b-1
.bubble .b-2
.bubble .b-3
.bubble .b-4
.bubble .b-5
.bubble .b-6
/* 比賽入口氣泡動畫 */
@keyframes bubble1
50%
100%
}@keyframes bubble2
50%
100%
}
【tips】keyframes中0%和100%時必須設opacity為0，才有漸入漸出的效果，不然會直愣愣地消失，體驗不好。
【相容性】animation和transform都涉及相容性問題（為了整潔起見，上述css未新增帶瀏覽器字首的相容**）：
效果圖：
實現思路：
先講其中乙個框的實現：每乙個框乙個div，每乙個「框」分三部分組成，::before實現漸變邊框（實際上是漸變背景），::after實現內部白色背景，最後div的其他子元素作為框內的文字內容顯示。使用animation動畫實現::before漸變背景旋轉，即可模擬邊框動畫：
這個時候會遇到li內部子元素被::after覆蓋顯示不了的問題（::after的顯示層級高於正常流元素），給內部子元素加position: relative;z-index: 1;即可（若有其他更好的解決辦法，望告知）。
**：
1）html結構
.con
.box
.box>*
z-index: 3;
}.box:nth-child(2)
.box:nth-child(3)
.box::before
.box::after
@keyframes rotate
100%
}
【tips】為了邊框動畫效果中顏色過渡自然一點，linear-gradient的顏色值不要設定兩個顏色直接從0%到100%顯示，親測 linear-gradient(45deg,#51f4fa 35%,#da7efc 60%) 下表現較好。
【tips】為了使上述動畫效果適用於不同尺寸的「框」，建議::after和::before元素的寬高設定相對單位（當然是相對於外層元素div.con），這樣其他地方需要用到這個效果時，直接加上類名即可完美適配。當然，此時需要給外層li position:relative，而::after和::before position:absolute。
【相容性】background-image（左）和border-image（右）
用 CSS 實現酷炫的動畫充電效果
循序漸進，看看只使用 css 可以鼓搗出什麼樣的充電動畫效果。當然，電池充電，首先得用 css 畫乙個電池，這個不難，隨便整乙個 歐了，勉強就是它了。有了電池，那接下來直接充電吧。最最簡單的動畫，那應該是用色彩把整個電池灌滿即可。方法很多，也很簡單，直接看效果 有內味了，如果要求不高，這個勉強也就能...
CSS 實現炫酷的動態背景效果
活不多說，直接開始 效果圖 乙個萬能的div class bgc div 主要是css部分 使用background屬性 純色線性漸變 linear gradient 徑向漸變 radial gradient 角向漸變 conic gradient 多重線性漸變 repeating linear g...
巧用 CSS 實現酷炫的充電動畫
循序漸進，看看只使用 css 可以鼓搗出什麼樣的充電動畫效果。wap.youxs.org 當然，電池充電，首先得用 css 畫乙個電池，這個不難，隨便整乙個 歐了，勉強就是它了。有了電池，那接下來直接充電吧。最最簡單的動畫，那應該是用色彩把整個電池灌滿即可。方法很多，也很簡單，直接看效果 有內味了，...