摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)移上放大相片墻</title> <link rel="stylesheet" href="./static/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠標(biāo)移上放大相片墻</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;
}
這功能在頁(yè)面中很常見，簡(jiǎn)單的動(dòng)畫效果不用jq來，看來CSS3還需學(xué)習(xí)一下下。
批改老師：滅絕師太批改時(shí)間：2019-03-23 11:25:25
老師總結(jié)：比較常見的css3效果,頁(yè)面一些小細(xì)節(jié)會(huì)常用