2015年12月1日 星期二

[筆記] 網頁CSS動畫─位置Transitioning Position


在這篇文章中,我們同樣會利用CSS 3中transition這個屬性來製作位置移動的動畫效果。

在上一篇[筆記] 網頁CSS動畫─color transition中,我們提過利用CSS 3的transition製作顏色變色的動態效果,接著我們則要練習製作位置改變的動態效果。

完成的結果會像是這樣子:

See the Pen position transition by PJCHEN (@PJCHENder) on CodePen.

製作概念

製作的概念很簡單
1.先用span包住兩個不同的文字(Click Now和Save 94%),
2.接著用position這個屬性搭配上:hover,讓滑鼠移過的時候,span的position向上移動,

3.最後則是搭配上transition,讓文字移動的過程產生動畫的效果

示意圖如下:
STEP:製作按鈕

如同[筆記] 網頁CSS動畫─color transition做法, 我們先製作按鈕,作法如下:

HTML部分

  <button class='btn'>
 <span class='top content'>Click Now</span>
 <span class='bottom content'>Save 94%</span>
  </button>

我們把原本的按鈕裡面的內容,拆成兩個span,分別是一開始顯示的內容,還有滑鼠移過後顯示的內容,單純按鈕的class取作btn,按鈕內容的class稱做content,並且在分別加上top和bottom這兩個class。

CSS部分

.btn {
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 11px;
  font-family: Arial;
  color: #FFFFFF;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 150px;
  height: 50px;
  position: relative;
  background-color: #00A0D6;
  transition: background-color 0.4s;
}

.btn:hover {
  background-color: #007DA7;
}

我們製作一個150px x 50px的弧形按鈕,同時使用[筆記] 網頁CSS動畫─color transition所說的,製作color transition的效果。

很重要的一點是,這裡要把position設成relative,因為我們等一下要把span裡面的內容設成position: absolute,以方便操控span的位置。

STEP: position transition效果添加

我們先把span的樣子製作出來,套用到content這個class:

.content {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 26px;
  text-align: center;
  line-height: 50px;
  /*最後才加上的動畫效果*/
  /*transition: top 0.3s;*/
}

接著把span的原始位置設定好,因為在content這個class已經有寫上position:absolute,所以它會根據button這個標籤的相對位置做變化;同時利用:hover設定。

.top {
  top: 0px;
}

.btn:hover .top {
  top: -50px;
}

.bottom {
  top: 50px;
}

.btn:hover .bottom {
  top: 0px;
}

這時候,當滑鼠移過按鈕時,就會出現變色同時變文字的效果,但是因為是使用hover,還沒有使用動畫效果,所以會是立即變文字,而沒有動畫的感覺,因此最後我們要在content這個class加上transition這個屬性,多加上這一欄:
transition: top 0.3s;

移除超過按鈕的文字部分

最後,我們會發現,這些字即時超過按鈕的時候,仍然會顯示出來,特別是在有背景色的情況下,像是這樣:



為了要解決這個問題,我們要用到overflow:hidden這個屬性,也就是超過的部分請幫我隱藏出來,因此我們要把這一行添加在btn這個class裡:
.btn{
  overflow:hidden;
}



到這裡就大功告成了,再來看一次結果吧!

See the Pen position transition by PJCHEN (@PJCHENder) on CodePen.

以上內容均為學習自Code School: Adventures in web animations之學習筆記
Share:

0 意見:

張貼留言