CSS3過渡transition
SS3的transition屬性詳解:
本章節介紹一下transition屬性的用法，它也是與動畫相關的一個屬性。
一.基本知識:
transition翻譯成漢語具有"過渡"的意思，也就是說可以讓一個元素的css屬性值在一定時間內進行平滑的過渡。
此屬性和border、background等屬性一樣是複合屬性。
語法結構:
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
參數解釋:
1.transition-property:設定或檢索參與過渡的屬性。
2.transition-duration: 檢索或設定物件過渡的持續時間。
3.transition-timing-function:檢索或設定物件中過渡的動畫類型。
4.transition-delay:檢索或設定物件延遲過渡的時間。
程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上程式碼示範如何在兩秒內將div的寬度以動畫的效果從100px設定為500px。
既然是複合屬性，那麼自然就可以將屬性分開分別設定
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 