溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家帶來的內容是關于css3中如何利用transition實現鼠標懸停的時候div的顏色、高度和寬度都改變的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
我們平時在瀏覽web網頁的時候會見到這樣一種情況：當鼠標懸停的某個區域的時候，該區域的形狀會在指定時間內進行放大或者縮小的變化，甚至在變化大小的同時會出現顏色的漸變。這種特殊效果是如何實現的呢？現在由我來向大家介紹一下在css3中如何使用transition屬性和hover屬性實現div顏色漸變和放大縮小的效果。
css3中transition屬性
transition屬性是一個簡寫屬性，用于四個過度屬性，分別是transition-property，transition-duration，transition-timing-function和transition-delay。
transition-property：要運動的樣式（默認值為all，可以有三種定義：all、attr和none）
transition-duration：運動時間（只有運動時間是必需值并且不能為0，否則transition不會有任何效果）
transition-timing-function：運動形式（用法包括以下六種）
ease：（逐漸變慢）
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速后減速）
cubic-bezier 貝塞爾曲線：（ x1, y1, x2, y2 ）
注意：其中如果沒有定義的話，transition-timing-function默認值為ease。
transition-delay：延遲時間（默認值為0）
transition屬性和瀏覽器的兼容（根據W3C標準）
Internet Explorer 10、Firefox、Opera和Chrome等高版本瀏覽器支持transition屬性標準寫法。Safari支持替代的-webkit-transition 屬性。但是Internet Explorer 9以及更早版本的瀏覽器不支持transition屬性。
css3鼠標移入特效的實現代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box{
width：100px；
height：100px；
background-color：blue；
transition-duration：2s；
transition-timing-function：ease；
transition-delay：0s；
transition-property：all；
}
.box:hover{
width：200px；
height：200px；
background-color：red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> css3鼠標移入特效實現效果如圖所示
以上就是css3鼠標移入特效：如何實現div顏色漸變和放大縮小的效果的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
