溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3的transition怎么用”，在日常操作中，相信很多人在CSS3的transition怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3的transition怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1、transition代表css3中的過渡，可以使元素從一種樣式逐漸改變為另一種的效果。
2、transition: height 2s;表示需要漸變的是元素高度height,漸變時間是2s。transition還有其他參數如下圖：
3、-moz-,-webkit-,-o-這三個是廠商前綴，不同瀏覽的廠商,因為不同瀏覽器有不同的標準，所以為了兼容性，需要把常用的瀏覽器對應的廠商前綴加上。所以四個屬性代表的是一個意思。
-moz- 是火狐瀏覽器廠商前綴
-webkit- 是谷歌瀏覽器廠商前綴
-o- 是opera瀏覽器廠商前綴
4、div {
width:100px;
height:30px;
background:blue;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
這句話的意思是：
1）設置一個div元素，寬度100px，高度30px，背景是藍色，設置過渡效果2s。
2）當瀏覽器是火狐、Safari(mac自帶瀏覽器)、谷歌(Chrome)時，觸發高度變化時產生2s的漸變效果。
3）當瀏覽器是除上一句話中的瀏覽器之外時，觸發寬度變化時產生2s的漸變效果。
5、用法：需要一個觸發漸變效果的產生的條件。比如：
div:hover {
height:100px
}
這個意思是說，當鼠標懸停在元素div上時，會觸發div元素高度漸變2s內會變為100px;但是當鼠標移出時，div的高度同樣會在2秒內恢復為30px。
擴展資料：
transition漸變屬性值可設置多個。如width 2s, height 2s, transform 2s;
例子：效果是當鼠標hover到div上時，高度變為200px，寬度變為200px，同時div元素旋轉180度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;/* Firefox 4 */
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari and Chrome */
-o-transition: width 2s, height 2s, -o-transform 2s;/* Opera */
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);/* Firefox 4 */
-webkit-transform: rotate(180deg);/* Safari and Chrome */
-o-transform: rotate(180deg);/* Opera */
}
</style>
</head>
<body>
<div>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</div>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>
整體使用代碼如下：
效果如下：
到此，關于“CSS3的transition怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
