# 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：
```markup
```
結果示意：
{% embed url="" %}
參考作法：
{% embed url="" %}
## 練習 2：元素固定螢幕右側，點擊滑出
指定檔名：`fixed_right_sidebar.html`
說明：
* 做一個固定於螢幕右側的介面，點擊按鈕後可以像抽屜那樣的展開、關閉。
* 展開、關閉，需加上 `transition` 做過場效果。
提供 JS，在 `` 結束標籤之前放入以下原始碼：
```markup
```
結果示意：
{% embed url="" %}
參考作法：
{% embed url="" %}
## 練習 3：內容的淡入淡出
指定檔名：`content_fadein_fadeout.html`
說明：
* 各自的按鈕，以淡入淡出切換內容的出現。
* 只需要修改 css 的部份即可。
提供 html：
```markup
```
提供 CSS：
```css
div.content_container{
position: relative;
border: 1px solid black;
width: 100%;
}
div.content1, div.content2{
/* 預設的定位 */
position: absolute;
top: 0;
left: 0;
/* 寫 opacity、z-index 的 css */
/* 寫轉場的 CSS(針對 opacity) */
}
/* 該區塊出現時，修改相關樣式 */
div.content1.-on, div.content2.-on{
/* 寫 CSS */
}
```
提供 JS，在 ` ` 之前，放入以下原始碼：
```markup