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

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

反饋

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

具體效果

CSS設(shè)置圖片放大

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

translate：代表水平和垂直的移動(dòng)；

scale：代表水平和垂直同時(shí)縮放；

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 如何實(shí)現(xiàn)圖片放大效果的全部內(nèi)容。更多 CSS 相關(guān)教程請關(guān)注 W3Cschool 官網(wǎng)。

CSS

0 人點(diǎn)贊

CSS如何設(shè)置圖片放大效果？

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