块是长宽相等的正方形,大小浏览器分辨率变化而变化 利用平移变化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%; 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 { display : block; width : 100%; height : 100%; } .pointer { cursor : pointer; position : absolute; --t : 3px; --l : 30px; --g : 20px; --s : 400px; --x : 0px; --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>