有鑑於用遍不少的前端 UI 框架,對於其 CSS 特效往往是不知其所以然。若要依情況改寫的話,便遇上了不小困難。Udemy 上的 CSS3 Animations, Transforms and Transitions Ultimate Guide 課程有不少的範例和實作簡介,便決定從此來下手。這邊筆記「當滑鼠游標滑過連結後,出現顯眼的下底線」效果。
課程相關資訊
[連結]:https://www.udemy.com/course/css3-animations-transforms-and-transitions-ultimate-guide/
本篇範圍:Chapter 5 ( Creative Link Effect )
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
程式碼
1. 由於 border 屬性並沒有辦法適用 transition,所以要改用 ::after 偽元素的方法來執行
2. 運用 position:relative, absolute 來避免造成游標滑過時,元素出現位移的狀況
3. 若一開始不指定高度,那就是在 hover 時改變高度並加上動畫
4. 若一開始有指定高度,那用 transform scale 的方法將其在 0 倍和 1 倍縮放中切換,就達成隱藏/顯示的效果
https://github.com/andy922200/css3-animations-transforms-and-transitions-ultimate-guide/commit/0f4e17134c3a924093c4827640a8532fde1e4b77
系列文章
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (9)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (8)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (72)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (71)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (70)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (69)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (68)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (67)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (66)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (65)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (64)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (63)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (62)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (61)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (60)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (59)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (58)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (57)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (56)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (55)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (54)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (53)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (52)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (51)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (50)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (49)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (48)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (47)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (46)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (45)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (44)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (43)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (42)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (41)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (40)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (36)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (35)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (34)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (33)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (32)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (31)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (30)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (29)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (28)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (27)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (26)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (25)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (24)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (23)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (22)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (21)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (20)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (18)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (17)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (16)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (15)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (14)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (13)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (12)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (11)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (10)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (1)
按讚加入粉絲團延伸閱讀