編碼的世界 / 優質文選 / 生涯
css實現圖片放大效果
2021年11月05日
-
放大前css動畫效果，感覺transition和transform真的很強大。transform本質上是一系列變形函數。具有很多屬性。
transition從效果上看是一種平滑過渡的動畫，本質上是在線性時間內將屬性從開始值過渡到結束值。涉及到時間。對與transition的講解點擊打開鏈接對於transform點擊打開鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<style>
img{
width: 500px;
overflow: hidden;
margin: 0 auto;
}
#img img{
width: 100%;
transition:all 2s;/*圖片放大過程的時間*/
position: relative;
}
img:hover{cursor: crosshair;
transform: scale(1.9); /*以y軸為中心旋轉*/
}
</style>
<body>
<div id="img">
<img src="img/jdt1.jpg" alt=""><!放圖片>
</div>
</body>
</html>
熱門文章
