您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 過渡

CSS3 過渡

此節有 238 人學習過     參與評論

CSS3 過渡

通過 CSS3,我們可以在不使用 Flash 動畫或 JavaScript 的情況下,當元素從一種樣式變換為另一種樣式時為元素添加效果。

請把鼠標移動到下面的元素上:

CSS3 過渡

瀏覽器支持

屬性 瀏覽器支持
transition

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。

Safari 需要前綴 -webkit-。

注釋:Internet Explorer 9 以及更早的版本,不支持 transition 屬性。

注釋:Chrome 25 以及更早的版本,需要前綴 -webkit-。

它如何工作?

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點,必須規定兩項內容:

  • 規定您希望把效果添加到哪個 CSS 屬性上
  • 規定效果的時長

實例

應用于寬度屬性的過渡效果,時長為 2 秒:

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

注釋:如果時長未規定,則不會有過渡效果,因為默認值是 0。

效果開始于指定的 CSS 屬性改變值時。CSS 屬性改變的典型時間是鼠標指針位于元素上時:

實例

規定當鼠標指針懸浮于 <div> 元素上時:

div:hover
{
width:300px;
}

親自試一試

注釋:當指針移出元素時,它會逐漸變回原來的樣式。

多項改變

如需向多個樣式添加過渡效果,請添加多個屬性,由逗號隔開:

實例

向寬度、高度和轉換添加過渡效果:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

親自試一試

過渡屬性

下面的表格列出了所有的轉換屬性:

屬性 描述 CSS
transition 簡寫屬性,用于在一個屬性中設置四個過渡屬性。 3
transition-property 規定應用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費的時間。默認是 0。 3
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。 3
transition-delay 規定過渡效果何時開始。默認是 0。 3

下面的兩個例子設置所有過渡屬性:

實例

在一個例子中使用所有過渡屬性:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

親自試一試

實例

與上面的例子相同的過渡效果,但是使用了簡寫的 transition 屬性:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

親自試一試

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (238人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 少爷不要| OLdman老年tv| 97久久人人超碰超碰窝窝| 国产精品视频| 被吃奶跟添下面特舒服细节| 亚洲综合色在线视频| 中文字字幕高清乱码| 一段污到湿的文字| 亚洲中文字幕无线在线观看| 十分钟在线观看视频日本| 韩国三级bd高清中字| 亚洲女人天堂网av在线| 久久综合国产乱子伦精品免费| 两个奶头被吃高潮| 欧美30.40.50熟妇性无码| 国产午夜理论片不卡| 嫖农村40的妇女舒服正在播放| 国产乱人伦av在线a| 97大香蕉视频01020600| 男人桶进女人下部猛进猛出| 领导每天都要喝我的奶| japanesemoe东莞| 最Gif动态图| 杨幂真紧好爽全文阅读| 奇米影视盒| 国模欢欢高清炮交图片| 琪琪电影网午夜理论片| 刚发育younv videos| 欧美黑人性暴力猛交| 亚洲jizzjizz在线播放| 忍不住想要你| http://www.aemgg.com