iT邦幫忙

鐵人檔案

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

30天的css animation修練 系列

30天中從零基礎開始學習css animation並加以應用

鐵人鍊成 | 共 30 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文
DAY 11

實作 css animation - pre load 動畫 part2

這次要寫的主題是頁面讀取中的動畫 part 2這個效果其實很簡單 針對區塊做高度縮放,然後讓縮放效果依區塊先後出現如截圖這樣的效果一樣設定好基本架構 <d...

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

實作 css animation - 收合區塊動畫

今天來寫滿常見的收合區塊一樣先把架構放好 /*引入material icon*/ <link href="https://fonts.googl...

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

實作 css animation - 水波動態裝飾文字

今天的主題是帶有水波動畫效果的裝飾性文字這個效果跟 實作 css animation - 噪點背景動畫的原理其實一樣 只差在增加了以文字做為背景的剪裁一樣把架構...

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

實作 css animation - 色塊遮擋文字效果

今天的主題是色塊遮擋文字的效果使用偽元素(after)產生的色塊將文字蓋住,再依時間將色塊縮小至無寬度就能顯示出原本的文字一樣把基本架構寫好 <div c...

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

實作 css animation - 搜尋框變形小動畫

今天要寫的主題是搜尋框變形動畫代表搜尋的放大鏡 icon按下後會拉伸為搜尋框的效果一樣把基本架構寫好input 是做為搜尋框使用, span 則是放大鏡 ico...

2018-10-21 ‧ 由 dc88 分享
DAY 16

實作 css animation - 背景漂浮泡泡

今天要寫的主題是背景漂浮泡泡的效果動畫的寫法跟 飄移雲朵該篇的概念幾乎相同 只差元件是做 Y 軸位移一樣把基本架構寫好 <ul class="b...

2018-10-22 ‧ 由 dc88 分享
DAY 17

實作 css animation - 相片位移

今天要寫的主題是圖片位移的效果左/右兩邊的圖片依序往左/右做散開動作 中間的圖片不動一樣把基本架構寫好 <div class="containe...

2018-10-23 ‧ 由 dc88 分享
DAY 18

實作 css animation - 撲克卡牌翻轉效果

今天要寫的主題是撲克卡牌翻轉的效果滑鼠滑入卡牌區塊後產生翻牌的效果一樣把基本架構寫好 <div class="centered-wrap&quo...

2018-10-24 ‧ 由 dc88 分享
DAY 19

實作 css animation - 理髮店旋轉燈

今天要寫的主題是理髮店旋轉燈如下圖的這種東西↓一樣把基本架構寫好 <div class="centered-wrapper">...

2018-10-25 ‧ 由 dc88 分享
DAY 20

實作 css animation - 旋轉太極

今天要寫的主題是旋轉太極的效果用 css 畫出太極的符號 再讓它做反覆旋轉的效果一樣把基本架構寫好 <div class="centered&q...

2018-10-26 ‧ 由 dc88 分享