首頁 > 文章 > web前端 > css3滑鼠移入特效：如何實現div顏色漸層和放大縮小的效果

css3滑鼠移入特效：如何實現div顏色漸層和放大縮小的效果

坏嘻嘻原創: 2018-09-21 11:09:0010923瀏覽

這篇文章帶給大家的內容是關於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：（逐漸變慢）
ease 0linear：（勻速）# ：(加速)
ease-out：(減速)
ease-in-out：（先加速後減速）
線
##注意：其中如果沒有定義的話，transition-timing-function預設值為ease。
transition-delay
：延遲時間（預設值為0）

transition屬性和瀏覽器的相容（根據W3C標準）

Internet Explorer 10、Firefox、Opera和Chrome等高版本瀏覽器支援transition屬性標準寫法。 Safari支援替代的-webkit-transition 屬性。但是Internet Explorer 9以及更早版本的瀏覽器不支援transition屬性。 css3滑鼠移入特效的實作程式碼
css3滑鼠移入特效：如何實現div顏色漸層和放大縮小的效果

<!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、html5、javascript特效程式碼，盡在：###javascript特效大全#######

以上是css3滑鼠移入特效：如何實現div顏色漸層和放大縮小的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用純CSS實現文字的淡入動畫效果（附源碼）下一篇：如何使用純CSS實現文字的淡入動畫效果（附源碼）

看更多