整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS 動畫和轉換是為網頁添加生動和吸引人的效果的關鍵。本文將引導你學習如何使用 CSS 動畫和轉換屬性，為你的網頁增添一份魔法。
過渡和動畫是為網頁元素添加平滑過渡效果和吸引人動畫的強大方式。
者：alphardex
鏈接：https://juejin.im/post/5e070cd9f265da33f8653f00
大きな星を摘んだなら、あなたは大きな富を手に入れる。
本文是筆者寫 CSS 時常用的套路。不論效果再怎么華麗，萬變不離其宗。
之前發的CSS 技巧[1]大部分都是依照本文的套路來寫的
有人問我為什么我能想出這么多的動畫？筆者閱番百部，對常用的動畫技巧了如指掌，同樣那些酷炫的網站只要細心觀察，也會給筆者帶來很多設計上的靈感。
一言以蔽之：只有多欣賞動畫，才能寫出好的動畫。
有時候，我們需要給多個元素添加同一個動畫，播放后，不難發現它們會一起運動，一起結束，這樣就會顯得很平淡無奇。
那么如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那么讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到 CSS 動畫有延遲（delay）這一屬性。舉個栗子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設定為比第一個元素晚 0.5 秒（也就是將延遲設為 0.5 秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。
這就是所謂的交錯動畫：通過設置不同的延遲時間，達到動畫交錯播放的效果。
本 DEMO 地址：Staggered Wave Loading[2]
還有一種經常用到的玩法：用 JS 將句子或單詞分割成字母，并給每個字母加上不同延時的動畫，同樣也很華麗。
本 DEMO 地址：Staggered LandIn Text[3]
一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積，即：delay + Math.abs(i - middle) * step，其中中間元素的下標middle=letters.filter(e=> e !=="").length / 2
本 DEMO 地址：Reveal Text[4]
所有有交錯特性的動畫都在這兒[5]
說到隨機性，我們可以實現一種更瘋狂的效果：給幾百個粒子添加交錯動畫，并且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純 CSS 模擬出下雪的效果。
又到了白色相簿的季節呢~為什么你寫 CSS 這么熟練啊？
本 DEMO 地址：Snow (Pure CSS)[6]
HTML 元素的狀態是可以動態變化的。舉個栗子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成"懸浮"狀態，這時我們就可以利用偽類:hover來選中這一狀態的按鈕，并對其樣式進行改變。
:hover是筆者最最常用的一個偽類。還有一個很常用的偽類是:nth-child，用于選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。
本 DEMO 地址：Button Hover Border Stroke With Float Text[7]
所有:hover的動畫都在這兒[8]
簡而言之，偽元素就是在原先的元素基礎上插入一個額外的元素，而且這個元素不充當 HTML 的標簽，這樣就能保持 HTML 結構的整潔。
什么情況下用偽元素呢？比如實現一根條子劃過文本的動畫，在這個動畫中每個文本都有屬于自己的一根條子，那么我們就可以用偽元素為每個文本生成一個條子，而無需特地在 HTML 標簽中加入條子的 div（當然，如果條子數量超過了 2 個，還是用 div 吧）
本 DEMO 地址：Header With Slide Bar[9]
之前有做過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右劃過去。
筆者就用漸變來模擬那道光，通過transform: translateX()將其平移至右邊。
但這樣明顯不對啊，這光為啥能被看見呢？不應該把它給"擋"起來嗎？
于是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了。
這就是障眼法的力量:)
本 DEMO 地址：Button Hover Shining[10]
更多障眼法可以看看這個作品[11]，一次性看個夠。
提示：這里最好將input作為label的子元素，這樣用戶點擊label時就能傳到input上。
默認的input太丑怎么辦？那就把它先抹掉，用appearance: none或opacity: 0都可以。
然后，利用兄弟選擇符~來定制和input相鄰的所有元素（+號也行，只不過只能選中最近的元素），例如可以用偽元素生成一個新的方框代替原先的input，利用偽類:checked和動畫來表示它被勾選后的狀態，本質上還是障眼法哦~
本 DEMO 地址：Todo List[12]
善用某些 CSS 特性，也可以為你的作品增色不少哦
PS 里的自由變換，各種 CSS 動畫都離不開它，可以 3D
例子就不舉了，因為幾乎我所有的動畫都用到了它
為盒子添加圓角，如果設定為50%則是圓形，很常用
調整多個頂點的border-radius可以做出不規則的曲邊形狀
本 DEMO 地址：Nav Tab[13]
為盒子添加陰影，增加盒子的立體感，如果多層疊加的話會使陰影更加絲滑
本 DEMO 地址：Pagination[14]
如果給box-shadow的擴張半徑設定足夠大的值，可以用它來遮住背景，而無需額外的 div 元素
本 DEMO 地址：Burger Menu[15]
文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽 3D 文本等效果
本 DEMO 地址：Staggered GlowIn Text[16]
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本 DEMO 地址：Menu Hover Fill Text[17]
漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
這個作品用到了 HTML 的dialog標簽，漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本 DEMO 地址：Confirm Modal[18]
PS 里的濾鏡，玩過的都懂，blur最常用
對背景應用濾鏡，產生毛玻璃的效果
本 DEMO 地址：Frosted Glass[19]
PS 里的混合模式，常用于文本在背景下的特殊效果
本 DEMO 地址：Menu Hover Image[20]
PS 里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思
本 DEMO 地址：Name Card Hover Expand[21]
投影效果，不怎么常用，適合立體感強的作品
本 DEMO 地址：Card Flip Reflection[22]
將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單
本 DEMO 地址：Shinchou Menu[23]
大家好，這里是 FEHub，每天早上 9 點更新，為你分享優質精選文章，與你一起進步。
如果喜歡這篇文章，希望大家點贊，評論，轉發。你的支持，是我最大的動力，咱們明天見 :)
關注 「FEHub」，每天進步一點點
[1]
CSS技巧: https://juejin.im/post/5e033c946fb9a0164b4ef360
[2]
Staggered Wave Loading: https://codepen.io/alphardex/pen/XWWWBmQ
[3]
Staggered LandIn Text: https://codepen.io/alphardex/full/KKwvKGY
[4]
Reveal Text: https://codepen.io/alphardex/full/eYYMYXJ
[5]
這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=staggered
[6]
Snow (Pure CSS 'Snow (Pure CSS)''): https://codepen.io/alphardex/full/dyPorwJ
[7]
Button Hover Border Stroke With Float Text: https://codepen.io/alphardex/pen/pooYKVa
[8]
這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=hover
[9]
Header With Slide Bar: https://codepen.io/alphardex/pen/jOEOEzZ
[10]
Button Hover Shining: https://codepen.io/alphardex/pen/eYYzXBZ
[11]
作品: https://codepen.io/alphardex/pen/VwwVLdM
[12]
Todo List: https://codepen.io/alphardex/full/rNNPQwa
[13]
Nav Tab: https://codepen.io/alphardex/full/abbWOPR
[14]
Pagination: https://codepen.io/alphardex/full/QWwwwpp
[15]
Burger Menu: https://codepen.io/alphardex/full/BaaKvVZ
[16]
Staggered GlowIn Text: https://codepen.io/alphardex/full/Exxodoq
[17]
Menu Hover Fill Text: https://codepen.io/alphardex/full/QWwveZG
[18]
Confirm Modal: https://codepen.io/alphardex/full/eYYxzBm
[19]
Frosted Glass: https://codepen.io/alphardex/full/pooQMVp
[20]
Menu Hover Image: https://codepen.io/alphardex/full/OJPmQGz
[21]
Name Card Hover Expand: https://codepen.io/alphardex/full/ZEEBRrq
[22]
Card Flip Reflection: https://codepen.io/alphardex/full/ExaZgxp
[23]
Shinchou Menu: https://codepen.io/alphardex/full/ExavZdV
女生總是會在被求婚的時候感動的痛哭流涕，作為程序員的你如果提前給自己的女票一個求婚的動畫，想象一下她會不會很感動呢？
今天就教大家用CSS3來做一個求婚的動畫效果吧，源碼已經放在了Github上，感興趣的可以認真看下源碼，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/wedding
CSS
首先我們來看看實際運行出來的效果，如下圖所示。
效果圖
在整個效果中，其實是用到了一系列的圖片，然后控制圖片的出現順序以及出現和結束的位置。
在這個效果中，主要應用到的是animation屬性，如果對這個屬性還不是很了解的，可以先去學習一下。接下來我們具體分析整個動態是怎么實現的。
首先，我們看看頁面的構成，包括文字，其他的都是圖片，包括三個煙花效果，男孩，女孩，男孩手中的花，底部的花。頁面HTML代碼如下所示。
頁面HTML
文字部分主要是有一個平移的效果，所以使用translate屬性即可。
文字部分動畫
在文字旁邊的煙花效果實際是一張圖片從中心點向外的擴張，因此可以使用scale屬性實現，然后通過時間的不同，來顯示出不同的煙花。
煙花效果
圖中的女孩實際是站著不動，只是通過改變透明度來顯示出動畫效果，因此可以使用opacity屬性來實現。
女孩效果
圖中的男孩實際有一個向女孩移動的效果，因此也是通過translate屬性來實現。
男孩效果
男孩手中的鮮花實際上也是一個由中心點向外擴張的效果，并且改變透明度，通過scale和opacity屬性實現。
手中鮮花效果
底部的鮮花實際是由兩張圖片重復顯示組成，然后給每張圖片增加一個動畫效果，從效果圖中可以看出是有一個從下到上的平移過程，因此也是使用translate屬性實現。
底部鮮花效果
至此所有的動畫效果都已經講解完畢了，雖然每個動畫只是用到一兩個屬性，但是組合之后就可以完成這樣一個小巧的求婚動畫，是不是很有趣呢?
當然文中的代碼并不是全部的實現，文中的代碼只包括使用CSS3的動畫效果的實現，全部的代碼可以去Github上去看。
今天的這篇文章學會了嗎？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
