HTML CSS 實現滑鼠懸停時圖片拉近效果

hgy發表於2017-07-16
HTMLCSS

前言

為了讓網頁的使用體驗更好，我們會讓網頁的某些元素對滑鼠的動作做出響應。例如滑鼠滑過、單擊按鈕的時候按鈕變色、變形。之前在很多網頁上看到了滑鼠滑過一個圖片連結時圖片放大、拉近的效果，今天嘗試實現一下。

1. 使用background實現

思路：設定以圖片作為div元素的背景，滑鼠滑過div的時候通過background屬性放大圖片。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>background實現圖片拉近效果</title>
  <style>
    #box {
      background: url(../images/img022.png);
      width: 720px;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #aaa;
      background-color: #444;
    }

    #box:hover {
      background-size: 100.5% 100.5%;
    }
  </style>
</head>

<body>
  <div id=`box`>

  </div>
</body>

</html>

2. 使用img元素的width height屬性實現

思路：當滑鼠滑過圖片時，修改img元素的width和height屬性放大圖片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>img圖片拉近效果</title>
  <style>
    #box{
      width:60%;
      min-width:1000px;
      min-height:800px;
      margin:0 auto;
      border:1px solid #aaa;
      background-color:#444;
      text-align:center;
      
    }

    img:hover{
      width:723px;
      height:723px;
    }
  </style>
</head>
<body>
  <div id=`box`>
    <img src="../images/img022.png" width=`720px` height=`720px` />
  </div>
</body>
</html>

3. 使用transform放大圖片

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>transform實現圖片拉近效果</title>
  <style>
    a:hover img {
      transform: scale(1.005, 1.005);
    }
  </style>
</head>

<body>
    <a href="#">
        <img src="../images/img022.png" />
    </a>
</body>

</html>

4. 使用transform和transition來放大圖片

以上的3種實現方式中，圖片放大過程幾乎都是瞬間完成的，感覺不流暢，視覺體驗也不好。同transition可以設定放大過程經歷的時間，從而有流暢的感覺。

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>transform、transform實現圖片拉近</title>  
        <style>  
           
            .test_a {  
                display: block;
                margin: 0 auto;
                width:400px;
                overflow: hidden;
            }  
              
            .test_a img {  
                width: 100%;
            }  
              
            .test_a:hover img {  
                transform: scale(1.2);  
                transition: all 1s ease 0s;
            } 
            
             
        </style>  
    </head>  
  
    <body>  
        <a href="" class="test_a">
          <img src="../images/img022.png" />
        </a>  
    </body>  
  
</html>

上面這種方式，圖片放大過程是流暢的，但是縮小過程很生硬，可以改進一下。

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>transform、transform 圖片拉近 優化</title>  
        <style>  
           
            .test_a {  
                display: block;
                margin: 0 auto;
                width:400px;
                overflow: hidden;
            }
              
            .test_a img {  
                width: 100%;  
                transform: scale(1);  
                transition: all 1s ease 0s;
            }  
            
            .test_a:hover img {  
                transform: scale(1.2);
                transition: all 1s ease 0s;
            }  
        </style>  
    </head>  
  
    <body>  
        <a href="" class="test_a">
          <img src="../images/img022.png" />
        </a>  
    </body>  
  
</html>

後語

實驗的時候發現很多知識有點模糊了，該補習了。

線上DEMO https://hgy9473.github.io/myl…

相關文章