上海建设工程咨询网证书查询_网站建设公司比较好的有哪些_域名查询工具_市场营销策划方案书

效果展示

一、布局

// 布局
<template><div class="container"><!-- pointer线框 --><div class="pointer"></div> <div class="item"><img src="../assets/imgs/apple.jpg" alt="" /></div><div class="item"><img src="../assets/imgs/dh.jpg" alt="" /></div><div class="item"><img src="../assets/imgs/egg.jpg" alt="" /></div><div class="item"><img src="../assets/imgs/fu.jpg" alt="" /></div><div class="item"><img src="../assets/imgs/psc.png" alt="" /></div></div>
</template>

二、样式

// 样式<style scoped>
.container {position: relative;display: grid;grid-column-gap: 50px;grid-template-columns: auto auto auto;
}.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%) 00 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;/*mask去除 conic-gradient锥形渐变*/
}.item {margin: 20px 0;width: 240px;height: 240px;
}
img {width: 100%;height: 100%;object-fit: cover;cursor: pointer;display: block;
}
</style>

三、交互

// 交互
<script setup>
import { onMounted } from 'vue'onMounted(() => {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>