iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
2
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 13

Day13 CSS3 動畫 Transitions實作練習(上)

續上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧!

all

接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中,所有的方塊皆設置寬高爲 200px,撰寫於之後每個實作都會看到的 class box 中。以下解說會針對需要的 HTML 架構,及動畫的設置,CSS 樣式不在本篇贅述。

左上叉叉動畫實作解說

one

首先是 HTML 架構,如下方程式碼,盒子裡面有兩條線 box1_line1 及 box1_line2。共同樣式設置於 box1_line 。

<div class="box box1">
  <div class="box1_line box1_line1"></div>
  <div class="box1_line box1_line2"></div>
</div>

接著觀察一下,這裡有什麼動畫發生 1. 方塊背景顏色變化 2.線條轉動及顏色變化。接著我們直接從程式碼裡面看看有哪些重點。

.box1{
 background-color: #8DD0BA;
 transition: background-color 800ms ease-in;
}
.box1:hover{
 background-color: #F8D3DA;
}
.box1_line1 , .box1_line2{
 background-color: #206866;
 transition: transform 500ms ease-in,background-color 500ms ease-in;
}
.box1:hover .box1_line1{
 transform: translateY(100%) rotate(45deg);
 background-color: #B14454;
}
.box1:hover .box1_line2{
 transform: translateY(-100%) rotate(-45deg);
 background-color: #B14454;
}

重點解說:

  1. 首先是方塊背景顏色變化,在 box1 的樣式中原本背景顏色爲 #8DD0BA ,接著設置動畫 transition: background-color 800ms ease-in; ,表示動畫效果發生於屬性 background-color ,發生時間持續 800ms ,動畫過程呈現方式爲 ease-in (開始時以緩速執行)。接著在 box1 被 hover 的時候改變背景顏色爲 #F8D3DA,此時因背景顏色改變,觸發動畫效果。
  2. 在線條的部分,同時有線條轉動及顏色變化,動畫設定可以執行多個設定,之間以逗號分隔即可,例如:transition: transform 500ms ease-in,background-color 500ms ease-in; 。顏色變化的部分與方塊背景顏色變化觀念相同,就不贅述了。轉動的部分透過 transform 當中的 rotate 設定,box1_line1 轉動 45deg,box1_line2 轉動 -45deg,使之交叉。
  3. transform 當中還設定了 translateY 的位移,是爲了讓兩條線重合,才能使兩條線在轉動後,爲一個正常的叉叉,如果在不重合的狀況下轉動,則出現的叉叉會是失衡的,即兩條線的交集點沒有在正中心。下圖爲不執行位移,叉叉失衡的狀況。可以試試看,唯有自己嘗試過,才能知道每條程式碼存在的原因。

onenono

右上動畫實作解說

two

首先是 HTML 架構,如下方程式碼,盒子裡面有另一個盒子 box2_circle。

<div class="box box2">
  <div class="box2_circle"></div>
</div>

觀察一下,這裡有什麼動畫發生 1. 背景顏色變化 2.方塊縮小並變爲圓型。接著我們一樣直接看看程式碼裏面有那些重點。

.box2{
 width: 200px;
 height: 200px; 
 margin: 10px;
 background-color: #7ECAE1;
 overflow: hidden; 
 transition: background-color 500ms ease-in;
}
.box2:hover{
 background-color: #214C97;
}
.box2_circle{
 width: 200px;
 height: 200px;
 background-color: #EFD19A;
 transition: border-radius 500ms ease-in,transform 500ms ease-in;
}
.box2:hover .box2_circle{
 border-radius:50%;
 transform: rotate(-45deg) scale(0.8);
}

重點解說:

  1. 方塊背景顏色與實現一相同。
  2. 此範例的實現方式,是讓子層的黃色方塊與父層藍色方塊等大並覆蓋,接著設置動畫使它變爲圓型並旋轉縮小。在動畫設置的部分 transition: border-radius 500ms ease-in,transform 500ms ease-in; ,表示動畫屬性發生於 border-radiustransform ,皆爲 500ms ,動畫過程呈現方式爲 ease-in (開始時以緩速執行)。接著當 box2 被 hover 的時候,發生改變觸發動畫,設置 border-radius:50% 變爲圓形,設置 ransform: rotate(-45deg) scale(0.8) 使之旋轉 -45deg 並縮小 0.8。

以上爲今天的小小實作,明天見/images/emoticon/emoticon41.gif


上一篇
Day12 講講 CSS3 動畫 - Transitions
下一篇
Day14 CSS3 動畫 Transitions實作練習(下)
系列文
前端之 " wow~原來是這樣啊 "30

1 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2018-10-28 10:52:35

好酷!/images/emoticon/emoticon12.gif

Lai iT邦新手 5 級 ‧ 2018-10-28 10:54:31 檢舉

/images/emoticon/emoticon41.gif

我要留言

立即登入留言