以下為一個(gè)純css寫的圖片鼠標(biāo)懸浮縮放效果，其實(shí)基本原理十分簡(jiǎn)單，我們?cè)L問(wèn)一些網(wǎng)站可以發(fā)現(xiàn)他們都會(huì)對(duì)圖片做一些交互效果的處理，當(dāng)然實(shí)現(xiàn)圖片過(guò)渡效果有很多方式，例如使用JQuery或者一些第三方j(luò)s動(dòng)畫庫(kù)，本例僅是展示基本的效果，不對(duì)所用知識(shí)進(jìn)行歸納。

代碼如下：

Document

* {

box-sizing: border-box;

}

body {

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

}

/* 長(zhǎng)條圖樣式 */

.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);

}

效果測(cè)試

和服の少女

天空の鏡

紫の景色

私は一番可愛(ài)いです

實(shí)際效果：

git圖

圖片的樣式可以自行進(jìn)行更改，打造你自己的中二風(fēng)格。

到此這篇關(guān)于CSS3鼠標(biāo)懸浮過(guò)渡縮放效果的文章就介紹到這了,更多相關(guān)css3鼠標(biāo)懸浮過(guò)渡縮放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。