CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過(guò)渡效果的示例代碼
發(fā)布時(shí)間：2020-07-10 14:59:12 作者：在優(yōu)秀的路上 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過(guò)渡效果的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
transform:scale()可以實(shí)現(xiàn)按比例放大或者縮小功能。
transition可以設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間，實(shí)現(xiàn)緩慢或者快速的執(zhí)行動(dòng)畫(huà)，效果圖如下：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css實(shí)現(xiàn)鼠標(biāo)移入時(shí)的放大效果</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
margin:0 auto;
margin-top: 100px;
}
div img{
width: 100%;
height: 100%;
transition: all 0.6s; //設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間為0.6s
cursor: pointer;
}
div img:hover{
transform: scale(1.2); //設(shè)置圖片按照比例放大1.2倍
}
</style>
</head>
<body>
<div>
<img src="images/unnamed.jpg">
</div>
</body>
</html>
- 圖片溢出div時(shí)遮罩：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css實(shí)現(xiàn)鼠標(biāo)移入時(shí)的放大效果</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
margin:0 auto;
margin-top: 100px;
overflow: hidden; //圖片超出div部分隱藏
}
div img{
width: 100%;
height: 100%;
transition: all 0.6s; //設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間為0.6s
cursor: pointer;
}
div img:hover{
transform: scale(1.3); //設(shè)置圖片按照比例放大1.3倍
}
</style>
</head>
<body>
<div>
<img src="images/unnamed.jpg">
</div>
</body>
</html>
到此這篇關(guān)于CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過(guò)渡效果的示例代碼的文章就介紹到這了,更多相關(guān)css鼠標(biāo)移入圖片放大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
淺談CSS3鼠標(biāo)移入圖片動(dòng)態(tài)提示效果（transform）
本篇文章主要介紹了淺談CSS3鼠標(biāo)移入圖片動(dòng)態(tài)提示效果（transform），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-06css3+偽元素實(shí)現(xiàn)鼠標(biāo)移入時(shí)下劃線向兩邊展開(kāi)的效果
這篇文章主要介紹了利用css3+偽元素實(shí)現(xiàn)鼠標(biāo)移入時(shí)下劃線向兩邊展開(kāi)效果的相關(guān)資料，文中先進(jìn)行了詳細(xì)的介紹，方便大家理解，而后給出了完整的實(shí)例代碼讓大家可以參考學(xué)習(xí)2017-04-25純css寫(xiě)的評(píng)分鼠標(biāo)移入的效果附圖
本節(jié)主要介紹了用純css寫(xiě)的評(píng)分鼠標(biāo)移入的效果，有圖片，感興趣的朋友可以參考下2014-07-31純CSS實(shí)現(xiàn)商品圖片點(diǎn)擊放大效果
純CSS實(shí)現(xiàn)圖片點(diǎn)擊放大帶關(guān)閉按鈕的圖片特效是一款通過(guò)簡(jiǎn)單的CSS代碼，實(shí)現(xiàn)圖片點(diǎn)擊放大效果的源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-28
