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> 結束標籤之前放入以下原始碼：

<!-- 載入 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

說明：

• 各自的按鈕，以淡入淡出切換內容的出現。

• 只需要修改 css 的部份即可。

提供 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;
}

預設的樣式：

預設狀態

完成結果示意：

參考作法：