视频效果:
图集
思路: 当鼠标放到外层盒子上面时,所有的都盒子缩小,,但当鼠标停在某一具体的图片上时,将该具体盒子放大,,并加上滤镜效果,根据层叠的规则改样式的级别更高,所以会先呈现放大的效果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 先调整好图片的大小 */
main div img{
width: 150px;
height: 150px;
}
/* 设置好body的大小然后将main居中 */
body{
width: 100vw;
height: 100vh;
display: flex;
/* 将内容居中 */
justify-content: center;
align-items: center;
background-color: #16a085;
}
/* 设置main为弹性布局 */
main{
display: flex;
}
main div img{
height: 100%;
}
/* 鼠标放在div上面时,将里面的div都缩小 */
main:hover div{
/* 当鼠标悬浮在main上时整个盒子缩小 */
transform:scale(0.6);
/* 加上滤镜效果 */
filter: blur(25px);
box-sizing: border-box;
}
main div{
border: 2px solid #8e44ad;
/* 调整好边距 */
margin-right: 20px;
/* 加上一个过渡时间 */
transition: 1s;
}
/* 当悬浮main上的同时悬浮在某个固定div上时某个div上面时该div放大 */
/* 因为这里的级别更高所以执行这里 */
main:hover div:hover{
/* 清除滤镜效果 */
filter:none;
/* 放大 */
transform:scale(1.2);
}
</style>
<body>
<main>
<div><img src="./图片/1.jpeg" alt=""></div>
<div><img src="./图片/2.jpeg" alt=""></div>
<div><img src="./图片/3.jpeg" alt=""></div>
</main>
</body>
</html>
需要掌握的知识点:
- 滤镜效果 :filter: blur(25px);
- 图片缩放变形: transform:scale();