css特效：角边框跟随移动动画
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
|
<!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>图片展示边框跟随移动动画</title> </head> <style> body { background-color: #000; padding: 30px; --imgs: 240px; }
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; width: 100%; position: relative; }
.img-item>img { width: var(--imgs); height: var(--imgs); height: auto; object-fit: cover; cursor: pointer; }
.pointer { --l: 30px; /*线框长度*/ --t: 3px; /*线框宽度*/ --g: 15px; /*间隙*/ --s: var(--imgs); /*图片尺寸*/ --x: 0px; /*图片左上角横坐标*/ --y: 0px; /*图片左上角纵坐标*/ position: absolute; 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; } </style>
<body> <div class="container"> <div class="pointer"></div> <div class="img-item"> <img src="./html.png" alt=""> </div> <div class="img-item"> <img src="./css.png" alt=""> </div> <div class="img-item"> <img src="./js.png" alt=""> </div> <div class="img-item"> <img src="./html.png" alt=""> </div> <div class="img-item"> <img src="./css.png" alt=""> </div> <div class="img-item"> <img src="./js.png" alt=""> </div> </div> </body>
</html> <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> |
