鐵人檔案
這次要寫的主題是頁面讀取中的動畫 part 2這個效果其實很簡單 針對區塊做高度縮放，然後讓縮放效果依區塊先後出現如截圖這樣的效果一樣設定好基本架構 <d...
今天來寫滿常見的收合區塊一樣先把架構放好 /*引入material icon*/ <link href="https://fonts.googl...
今天的主題是帶有水波動畫效果的裝飾性文字這個效果跟 實作 css animation - 噪點背景動畫的原理其實一樣 只差在增加了以文字做為背景的剪裁一樣把架構...
今天的主題是色塊遮擋文字的效果使用偽元素(after)產生的色塊將文字蓋住，再依時間將色塊縮小至無寬度就能顯示出原本的文字一樣把基本架構寫好 <div c...
今天要寫的主題是搜尋框變形動畫代表搜尋的放大鏡 icon按下後會拉伸為搜尋框的效果一樣把基本架構寫好input 是做為搜尋框使用， span 則是放大鏡 ico...
今天要寫的主題是背景漂浮泡泡的效果動畫的寫法跟 飄移雲朵該篇的概念幾乎相同 只差元件是做 Y 軸位移一樣把基本架構寫好 <ul class="b...
今天要寫的主題是圖片位移的效果左/右兩邊的圖片依序往左/右做散開動作 中間的圖片不動一樣把基本架構寫好 <div class="containe...
今天要寫的主題是撲克卡牌翻轉的效果滑鼠滑入卡牌區塊後產生翻牌的效果一樣把基本架構寫好 <div class="centered-wrap&quo...
今天要寫的主題是理髮店旋轉燈如下圖的這種東西↓一樣把基本架構寫好 <div class="centered-wrapper">...
今天要寫的主題是旋轉太極的效果用 css 畫出太極的符號 再讓它做反覆旋轉的效果一樣把基本架構寫好 <div class="centered&q...
