CSS實現(xiàn)鼠標移入時圖片的放大效果及緩慢過渡效果的示例代碼
發(fā)布時間：2020-07-10 14:59:12 作者：在優(yōu)秀的路上 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)鼠標移入時圖片的放大效果及緩慢過渡效果的示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
transform:scale()可以實現(xiàn)按比例放大或者縮小功能。
transition可以設(shè)置動畫執(zhí)行的時間，實現(xiàn)緩慢或者快速的執(zhí)行動畫，效果圖如下：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css實現(xiàn)鼠標移入時的放大效果</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è)置動畫執(zhí)行的時間為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時遮罩：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css實現(xiàn)鼠標移入時的放大效果</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è)置動畫執(zhí)行的時間為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實現(xiàn)鼠標移入時圖片的放大效果及緩慢過渡效果的示例代碼的文章就介紹到這了,更多相關(guān)css鼠標移入圖片放大內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
淺談CSS3鼠標移入圖片動態(tài)提示效果（transform）
本篇文章主要介紹了淺談CSS3鼠標移入圖片動態(tài)提示效果（transform），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-06css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開的效果
這篇文章主要介紹了利用css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開效果的相關(guān)資料，文中先進行了詳細的介紹，方便大家理解，而后給出了完整的實例代碼讓大家可以參考學(xué)習(xí)2017-04-25- 本節(jié)主要介紹了用純css寫的評分鼠標移入的效果，有圖片，感興趣的朋友可以參考下2014-07-31
- 純CSS實現(xiàn)圖片點擊放大帶關(guān)閉按鈕的圖片特效是一款通過簡單的CSS代碼，實現(xiàn)圖片點擊放大效果的源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-28
