CSS3的過渡效果

2020-03-24 16:23:21

字體：大中小

來源：轉載

供稿：網友

在CSS2的世界中，過渡常常是非常單薄的，要么是從一種顏色變成另一種顏色、要么是從不透明變到透明，總而言之就是由一種狀態變到另外一種狀態。這就導致了很多頁面給人的感覺很突兀，沒有一個平滑的過渡。雖然我們可以使用DHTML或者諸如jQuery等其他第三方的庫文件來完成過渡效果，但是為了完成一個簡單的效果我們就需要大量的編碼。我們所需要的就是用一種簡單的方法來實現這些過渡，因為我相信在今后的WEB應用中，平滑的過渡越來越成為一種標準的展現形式。 CSS3 現在已經添加到了Webkit中，現在 Apple Safari 和 Google Chrome 都已經開始支持。再往前推幾個月，那個時候人們還在爭論是否將這些過渡寫在CSS3中，一些人堅持認為過渡并不是一種樣式屬性，應當用腳本來進行處理。經過眾多人的努力，樣式不僅限于靜態的樣式，動態的樣式也是非常需要的。于是過渡的樣式終于開始寫入CSS3的官方文檔中。廢話少說，進入正題。本文的例子需要支持CSS3的瀏覽器，所以你最好使用 Safari 或者 Chrome 來測試。過渡、狀態和動作我們知道，CSS中都是通過偽類來實現頁面中的一個元素與用戶互動的。例如，用戶鼠標的懸停和移動。下面列出了幾個偽類：
過渡包含哪些元素一個從藍色變成紅色的動態過渡包含哪些元素呢，我們先看一個實例：#css3tr a:link {
display:block;
height:30px;
line-height:30px;
width:100px;
border:5px solid #cccccc;
text-align:center;
-webkit-transition:width .25s ease-in-out, background-color .25s linear;
transitiona:width .25s ease-in-out, background-color .25s linear;
}
#css3tr a:hover {
color:red;
background-color:#e9e9e9;
width:200px;
-webkit-transition: width .25s ease-in-out, background-color .25s linear;
transition:width .25s ease-in-out, background-color .25s linear;
} 由此可見，transition 屬性中包含了三個基本的屬性：樣式屬性(CSS property)、持續時間(Duration)、計時函數(Timing Function)、延時(Delay) 看到這個圖，大家對于這幾個參數的作用應該了解了吧。很簡單的幾個參數設置，實現了我們之前需要用大量js腳本實現的效果，那么有什么理由不期待CSS3的到來呢。可以應用過渡的元素：
cubic-bezier(x1, y1, x2, y2) X and Y html' target='_blank'>values are between 0 and 1 to define the shape of a bezier curve used for the timing function. linear Constant speed ease Gradual slowdown ease-in Speed up ease-out Slow down ease-in-out Speed up and then slow down 現在，就期待CSS3早日全面普及吧。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：初識CSS（初學者必看）

下一篇：如何學習DIV+CSS(Web標準)制作網頁