# CSS Application

> [name=Chenkol_baby]
> [time=Fri, Oct 2, 2020]
> [Jack Hu](https://github.com/gn0262487838)

## Background 應用

### 基本用法

### 進階用法-滾動視差


> By background-attachment

bg {
  background-image: url(圖片路徑);
  background-size: cover;
  background-position: X位置 Y位置;
  background-repeat: no-repeat;
  background-attachment: fixed; 
}

注意: 實務上此效果在ios手機/ipad上是無效。

---

基於上述並添加濾鏡效果。
> CSS

.bg.overlay {
  position: relative; 
}
.bg.overlay::before {
  content: "";
  background-color: #ffccff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .5;
}

grid system 採用bootstrap 4.5。
> HTML

<div class="bg overlay">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 text-center">
        <h2 class="font-weight-bold text-white">Join Us</h2>
        <p class="text-white">Lorem ipsum dolor sit amet...</p>
        <p class="mb-0"><a href="#" class="btn btn-primary text-white py-3 px-4">Contact Us</a></p>
      </div>
    </div>
  </div>
</div>

###### 參考

[bootstrap](https://getbootstrap.com/)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)

### 進階用法-滾動視差 + clip-path


> CSS

主要在於clip-path大小的調整。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  min-height: 150vh;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("/images/jpg/M1_P4_BK.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  clip-path: circle(150vh at 50% -50vh);
}

> HTML

<section>
  <div class="content"></div>
</section>

###### 參考

[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)

### 進階用法-滾動視差，利用JS控制


要件:
1. 利用absolute疊合四張圖片(建議四張圖片寬度2049px,高度1152px,dpi92)
2. 藉由pseudocode及mix-blend-mode可疊合色調(原四張圖片皆有自己的配色)
3. 通常圖片設定w100%,h100%，有可能讓圖片比例跑掉，可利用object-fit:cover來保持圖片尺寸比例

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  width: 100%;
  min-height: 2000px;
  background-color: #0a2a43;
}

section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  background: linear-gradient(to top, #0a2a43, transparent);
  z-index: 10000;
}

section::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #0a2a43;
  z-index: 10000;
  mix-blend-mode: color;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h2 {
  position: relative;
  font-size: 8rem;
  color: #ffffff;
  z-index: 1;
}

div p {
  margin: 15px;
  padding: 50px;
  font-size: 2rem;
  color: #ffffff;
}

#road {
  z-index: 2;
}

> HTML

<section>
  <img id="bg" src="https://i.imgur.com/A5SGiU6.jpg" alt="">
  <img id="moon" src="https://i.imgur.com/fqvSz9B.png" alt="">
  <img id="montain" src="https://i.imgur.com/e6Arten.png" alt="">
  <img id="road" src="https://i.imgur.com/knkJErU.png" alt="">
  <h2 id="text">Parallax Scrolling</h2>
</section>
<div>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. A cum ea iure voluptas, pariatur quas minus totam. Commodi hic dolore aliquam ex sequi officia vel asperiores ipsum, est beatae natus, aliquid atque deleniti debitis ad. Error voluptas natus expedita! Dicta optio eius omnis at deserunt, error cum tenetur ex nostrum, quisquam sequi voluptate odit distinctio autem obcaecati quibusdam repellat deleniti aperiam vitae architecto accusamus? Labore voluptates officia molestiae, architecto perferendis natus neque ipsum ullam nulla corrupti nesciunt atque asperiores, quisquam inventore hic facere, expedita temporibus sed. Corporis, amet nesciunt. Esse dignissimos vel numquam obcaecati nam, nisi repellendus quidem et quis impedit aut doloribus sapiente rem veniam nihil? Cumque accusantium, ipsam esse quae tempore doloremque aspernatur. Fugit deserunt officiis provident eveniet architecto numquam expedita nemo mollitia, sapiente totam eaque eius sint incidunt, iusto nostrum necessitatibus neque soluta repellat iste itaque aliquam debitis cupiditate. Sit voluptas eaque aliquid obcaecati. Illo veritatis maiores tempora provident autem harum suscipit quis. Amet ex quod voluptas, fuga ut magnam quas consectetur. Aliquam possimus soluta iste cum ea iusto enim autem, eveniet sint accusamus modi vitae necessitatibus? Cupiditate rem ex doloribus nostrum quibusdam veritatis tenetur, possimus eius repudiandae facilis ratione dicta debitis aliquam inventore fugit, ea alias optio ab hic sequi officiis atque provident dignissimos! Quia perspiciatis, vitae ducimus iste ab deleniti adipisci commodi earum excepturi explicabo in exercitationem officiis, ratione nulla quam odio voluptatem laudantium ex consequuntur. Culpa at temporibus, voluptates laboriosam velit reiciendis fugit! Nulla vero veniam sit sequi odit animi, quasi labore beatae quisquam aliquid quibusdam quos cum aut nisi in voluptates eius iure, tempore voluptatem! Non illum quia neque voluptatem ipsam rem molestiae numquam repudiandae voluptatibus necessitatibus eum tenetur, aliquam dolorum cum facere deleniti inventore earum voluptate ab, dolores atque. Quibusdam iusto asperiores minima, qui culpa ipsa, tenetur delectus corrupti dolores blanditiis obcaecati ex veritatis doloribus modi! Animi odio facilis porro modi magnam corporis odit maiores praesentium, aperiam architecto? Veniam et quis molestias sint esse, doloribus commodi unde dolorem asperiores placeat pariatur distinctio, voluptate laborum repellendus, illum numquam quod itaque fugiat praesentium quae cumque quasi reiciendis quaerat! Harum suscipit minus est nulla, quam dicta veniam praesentium cumque, aspernatur incidunt accusamus iure ducimus veritatis rem eius? Aut eius illo voluptatibus nobis! Maxime beatae animi nisi, praesentium quia corporis doloremque unde! Harum ipsum nostrum, optio animi et neque eveniet sunt reiciendis ipsam autem ullam voluptatem corrupti, numquam praesentium blanditiis debitis? Quibusdam, facilis voluptatem perspiciatis ipsa reiciendis alias fuga praesentium, quis, nihil ipsum nisi aperiam sapiente. Beatae aspernatur modi enim placeat saepe, esse labore eveniet iste voluptatem delectus nam illo pariatur suscipit magni, provident hic harum, praesentium eligendi? Maxime explicabo et reiciendis! Quas tenetur blanditiis sint, exercitationem est libero ullam quos. Enim, cum. Vel incidunt cumque, adipisci quam fugit molestiae, architecto quo inventore cupiditate illum itaque aut accusantium possimus, iusto natus sed excepturi obcaecati est neque eaque repudiandae ex ipsam. Aperiam officiis voluptate facilis architecto nihil cum magnam repudiandae aspernatur, qui totam iure eligendi quibusdam tempora fuga earum inventore doloremque quas vero eaque quis porro excepturi.
  </p>
</div>

> JS

let bg = document.querySelector("#bg");
let moon = document.querySelector("#moon");
let montain = document.querySelector("#montain");
let road = document.querySelector("#road");
let text = document.querySelector("#text");

window.addEventListener("scroll", function(e) {
  var sy = window.scrollY;
  bg.style.top = sy * .5 + "px";
  moon.style.left = -sy * .5 + "px";
  montain.style.top = -sy * .15 + "px";
  road.style.top = sy * .15 + "px";
  text.style.bottom = -sy * 1 + "px";
});

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)

### 進階用法-background-clip 文字陰影


注意:
1. 根據不同瀏覽器，需添加-webkit-background-clip。
2. 套用在中文字，效果有可能會跑掉。

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(#111111, #000000);
}

.wordBx {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
}

.wordBx h2 {
  position: relative;
  color: transparent;
  background-image: linear-gradient(180deg, #222222 0%, #222222 50%, #111111 50%, #111111 100%);
  -webkit-background-clip: text;
  text-transform: uppercase;
}

.wordBx h2::before {
  content: attr(data-text);
  position: absolute;
  top: 4px;
  left: 4px;
  background-image: linear-gradient(45deg, #ccccff, #ccffcc);
  -webkit-background-clip: text;
  z-index: -1;
  color: transparent;
}

.wordBx h2::after {
  content: attr(data-text);
  position: absolute;
  top: 20px;
  left: 10px;
  background-image: linear-gradient(45deg, #ccccff, #ccffcc);
  -webkit-background-clip: text;
  z-index: -2;
  color: transparent;
  filter: blur(10px);
}

> HTML

<div class="wordBx">
  <h2 data-text="google">google</h2>  
</div>

思考: 請問clip-path跟background-clip差別?

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[w3schools](https://www.w3schools.com/cssref/css3_pr_background-clip.asp)

### 進階用法-radial-gradient spotlight


說明:設定客制屬性並利用JS抓取使用者滑鼠座標。

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #000000;
}

section {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}


section h2 {
  color: #ffffff;
  font-size: 15rem;
  text-transform: uppercase;
  text-decoration: none;
}

.lightSpot {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--x) var(--y), transparent 10%, rgba(0,0,0,.95) 20%);
}

> HTML

<section>
  <h2>
    light
  </h2>
</section>
<div class="lightSpot"></div>

> JS

var el = document.documentElement;
el.addEventListener('mousemove', function(e) {
  el.style.setProperty("--x",e.clientX + "px");
  el.style.setProperty("--y",e.clientY + "px");
});

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/documentElement)

## Transform 應用

### 基本用法-動態編框按鈕


要達到此效果，主要需要利用:
1. position: absolute (排列)
2. transform: scale (縮放)
3. transform-origin: x y (變化起始點)

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:'Poppin', sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1f243d;
}

.btn>a {
  position: relative;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2.5rem;
  background-color: #262c37;
  color: rgba(255,255,255,.4);
  transition: all .5s ease;
}

.btn>a:hover {
  color: rgba(255, 255, 255, 1);
}

.btn>a span {
  display: block;
  position: absolute;
  background-color: #2894ff;
}

.btn>a span:nth-child(1) {
  left: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  transform: scale(0);
  transform-origin: 0 0;
  transition: transform .5s;
}

.btn>a:hover span:nth-child(1){
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: transform .5s;
}

.btn>a span:nth-child(2) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  transform: scale(0);
  transform-origin: 100% 0;
  transition: transform .5s;
}

.btn>a:hover span:nth-child(2){
  transform: scale(1);
  transform-origin: 0 100%;
  transition: transform .5s;
}

.btn>a span:nth-child(3) {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  transform: scale(0);
  transform-origin: 0 0;
  transition: transform .5s;
}

.btn>a:hover span:nth-child(3){
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: transform .5s;

}

.btn>a span:nth-child(4) {
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform .5s;
}

.btn>a:hover span:nth-child(4){
  transform: scale(1);
  transform-origin: 0 0;
  transition: transform .5s;
}

> HTML

<div class="btn">
  <a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Botton
  </a>
</div>

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[w3schools](https://www.w3schools.com/cssref/css3_pr_transform-origin.asp)

### 進階用法-翻牌


為了要製造翻牌效果，需要以下屬性：

1. position:absolute (製造重疊)
3. transform:translate (翻轉)
4. backface-visibility (遮住牌的背面)
5. perspective (透過透視度，強化立體感)

> CSS

#cardScene {
  margin: 10%;
  position: relative;
  width: 300px;
  height: 400px;
  perspective: 500px;
}

#cardScene > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

#cardScene .card-front {
  background-color: #ffccff;
  box-shadow: 0 0 10px #cccccc;
  border-radius: 3%;
  outline: none;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
}

#cardScene .card-back {
  background-color: #ccffcc;
  box-shadow: 0 0 10px #cccccc;
  border-radius: 3%;
  outline: none;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
}

/* 注意，旋轉方向須同一方向！ */
#cardScene:hover .card-front{
  transform: rotateY(180deg);
}

#cardScene:hover .card-back {
  transform: rotateY(0deg);
}

> HTML

<div id="cardScene">
  <div class="card-front"></div>
  <div class="card-back"></div>
</div>

###### 參考

[MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform)

## clip-path 應用

### 進階用法-多張圖片剪裁


需要注意的是，要利用大容器+hover+clip-path之外並同時針對個別區塊+hover+clip-path，才可製造一個擴張另兩個縮起。

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif, "微軟正黑體";
}

body {
  width: 100%;
  height: 100vh;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #222222;
}

section.imgClipEffect {
  position: relative;
  width: 800px;
  height: 400px;
  background: #cccccc;
}

section.imgClipEffect .clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  transition: all .25s;
}

section.imgClipEffect .clip.clipImgOne {
  background: #ccffcc;
  clip-path: polygon(0 0, 45% 0, 22% 100%, 0% 100%);
}

section.imgClipEffect .clip.clipImgTwo {
  background: #ccccff;
  clip-path: polygon(44% 0, 100% 0, 50% 100%, 18% 100%);
}

section.imgClipEffect .clip.clipImgThree {
  background: #ffcccc;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 48% 100%);
}

// 外容器＋hover+clip-path
section.imgClipEffect:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

// 內部元件＋hover+clip-path
section.imgClipEffect .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

section.imgClipEffect .clip:hover .content{
  opacity: 1;
}

section.imgClipEffect .content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  padding: 20px;
  background-color: transparent;
  opacity: 0;
  transition: all .25s ease;
}

> HTML

<section class="imgClipEffect">
  <div class="clip clipImgOne">
    <div class="content">
      <h2>Title One</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptatibus quae dignissimos libero amet, repudiandae nulla maiores atque veniam odio.</p>
    </div>
  </div>
  <div class="clip clipImgTwo">
    <div class="content">
      <h2>Title Two</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptatibus quae dignissimos libero amet, repudiandae nulla maiores atque veniam odio.</p>
    </div>
  </div>
  <div class="clip clipImgThree">
    <div class="content">
      <h2>Title Three</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptatibus quae dignissimos libero amet, repudiandae nulla maiores atque veniam odio.</p>
    </div>
  </div>
</section>

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

###### 工具

[clippy](https://bennettfeely.com/clippy/)

## PsuedoCode 應用

### ::before-網頁封面弧線製作


> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 1500px;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 50px;
}

section::before {
  content: "";
  width: 100vh;
  height: 100vh;
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: #008dff;
  border-radius: 50%;
  /* 注意需要變化原點，此屬性很容易忘記設定！ */
  transform-origin: bottom; 
  transform: translate3d(-50%, 0, 0) scale(4);
  z-index: -1;
}

section .content {
  max-width: 1000px;
  padding: 30px;
  text-align: center;
}

section .content h2 {
  font-size: 3rem;
  color: #ffffff;
}

section .content p {
  font-size: 1.2rem;
  color: #ffffff;
}

> HTML

<section>
  <div class="content">
    <h2>Curve Header</h2>
    <p>Lorem, ipsum dolor sit amet consectetur...</p>
  </div>
</section>

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform-origin)

### ::before-簡易Accordion


主要利用添加自定義css .active及JS監控click事件。

> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: rgba(193,225,232, 1);
}

section {
  margin: 100px;
  padding: 50px;
}

.accordion {
  width: 100%;
  height: 100vh;
}

.accordion>.contentBx {
  background-color: rgba(49,157,174, 1);
  color: #ffffff;
  margin: 10px;
}

.accordion>.contentBx>.title {
  position: relative;
  padding: 15px;
}

.accordion>.contentBx>.title::before {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.accordion>.contentBx.active>.title::before {
  content: "-";
}

.accordion>.contentBx>.content {
  background-color: #ffffff;
  color: #000000;
  height: 0;
  overflow: hidden;
  transition: .25s ease-in-out;
}

.accordion>.contentBx.active>.content {
  padding: 10px;
  height: auto;
}

> HTML

<section>
  <div class="accordion">
    <div class="contentBx">
      <div class="title">
        Title One
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eaque, consequuntur reprehenderit eum
        velit atque magnam molestiae natus sit hic rerum harum veritatis dolorem voluptate mollitia impedit animi
        expedita! Officiis.
      </div>
    </div>
    <div class="contentBx">
      <div class="title">
        Title Two
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eaque, consequuntur reprehenderit eum
        velit atque magnam molestiae natus sit hic rerum harum veritatis dolorem voluptate mollitia impedit animi
        expedita! Officiis.
      </div>
    </div>
    <div class="contentBx">
      <div class="title">
        Title Three
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eaque, consequuntur reprehenderit eum
        velit atque magnam molestiae natus sit hic rerum harum veritatis dolorem voluptate mollitia impedit animi
        expedita! Officiis.
      </div>
    </div>
  </div>
</section>

> JS

const accList = document.querySelectorAll(".accordion>.contentBx");

for (let i = 0; i < accList.length; ++i) {
  accList[i].addEventListener("click", function() {
    accList[i].classList.toggle("active");
  });
}

思考：如何使用Jquery達成一樣的目的？

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList)

[jQuery](https://api.jquery.com/toggleClass/)

### ::before&after-按鈕製作


> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.button a {
  position: relative;
  margin: 0 15px;
  padding: 10px 30px;
  color: #21ebff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 2rem;
  transition: all .5s;
  overflow: hidden;
}

.button a:hover {
  background-color: #21ebff;
  color: #111111;
  box-shadow: 0 0 50px #21ebff; 
  transition-delay: all .5s;
}

.button a:hover::before {
  width: 96%;
  height: 96%;
}

.button a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #21ebff;
  border-left: 2px solid #21ebff;
  transition: all .5s;
}

.button a:hover::after {
  width: 96%;
  height: 96%;
}

.button a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #21ebff;
  border-right: 2px solid #21ebff;
  transition: all .5s;
}

> HTML

<div class="button">
  <a href="#">button</a>  
</div>

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

## @keyframes 應用

### Leaf Animation


> CSS

#leafScene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 1s ease-in;
}

#leafScene > .leaves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#leafScene > .leaves > div {
  position: absolute;
}

#leafScene > .leafBlur {
  transform: scale(2);
  filter: blur(1px);
}

#leafScene img {
  width: 75px;
  height: 75px;
}

/* 注意，要製造葉子再不同地方落下，可巧妙利用animation-delay並設定負值！ */
#leafScene > .leaves > div:nth-child(1) {
  left: 29%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -1s;
}

#leafScene > .leaves > div:nth-child(2) {
  left: 14%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -4s;
}

#leafScene > .leaves > div:nth-child(3) {
  left: 67%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -2s;
}

#leafScene > .leaves > div:nth-child(4) {
  left: 54%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -7s;
}

#leafScene > .leaves > div:nth-child(5) {
  left: 7%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -3s;
}

#leafScene > .leaves > div:nth-child(6) {
  left: 90%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -6s;
}

#leafScene > .leaves > div:nth-child(7) {
  left: 78%;
  animation: leafAnime 10s linear infinite;
  animation-delay: -1s;
}

#leafScene > .leaves > div:nth-child(8) {
  left: 83%;
  animation: leafAnime 10s linear infinite;
}

> HTML

<div id="leafScene">
  <div class="leaves">
    <div>
      <img src="/images/svg/M1_24px_楓葉黃綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉紅綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉02.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉01.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉黃綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉紅綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉02.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉01.svg" alt="">
    </div>
  </div>
  <div class="leaves leafBlur">
    <div>
      <img src="/images/svg/M1_24px_楓葉黃綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉紅綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉02.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉01.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉黃綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉紅綠.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉02.svg" alt="">
    </div>
    <div>
      <img src="/images/svg/M1_24px_楓葉01.svg" alt="">
    </div>
  </div>
</div>

> CSS @keyframes

@keyframes leafAnime {
  0% {
    opacity: 0;
    top: -10%;
    transform: translateX(-10px) rotateZ(0deg);
  }
  10% {
    opacity: 1;
    transform: translateX(10px) rotateZ(90deg);
  }
  20% {
    opacity: .8;
    transform: translateX(-10px) rotateZ(134deg);
  }
  40% {
    opacity: .6;
    transform: translateX(10px) rotateZ(165deg);
  }
  60% {
    opacity: 0;
    transform: translateX(-10px) rotateZ(270deg);
  }
  80% {
    transform: translateX(10px) rotateZ(315deg);
  }
  100% {
    opacity: 0;
    top: 110%;
    transform: translateX(10px) rotateZ(345deg);
  }
}

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)

## 其他應用

### 利用jquery+css製造卡片hover效果


> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif, "微軟正黑體";
}

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#introCard {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px;
}

section#introCard .card {
  position: relative;
  width: 300px;
  height: 480px;
  overflow: hidden;
  margin: 25px;
}

section#introCard .card .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section#introCard .card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section#introCard .card .content {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: .95;
  visibility: hidden;
  color: #ffffff;
  padding: 25px;
  transition: all .25s;
  z-index: 1;
  transform: translateY(15px);
}

section#introCard .card:hover .content {
  opacity: 1;
  visibility: visible; 
  transform: translateY(0px);
}

section#introCard .card span {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #cca0ff;
  z-index: 1;
  border-radius: 50%;
  transition: width .5s, height .5s;
  transform: translate(-50%, -50%);
}

section#introCard .card:hover span {
  width: 1000px;
  height: 1000px;
}

> HTML

<section id="introCard">
  <div class="card">
    <span></span>
    <div class="img-wrap"><img src="https://i.imgur.com/ggGWboC.jpg" alt=""></div>
    <div class="content">
      <div>
        <h2>Title One</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae asperiores dolores officia, voluptatem accusantium obcaecati quod id molestiae eligendi mollitia modi voluptas ipsa, suscipit maiores eum, magnam veniam corporis! Odit!</p>
      </div>
    </div>
  </div>
  <div class="card">
    <span></span>
    <div class="img-wrap"><img src="https://i.imgur.com/xD6eCeZ.jpg" alt=""></div>
    <div class="content">
      <div>
        <h2>Title Two</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae asperiores dolores officia, voluptatem accusantium obcaecati quod id molestiae eligendi mollitia modi voluptas ipsa, suscipit maiores eum, magnam veniam corporis! Odit!</p>
      </div>
    </div>
  </div>
  <div class="card">
    <span></span>
    <div class="img-wrap"><img src="https://i.imgur.com/lhpuoLh.jpg" alt=""></div>
    <div class="content">
      <div>
        <h2>Title Three</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae asperiores dolores officia, voluptatem accusantium obcaecati quod id molestiae eligendi mollitia modi voluptas ipsa, suscipit maiores eum, magnam veniam corporis! Odit!</p>
      </div>
    </div>
  </div>
</section>

> JS

$(document).ready(function() {
  $("#introCard .card").on("mouseenter", function(e) {
    console.log($(this).offset().left);
    x = e.pageX - $(this).offset().left;
    y = e.pageY - $(this).offset().top;
    $(this).find("span").css({
      top: y,
      left: x
    });
  });
  $("#introCard .card").on("mouseout", function(e) {
    x = e.pageX - $(this).offset().left;
    y = e.pageY - $(this).offset().top;
    $(this).find("span").css({
      top: y,
      left: x
    });
  });
});

思考： pageX/Y、offsetX/Y、clientX/Y及screenX/Y差別在哪？

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[stackoverflow](https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y)

[codepen](https://codepen.io/PJCHENder/pen/GmoZqy)

圖片來源：imgur

### nth-child()搭配pointer-events，製作產品旋轉圖


> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing; border-box;
  font-family: sans-serif, "微軟正黑體";
}

body {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(45deg,#ccffcc 0%, #ccffcc 25%, #ffccff 70%, #cccccc 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#cardProdution .card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 450px;
  background-color: tranparent;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}

#cardProdution .card span {
  position: absolute;
  top: 0;
  left: calc( 100% / 3 * var(--i) );
  width: calc( 100% / 3);
  height: 100%;
}

#cardProdution .card img {
  position: absolute;
  top：0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /*  如未加入下面這個屬性，則會效果會無法顯示  */
  pointer-events: none;
}
#cardProdution .card img:nth-child(2),
#cardProdution .card span:hover + img {
  opacity: 1;
}

> HTML

<section id="cardProdution">
  <div class="card">
    <span style="--i:0"></span>
    <img src="https://i.imgur.com/2F6oz0Y.jpeg" alt="">
    <span style="--i:1"></span>
    <img src="https://i.imgur.com/W3spgaD.jpeg" alt="">
    <span style="--i:2"></span>
    <img src="https://i.imgur.com/9GYt8h7.jpeg" alt="">
  </div>
</section>

###### 參考

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog)

[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)

圖片來源：imgur

###### tags: `CSS` `MDN` `w3schools` `jQuery` `stackoverflow` `codepen`