四角线框移动
基本结构：
- 使用绝对定位(position: absolute)
- 通过CSS变量控制尺寸和位置
- 添加了平滑过渡效果(transition: 0.2s)
核心步骤
动态去设置pointer 盒子left和top的值
pointer.style.setProperty('--s', img.offsetWidth + 'px')
pointer.style.setProperty('--x', img.offsetLeft + 'px')
pointer.style.setProperty('--y', img.offsetTop + 'px')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果示例</title>
<style>
body {
background: #000;
}
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pointer {
position: absolute;
--l: 30px; /*四角线框长度 */
--t: 3px; /*四角线框粗细 */
--g: 15px; /*线框与图片的间隙 */
--s: 240px; /*图片尺寸 */
--x: 0px; /*图片左上角横坐标 */
--y: 0px; /*图片左上角纵坐标 */
width: calc(var(--s) + var(--g) * 2);
height: calc(var(--s) + var(--g) * 2);
border: var(--t) solid #fff;
left: calc(var(--x) - var(--g));
top: calc(var(--y) - var(--g));
transition: 0.2s;
mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75% 100%) 0
0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;
}
.item {
margin: 5% ;
width: 240px;
height: 240px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="pointer"></div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
<div class="item">
<img src="static/image/1.jpg" alt=""/>
</div>
</div>
</body>
<script>
const imgs = document.querySelectorAll('.container img')
const pointer = document.querySelector('.pointer')
for (const img of imgs) {
img.onmouseenter = () => {
pointer.style.setProperty('--s', img.offsetWidth + 'px')
pointer.style.setProperty('--x', img.offsetLeft + 'px')
pointer.style.setProperty('--y', img.offsetTop + 'px')
}
}
</script>
</html>