css 四角边框移动效果

news/2024/10/23 19:21:43/

块是长宽相等的正方形，大小浏览器分辨率变化而变化
利用平移变化translate来时实现边框到达鼠标划到的块，坐标是鼠标滑到块的offsetLeft和offsetTop

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}body {background-color: goldenrod;}.box {width: 80%;/* padding: 30px 20px; */margin: 50px auto;display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px;background-color: goldenrod;position: relative;}.item {aspect-ratio: 1/1;background-color: cyan;}.item img {/* margin: 0;padding: 0; */display: block;width: 100%;height: 100%;}.pointer {cursor: pointer;position: absolute;/*线条的粗细*/--t: 3px;/*线条的长*/--l: 30px;/*线条离块的距离*/--g: 20px;/*块的大小*/--s: 400px;/*遮罩层的x坐标*/--x: 0px;/*遮罩层的y坐标*/--y: 0px;width: calc(var(--s) + 2 * var(--g));height: calc(var(--s) + 2 * var(--g));left: 0;top: 0;border: var(--t) solid #fff;margin-left: calc(-1 * var(--g));margin-top: calc(-1 * var(--g));transform: translate(var(--x), var(--y));transition: 0.5s;-webkit-mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75% 100%) 0 0/calc(100% - var(--l)) calc(100% - var(--l));}
</style><body><div class="box"><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="pointer"></div></div></body>
<script>const items = document.querySelectorAll('.box .item')const pointer = document.querySelector('.pointer')for (const item of items) {item.onmouseenter = function () {const width = item.clientWidthconst x = item.offsetLeftconst y = item.offsetToppointer.style.setProperty('--s', width + 'px')pointer.style.setProperty('--x', x + 'px')pointer.style.setProperty('--y', y + 'px')}}
</script></html>

css 四角边框移动效果

相关文章

shell编程变量作用域

mysql清除主从复制关系

Doc as Code (3)：业内人士的观点

关于Anaconda环境配置的一些问题

【SpringBoot】简介及传统的 Spring 框架：对比和分析

XMLHttpRequest (XHR) 与 fetch

【优选算法题练习】day10

使用pikachu管理工具下的XSS后台进行实战