Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day15 ， 不知不覺寫到了15天，不曉得大家在這15天有沒有收穫呢，接下來幾天分享的是css進階技巧及補充小知識，因為篇幅有限只能分享重點給大家，大家學起來後試著做看看吧 !

css進階篇

一、 輕鬆做出CSS動畫
二、 動畫常用CSS - transform
三、 偽元素
四、 偽元素運用

一、 輕鬆做出CSS動畫

如果網站只有靜態的會顯得比較單調，所以我們需要設計一些互動效果，像是hover、active、css動畫，讓我們的網頁變活潑，也會讓人體驗更好，更有意願停留觀看

如何寫css 動畫 ?
關鍵影格

• animation : 關鍵影格 動畫秒數
• @keyframes 關鍵影格{ 裡面包css樣式 }
  我們可以看到這個淡入的範例，就是運用 css 動畫效果寫成，我們要先用**@keyframes 指定關鍵影格**，然後在你想要套用的地方加上animation　指定關鍵影格

範例- codepen 背景圖片淡入

0% ~ 100% 動態變化
我們可以看到動畫其實就是一格一格組成，可以有0%~100%變化，你可以在裡面自行設定你想要的css樣式(寫法如上)，
這邊我在我的side project有寫了一個讀取動畫，給大家參考

範例-組合讀取動畫

是不是很有趣呢! 試著寫看看吧 !

二、 動畫常用Css - transform

transform一般常用在動畫效果上，因為他不會影響排版，是不占空間

transform

• scale(倍率) 放大縮小
• rotate(角度) 旋轉
• transform: translate(x,y) 位置移動變化
• transform: translateX(座標) X軸位置
• transform: translateY(座標) Y軸位置

範例 - 字體大小變化
舉例來說，假設我想要寫字體大小變化，我們是不是第一個想到用font-size去做變化，可是如果使用font-size變化，會發現因為font-size 16>20px 過程， 空間變大那我整個區塊也會被推擠，呈現動畫效果就會比較不好，這時候就適合使用transform來做變化。

我們也可以使用線上動畫庫-animista 來修改css動畫

三、 偽元素

什麼是偽元素?

偽元素是虛擬的，我們利用 css 創造變出一個區塊，可以放入文字、圖片、區塊等
既然是虛擬的有必要存在嗎? 好像 html 也能寫出來呀，為什麼會需要偽元素呢?
因為**有些元素使用一般 html 不方便，**偽元素是虛擬的不占空間，下面會在舉例偽元素的運用

偽元素基礎

• ::before 物件前
• ::after 物件後

範例-偽元素基礎

我們可以看到我們運用偽元素，在前後新增了一些文字

偽元素寫法

這就是基礎偽元素寫法，這邊做個簡單介紹，偽元素算是比較進階的css教學，使用上是偶爾使用，常用在特定地方，下面我們可以瞭解偽元素運用地方，真的有遇到在學習也可以喔! 有個基礎概念就好了 !

四、 偽元素運用

偽元素運用案例

像是前後提示線，或是希望不要影響排版的，都可以使用偽元素

另一個常用在的地方是hover 效果搭配使用(如下圖範例)
範例-hover移過去 偽元素顯示

這邊我的寫法是先寫一個偽元素，然後設定好背景圖片顯示，設定合適寬高，然後一開始預設隱藏，設定在hover (滑鼠移過去)時，偽元素顯示，就會呈現像圖片效果，是不是很有趣呢

偽元素的搭配使用非常廣泛，這邊帶大家認識偽元素，也了解偽元素，想深入學習的可以在google 深入學習，學會靈活運用偽元素，讓你的網站更豐富
遇到非常規的排版，也可以用偽元素嘗試看看