[CSS100] Day 14 Byciclopter
Cathy P
 2022-04-18 19:03:21      

Byciclopter Demo

See the Pen 014 - Byciclopter by Cathy (@smile25896) on CodePen.

這次的題目是要做一個動畫卡片，當 hover 時會垂直翻面到背面。

動畫的部分除了之前常用的 css animation 語法，因為這次腳踏車的線和直升機背後的線，產生隨機的大量線段，因此在 html 的部分會用到 Slim 跑回圈產生大量線，在用 SASS 跑回圈讓每個線段產生不同的寬度位置等。

翻面的效果則是會用到 perspective 這個 css 屬性來調整卡片的透視。

學習重點

  1. Slim 迴圈
  2. SASS 迴圈 和 random()
  3. perspective 透視

Slim 迴圈

1
2
3
.street
  - for i in (1..8)
    div class="line line-#{ i }"

這樣會轉換成 html：

1
2
3
4
5
6
7
8
9
10
<div class="street">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
  <div class="line line-5"></div>
  <div class="line line-6"></div>
  <div class="line line-7"></div>
  <div class="line line-8"></div>
</div>

SASS 迴圈 和 random()

接著要幫 line-1 ~ line-9 分別套上 css 樣式，所以在樣式的地方也同樣要跑回圈。

1
2
3
4
@for $i from 1 through 9 {
  .line-#{$i} {
  }
}

會轉換成：

1
2
3
4
5
.line-1 {
}
.line-2 {
}
...

有一些隨機值，像是線段的寬度等可以使用 random() 來產生隨機的數值。

random(100) 會隨機產生 1~100 的數值，套用在 SASS 上：

1
2
3
4
5
6
@for $i from 1 through 9 {
  .cloud-#{$i} {
    width: (10 + random(70) / 4) + px;
    top: ($i * 14) + px;
  }
}

perspective 透視

將卡片垂直翻轉到背面，要 180 度旋轉卡片的 X 軸：transform: rotateX(180deg)。

但如果只是單純的旋轉 X 軸，沒有透視效果的話，看起來只會是卡片變扁再復原：

因此我們要在外層加上：perspective屬性，才會有透視感。

perspective 詳細的用法可以參考：Perspective

除此之外，為了讓翻到背面的圖案不顯示，要再加上 backface-visibility: hidden; 語法。

心得

這次的 CSS100 天挑戰的文章，直接跳過了中間幾個題目的筆記。原本希望是每做完一篇就寫一篇文章，當作是教學文章。

但現在比較傾向改成我自己的學習筆記，所以只會在我有學到新東西且想做紀錄時，才會寫一篇文章，主要是新知識的紀錄，介紹得也不會像之前那麼詳盡。