摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>頁面中鼠標移上圖片放大效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon">
<style>
.pic{
width: 500px;
margin: 150px auto;
}
.pic img{
border-radius:15px;
/* 定義圖片放大過程的秒數(shù) */
transition: all 2s;
box-shadow: 2px 12px 5px #666;
}
.pic:hover img{
height: 300px;
width: 300px;
/* 圖片放大倍數(shù) */
transform: scale(1.5)
}
</style>
</head>
<body style="background: #cccccc">
<div class="pic">
<img src="static/images/1.jpg" alt="">
</div>
</body>
</html>
批改老師：滅絕師太批改時間：2019-03-19 09:19:06
老師總結：效果相對簡單,完成的不錯,關于css3動畫效果還可以課外拓展哦