iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

30天的css animation修練 系列

鐵人鍊成 | 共 30 篇文章 | 19 人訂閱 訂閱系列文
DAY 1

初探 css animation -第一天的美好邂逅(?)

前言 本人是個普通css還寫得零零落落,爬的不好還想飛的低手設計師 第一次參加活動,激勵一下自己的心志XD 若有不週之處,煩請看官們海涵哪! 馬上來進入正題 首...

2018-10-07 ‧ 由 dc88 分享
DAY 2

初探 css animation - 來勢洶洶的動畫屬性(上)

承接上一篇的簡寫css animation 這篇要來說明css動畫究竟有哪些屬性,然後把所有屬性都輕輕帶過一輪 屬性 屬性簡短說明+預設值 ani...

2018-10-08 ‧ 由 dc88 分享
DAY 3

初探 css animation - 來勢洶洶的動畫屬性(下)

接續上一篇提到的動畫屬性,這篇要把剩下的動畫屬性介紹完畢 要小心不要寫太多廢話啊XD 汗 一樣是上篇的表格。 屬性 屬性簡短說明+預設值 anim...

2018-10-09 ‧ 由 dc88 分享
DAY 4

初探 css animation - 時間軸跟關鍵影格

好的,在上篇說明完動畫屬性後 要進到時間軸跟關鍵影格的部分了 關鍵影格的定義用 @keyframes 時間軸有兩種寫法,基本上 from 等同於 0% , to...

2018-10-10 ‧ 由 dc88 分享
DAY 5

初探 css animation - 進擊的 @keyframes 襲來

上一篇提到 @keyframes 裡面可以放 width。 這篇要來深入了解到底還有什麼特性可以寫在 @keyframes 裡面,以下稍微依功能做了整理。 其實...

2018-10-11 ‧ 由 dc88 分享
DAY 6

實作 css animation - 我是天空裡的一片雲 飄移雲朵應用

雖然標題很有詩意,但是要來實做的東西其實滿簡單的XD 拆解動畫效果,物件做 x 軸方向位移,背景不動。 首先先把架構跟class依序安排好 <div id...

2018-10-12 ‧ 由 dc88 分享
DAY 7

實作 css animation - 跳吧跳吧 彈跳球應用

今天要來寫的是彈跳球 拆解動畫效果,物件做 y 軸方向位移,物件隨動畫時間縮放長寬 (原本長寬1:1/下落時球體長度拉長/觸碰到地面球體寬度變寬),背景不動。...

2018-10-13 ‧ 由 dc88 分享
DAY 8

實作 css animation - 儀錶板加速動畫

這次要寫的主題是儀表板上指針的加速動畫 拆解動畫效果:指針隨時間依底部旋轉,背景不動 首先先把架構跟class依序安排好 <!--儀錶板主體-->...

2018-10-14 ‧ 由 dc88 分享
DAY 9

實作 css animation - 噪點背景動畫

這次要寫的主題是噪點背景動畫 像傳統式電視機壞掉 很多灰階顆粒閃來閃去的樣子 這個效果其實背後的原理很簡單,只是依時間軸來移動背景圖片而已 首先把架構依序放好...

2018-10-15 ‧ 由 dc88 分享
DAY 10

實作 css animation - pre load 動畫 part1

這次要寫的主題是頁面讀取中的動畫 part 1 這個效果其實很簡單 只是針對外框做轉動效果 一樣設定好基本架構 <div class="pre-...

2018-10-16 ‧ 由 dc88 分享