CSS-實戰-互動式圖片

java小工匠發表於2017-08-13
CSS

1、實現效果

當滑鼠經過圖片，圖片會逐漸放大，彷彿你距離圖片越來越近,常在旅遊、商品的展示頁面應用。

2、實現思路

（1）使用 scale 函式放大圖片
（2）使用transition實現逐漸變化的動畫。
（3）使用 overflow: hidden; 控制圖片在圖片外圍盒子中。

3、原始碼

素材：
圖片一張

bl.jpg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS實戰-滑鼠經過動畫</title>
    <style type="text/css">
        .photo {
            overflow: hidden;
            position: relative;
            width:290px; 
            height:376px; 
            float:left;
        }
        .photo img{ 
            width:100%; 
            height:auto;
        }
        .photo:hover img{
            -webkit-transform:scale(1.15);
            -moz-transform:scale(1.15);
            -o-transform:scale(1.15);
            transform:scale(1.15);
            -webkit-transition:all 2s ease;
            -moz-transition:all 2s ease;
            -o-transition:all 2s ease;
            transition:all 2s ease;
        }
    </style>
</head>
<body>
    <div class="photo">
        <!--部落格bug，需要調整下面一行程式碼-->
         < img src="bl.jpg " border="0" >
    </div>       
</body>
</html>


相關文章