8. 大量練習
練習 1：CSS Animation Loading Icon
指定檔案： animation_loading_icon.html
說明：
一個 div，寬高都是 50px。
上邊框比較深的紅色
hsla(0, 100%, 50%, 1)，其它邊框比較淺的紅色hsla(0, 50%, 80%, .5)。圓角 50%。
寫一個 css animation 動畫效果，如下「結果示意」。
提供 html：
<div class="loading_icon"></div>結果示意：
參考作法：
練習 2：元素固定螢幕右側，點擊滑出
指定檔名：fixed_right_sidebar.html
說明：
做一個固定於螢幕右側的介面，點擊按鈕後可以像抽屜那樣的展開、關閉。
展開、關閉，需加上
transition做過場效果。
提供 JS，在 </body> 結束標籤之前放入以下原始碼：
結果示意：
參考作法：
練習 3：內容的淡入淡出
指定檔名：content_fadein_fadeout.html
說明：
各自的按鈕，以淡入淡出切換內容的出現。
只需要修改 css 的部份即可。
提供 html：
提供 CSS：
提供 JS，在 </body> 之前，放入以下原始碼：
結果示意：
參考作法：
練習 4：次選單淡入淡出
指定檔名：submenu_fadein_fadeout.html
結果示意：
提供 html：
參考這個 codepen，沒有淡入淡出的方式：
改成淡入淡出。
參考作法：
參考
練習 1：彩色邊框旋轉
指定檔名：color_border_rotate.html
說明：
做一個區塊彩色邊框的旋轉。
提供 html：
提供部份 CSS：
預設的樣式：
完成結果示意：
參考作法：
練習 2：水效果
指定檔名：water_effect.html
提供 html：
提供以下部份 css：
預設的樣式：
完成結果示意：
參考作法：
Last updated