<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img_div {
margin: 50px auto;
position: relative;
overflow: hidden;
width: 268px;
height: 268px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 268px;
height: 268px;
background: rgba(95, 230, 240, 0.6);
display: none;
z-index: 1;
}
.img_div img {
transition: all 0.4s;
}
.img_div:hover .mask {
display: block;
}
.mask:hover+img {
transform: scale(1.1);
}
.img_div:hover .top,
.img_div:hover .bottom,
.img_div:hover .right,
.img_div:hover .left {
display: block;
}
.mask:hover+.top,
.mask:hover+.bottom,
.mask:hover+.left,
.mask:hover+.right {
animation-play-state: running;
}
.top {
width: 248px;
height: 2px;
border-bottom: 2px solid white;
position: absolute;
top: 15px;
left: 10px;
animation: zhang 1s ease forwards;
z-index: 2;
display: none;
}
.right {
width: 2px;
height: 248px;
border-right: 2px solid white;
position: absolute;
top: 10px;
right: 20px;
animation: ya 1s forwards;
z-index: 2;
display: none;
}
.bottom {
width: 248px;
height: 2px;
position: absolute;
border-bottom: 2px solid white;
bottom: 15px;
left: 10px;
animation: zhang 1s ease forwards;
z-index: 2;
display: none;
}
.left {
width: 2px;
height: 248px;
border-left: 2px solid white;
position: absolute;
top: 10px;
left: 20px;
animation: ya 1s forwards;
z-index: 2;
display: none;
}
@keyframes zhang {
0% {
width: 0;
}
100% {
width: 248px;
}
}
@keyframes ya {
0% {
height: 0;
}
100% {
height: 248px;
}
}
</style>
</head>
<body>
<div class="img_div">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="mask"></div>
<img src="./家居03/img/03img/3.png">
</div>
</body>
</html>
效果: