App下載

CSS如何設(shè)置圖片放大效果?

猿友 2021-03-20 11:50:19 瀏覽數(shù) (8230)
反饋

我們?yōu)g覽網(wǎng)頁時,經(jīng)??梢钥吹揭粋€效果,當(dāng)我們把鼠標(biāo)滑過一張圖片或一個區(qū)域時,圖片會放大或縮小,高亮顯示這效果。其實這個效果并不難實現(xiàn),那么這篇文章 W3Cschool 小編就來教你 CSS 如何設(shè)置圖片放大效果。

具體效果

CSS設(shè)置圖片放大

思路:圖片放大的動畫效果還是由?transition?和?transform?實現(xiàn)。先設(shè)置 div 的初始位置,過渡的時間等,之后設(shè)置 translate,scale,rotate 等屬性。

translate:代表水平和垂直的移動;

scale:代表水平和垂直同時縮放;

rotate:表示旋轉(zhuǎn)的角度。

具體代碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS圖片放大 - 編程獅(w3cschool.cn)</title>
	<style>
	div {
		width: 200px;
		height: 100px;
		transition: all .3s; 
	}
	div:hover {
		transform: translate(100px, 100px) scale(2) rotate(0deg);  
	}
	</style>
</head>
<body>
    <div>
	<img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="w3cschool">
    </div>
</body>
</html>

以上就是 CSS 如何實現(xiàn)圖片放大效果的全部內(nèi)容。更多 CSS 相關(guān)教程請關(guān)注 W3Cschool 官網(wǎng)。

相關(guān) CSS 效果:CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實現(xiàn)陰影效果


CSS

0 人點贊