以下為一個純css寫的圖片鼠標懸浮縮放效果，其實基本原理十分簡單，我們訪問一些網站可以發現他們都會對圖片做一些交互效果的處理，當然實現圖片過渡效果有很多方式，例如使用JQuery或者一些第三方js動畫庫，本例僅是展示基本的效果，不對所用知識進行歸納。

代碼如下：

Document

* {

box-sizing: border-box;

}

body {

background-color: rgb(251, 163, 163);

}

/* 長條圖樣式 */

.containlist {

position: relative;

margin-top: 100px;

margin-left:10%;

height: 100px;

width: 80%;

overflow: hidden;

border-radius: 30px;

box-shadow: rgb(54, 53, 53) 10px 10px 10px;

}

.list {

position: absolute;

width: 100%;

height: 100%;

background-position: center;

background-size: cover;

border-radius: 30px;

transition: 0.5s;

color: white;

font-weight: bold;

text-align: center;

}

.list:hover {

transform: scale(1.2);

}

效果測試

和服の少女

天空の鏡

紫の景色

私は一番可愛いです

實際效果：

git圖

圖片的樣式可以自行進行更改，打造你自己的中二風格。

到此這篇關于CSS3鼠標懸浮過渡縮放效果的文章就介紹到這了,更多相關css3鼠標懸浮過渡縮放內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的html鼠标悬浮缩放,CSS3鼠标悬浮过渡缩放效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。