完成一个简单鼠标划过图片放大的照片墙案例
<!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还需学习一下下。