up
down
Close
線上訪客: 7 本日人次: 1634 昨日人次: 1709 累積人次: 938518
 

CSS 如何讓 background-color 具有 transition 轉場效果

│ 148 Views │ CSS

在沒有設置transition時,當游標經過時,background-color會直接變色。如果希望有過渡效果,可以加上transition來指定變色經過的時間。

範例

我是架站盒子的站長。

從上述範例,可以看到加上transition後就呈現顏色變化的過渡效果。code 如下:

transition: background-color 1000ms linear;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;

transition是轉場、過渡的意思,可以控制轉場動畫的過渡時間。 1000ms是1秒的意思,表示從開始到完成所需的時間。linear是等速的意思,除此之外還有其他值可以設定,如下:

  1. ease:先加速再減速(預設值)。
  2. linear:等速進行。
  3. ease-in:逐漸加速。
  4. ease-out:逐漸減速。
  5. steps(5,end):階段性的,5表示五個階段。
  6. cubic-bezier:貝茲曲線(完全客製)。
本文是否對您有幫助?

延伸閱讀