iT邦幫忙

0

transition 的使用?

  • 分享至 

  • xImage

想問問transition 該如何使用?

我是去 https://santatracker.google.c...

發現這個效果
移過去會先放大,然後最後再縮小一點 有點彈簧的感覺
這種效果該怎麼做?

我看到他transition 語法似乎是可以累加的?請問有大神能解釋原理嗎?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

5
fillano
iT邦超人 1 級 ‧ 2017-01-19 14:35:39
最佳解答

參考我做的簡單範例:https://jsfiddle.net/fillano/2ufdwvsw/

MDN上的說明:Using CSS transitions
不過例子比較複雜(要看一下底下的瀏覽器相容性說明)

簡單說:

.btn1 {
  width: 50px;
  height: 50px;
  background-color: #336699;
  color: white;
  line-height: 48px;
  font-size: 36px;
  text-align:center;
  vertical-align: middle;
  transition: width 1s, height 1s, background-color 1s, line-height 1s, font-size 1s;
}

.btn1:hover {
  width: 60px;
  height: 60px;
  line-height: 58px;
  font-size: 43px;
  background-color: #4477AA;
  cursor: pointer;
}

我的範例中做了一個滑鼠移過去放大、變色的效果。如果沒有指定transition,這些變化是瞬間完成的。透過transition,你可以指定哪些變化要多久完成。我指定的有:width, height, background-color, line-height, font-size這幾項,延遲的時間都指定為1秒。

火爆浪子 iT邦研究生 1 級 ‧ 2017-01-19 16:55:41 檢舉

了解 謝謝
新年快樂

WilliamHuang
iT邦研究生 1 級 ‧ 2017-01-19 14:06:29
【**此則訊息已被站方移除**】

我要發表回答

立即登入回答