練習 1：CSS Animation Loading Icon
指定檔案： animation_loading_icon.html
說明：
上邊框比較深的紅色 hsla(0, 100%, 50%, 1)，其它邊框比較淺的紅色 hsla(0, 50%, 80%, .5)。
寫一個 css animation 動畫效果，如下「結果示意」。
提供 html：
<div class="loading_icon"></div>
結果示意：
參考作法：
練習 2：元素固定螢幕右側，點擊滑出
指定檔名：fixed_right_sidebar.html
說明：
做一個固定於螢幕右側的介面，點擊按鈕後可以像抽屜那樣的展開、關閉。
展開、關閉，需加上 transition 做過場效果。
提供 JS，在 </body> 結束標籤之前放入以下原始碼：
<!-- 載入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// DOM 載入完成之後
$(function(){
// 點擊
$("button.btn_drawer").on("click", function(){
// -open 的樣式切換
$(this).closest("div.right_sidebar").toggleClass("-open");
});
});
</script>
結果示意：
參考作法：
練習 3：內容的淡入淡出
指定檔名：content_fadein_fadeout.html
說明：
提供 html：
<button type="button" class="btn1">按鈕1：出現內容1的部份</button>
<button type="button" class="btn2">按鈕2：出現內容2的部份</button>
<div class="content_container">
<div class="content1 -on"><img src="https://via.placeholder.com/300x300"><br><a href="https://tw.yahoo.com" target="_blank">內容 1：yahoo 連結</a></div>
<div class="content2"><img src="https://via.placeholder.com/500x500"><br><a href="https://www.google.com" target="_blank">內容 2：google 連結</a></div>
</div>
提供 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，在 </body> 之前，放入以下原始碼：
<!-- 載入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
// 點擊按鈕1
$("button.btn1").on("click", function(){
// div.content1 和 div.content2 都移除 -on 樣式
$("div.content1, div.content2").removeClass("-on");
// div.content1 加上 -on 樣式
$("div.content1").addClass("-on");
});
// 點擊按鈕2
$("button.btn2").on("click", function(){
// div.content1 和 div.content2 都移除 -on 樣式
$("div.content1, div.content2").removeClass("-on");
// div.content2 加上 -on 樣式
$("div.content2").addClass("-on");
});
});
</script>
結果示意：
參考作法：
練習 4：次選單淡入淡出
指定檔名：submenu_fadein_fadeout.html
結果示意：
提供 html：
<div class="div_block">
<p class="para">有次選單</p>
<div class="inner_block">
<ul>
<li><a href="https://tw.yahoo.com" target="_blank">項目一</a></li>
<li><a href="https://tw.yahoo.com" target="_blank">項目二</a></li>
<li><a href="https://tw.yahoo.com" target="_blank">項目三</a></li>
</ul>
</div>
</div>
<div>
<p>下方內容</p>
<img src="https://picsum.photos/seed/picsum/200/300">
</div>
參考這個 codepen，沒有淡入淡出的方式：
改成淡入淡出。
參考作法：
參考
練習 1：彩色邊框旋轉
指定檔名：color_border_rotate.html
說明：
提供 html：
<div class="rainbow">
彩色邊框旋轉
</div>
提供部份 CSS：
@keyframes rotation{
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
*, *::before, *::after {
box-sizing: border-box;
}
div.rainbow{
width: 200px;
height: 100px;
display: inline-block;
padding: 10px;
/*border: 1px solid red;*/
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
/* 這個區塊做出四個背景色 */
div.rainbow::before{
content: "";
display: inline-block;
width: 230%;
height: 230%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
/*border: 1px solid blue;*/
z-index: -2;
background-image: linear-gradient(green, green), linear-gradient(blue, blue), linear-gradient(purple, purple), linear-gradient(orange, orange);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%;
background-repeat: no-repeat;
}
div.rainbow::after{
content: "";
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
background-color: white;
/*border: 1px solid brown;*/
}
預設的樣式：
完成結果示意：
參考作法：
練習 2：水效果
指定檔名：water_effect.html
提供 html：
<div class="circle">
<div class="wave"></div>
</div>
提供以下部份 css：
@keyframes water{
0%{
transform: translate(-50%, -70%) rotate(0deg);
}
100%{
transform: translate(-50%, -75%) rotate(360deg);
}
}
body{
margin: 0;
}
* {
box-sizing: border-box;
}
.circle{
display: inline-block;
width: 150px;
height: 150px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid white; /* black */
box-shadow: 0 0 0 5px #4973ff; /* 外圍藍色 */
border-radius: 50%;
}
.wave{
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: 0 0 50px hsla(0, 0%, 0%, .5) inset;
}
.wave::before{
content: '';
display: inline-block;
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
border-radius: 0%;
transform: translate(-50%, -70%) rotate(0deg);
background: red;
}
預設的樣式：
完成結果示意：
參考作法：
