亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過渡效果的示例代碼

  發(fā)布時(shí)間：2020-07-10 14:59:12   作者：在優(yōu)秀的路上   我要評(píng)論
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過渡效果的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

transform:scale()可以實(shí)現(xiàn)按比例放大或者縮小功能。
transition可以設(shè)置動(dòng)畫執(zhí)行的時(shí)間，實(shí)現(xiàn)緩慢或者快速的執(zhí)行動(dòng)畫，效果圖如下：

在這里插入圖片描述

源碼：

<!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)畫執(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)畫執(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ān)css鼠標(biāo)移入圖片放大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論