abstrakt：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標移上放大相片墻</title> <link rel="stylesheet" href="./static/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標移上放大相片墻</title> <link rel="stylesheet" href="./static/css/style.css"> </head> <body> <div> <img src="./static/img/banner0.jpg" alt=""> <img src="./static/img/banner1.jpg" alt=""> <img src="./static/img/banner2.jpg" alt=""> <img src="./static/img/banner3.jpg" alt=""> <img src="./static/img/banner4.jpg" alt=""> <img src="./static/img/banner5.jpg" alt=""> <img src="./static/img/banner6.jpg" alt=""> <img src="./static/img/banner7.jpg" alt=""> <img src="./static/img/banner8.jpg" alt=""> </div> </body> </html>
*{
margin: 0px;
padding: 0px;
}
.img{
margin: 30px;
overflow: hide;
}
.img img{
height: 100px;
margin: 20px;
border-radius: 10px;
box-shadow: 2px 3px 8px #333;
transition: all 0.6s;
}
.img img:hover{
transform: scale(1.2);
cursor: pointer;
}
這功能在頁面中很常見，簡單的動畫效果不用jq來，看來CSS3還需學習一下下。
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-03-23 11:25:25
Zusammenfassung des Lehrers：比較常見的css3效果,頁面一些小細節(jié)會常用