iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

CSS 讓你的網頁動起來 系列

CSS不僅可以美化網頁,善用animation、transition更可以讓畫面活起來!

鐵人鍊成 | 共 30 篇文章 | 28 人訂閱 訂閱系列文 RSS系列文 團隊神龍特攻隊 - it 宏的逆襲
DAY 21

CSS微動畫 - 圖片不裁切,純css實現分格淡出

Q: 還有什麼特別的可以寫嗎?A: 可能... 再回去Loading吧(๑¯∀¯๑) 本篇要來做整張圖分隔淡出的效果!換的方式想 ... 就是上面好幾格白的...

2021-09-29 ‧ 由 粒粒 分享
DAY 22

CSS微動畫 - 彈窗也要很動感,動畫不能只做一半

Q: 9月的最後一天來點特別的吧?A: 常見的彈窗來一個! 樣式先做好是很重要的! 首先來個簡易的按鈕.btn-open來開啟彈窗,然後在彈窗內有個關閉按鈕...

2021-09-30 ‧ 由 粒粒 分享
DAY 23

CSS微動畫 - Loading又來了!文字版再出擊~

Q: 倒數 8 篇了!逐漸進入養老階段,會一直Loading嗎?A: Loading只是代表,主要是可以看看有哪些變化~~ 幾天前有出個文字版本的Loadi...

2021-10-01 ‧ 由 粒粒 分享
DAY 24

CSS微動畫 - Animation也會影響網頁效能?

Q: 終於要講效能了!A: 以Loading為範例講黑~ Animation Loading 直線版本 前幾篇有做過Loading效果的動畫,今天延續下去!...

2021-10-02 ‧ 由 粒粒 分享
DAY 25

CSS微動畫 - Animation會影響網頁效能!

Q: 今天的好像沒有範例?A: 文長慎入,但有看有差!! 動畫不能只是動畫,還要動得不費力 上一篇有提到在做動畫時,改變不同的屬性在重新渲染畫面時的成本會不...

2021-10-03 ‧ 由 粒粒 分享
DAY 26

CSS微動畫 - 卡片簡約動態效果,低調的小心機

Q: 剩下 5 篇來點實用也不實用的範例吧~~A: 畢竟效果還是要看設計的美感,這是很看天份的(望天 今天的主題是「卡片」。在有些形象網站中可以看到產品或是...

2021-10-04 ‧ 由 粒粒 分享
DAY 27

CSS微動畫 - 卡片簡約動態效果,翻轉是另一種感覺~

Q: 484開始有點詞窮了?A: 寫程式還是比寫文章有靈感吶.. 繼上一篇後,要來為卡片創作出另一種效果~跟上一篇有點類似,但因為程式碼有諸多地方不一樣,所...

2021-10-05 ‧ 由 粒粒 分享
DAY 28

CSS微動畫 - 手機版下拉選單,兩種效果可以選

Q: 我要下拉選單,黑底跟選單一起推出來呢?還是淡出呢?A: 前幾章的小技巧有掌握好,一切都好上手 之前常常會看到有些網站手機版的下拉選單,樣式主要分為兩種...

2021-10-06 ‧ 由 粒粒 分享
DAY 29

CSS微動畫 - Transform不一定是位移的最佳選擇

Q: 效能跟效果之間怎麼取捨?A: 如果效果不複雜,用一些渲染成本比較高的寫法也無妨 新屬性搭配動畫來點新效果 本篇介紹一個新的屬性-webkit-back...

2021-10-07 ‧ 由 粒粒 分享
DAY 30

CSS微動畫 - 有始有終!心得跟最後動畫分享

Q: 第 30 天了,心中有沒有很興奮?A: 好緊張耶.. 最後一天了來個結語~~ 之前從來沒有想過要參加鐵人賽 當初的對話是這樣的... 同事A:「走啊...

2021-10-08 ‧ 由 粒粒 分享