js+css实现跟随鼠标聚光灯照射图片放大效果代码
代码语言:html
所属分类:图片放大
代码描述:js+css实现跟随鼠标聚光灯照射图片放大效果代码
代码标签: js css 跟随 鼠标 聚光灯 照射 图片 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { --bg: hsl(132, 83%, 5%); --accent: hsl(84, 96%, 80%); --fsize: 16px; --circleMultiplier: 3; --circleSize: calc(calc(var(--circleMultiplier) * 1rem)); } html, body { height: 100%; margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; grid-template-rows: 1fr 3rem; font-size: var(--fsize); background-color: var(--bg); position: relative; overflow: hidden; place-items: center; p { position: relative; z-index: 2; color: white; font-family: sans-serif; a { color: var(--accent); } } &:has(a:hover) #circle { --circleSize: calc(calc(var(--circleMultiplier) * 1.5rem)); opacity: 0.2; } } #circle { pointer-events: none; width: var(--circleSize); height: var(--circleSize); background-color: var(--accent); border-radius: 50%; position: absolute; translate: var(--xpos) var(--ypos); transform-origin: center center; transition: width .2s ease-in-out, height .2s ease-in-out, border-radius .4s ease-in-out, opacity .2s ease-in-out; align-self: start; justify-self: start; } .gallery { display: flex; width: 80vw; overflow: visible; gap: min(5%, 2rem); container-type: inline-size; container-name: gallery; img { flex: 1; width: 100%; aspect-ratio: 3/4; min-height: 0; min-width: 0; position: relative; clip-path: inset(20px 10px round 12px); transition: all .2s cubic-bezier(0.72, 0.14, 0.3, 1.51); &:hover { translate: 0 -20%; scale: 2; z-index: 2; clip-path: inset(0px 0px round 12px); transition: translate .2s cubic-bezier(0.4, 0, 0.2, 1), scale .6s cubic-bezier(0.22, 0.61, 0.36, 1), clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1); } } } @container gallery (min-width: 750px) { .gallery { img { &:hover { scale: 1.3; } } } </style> </head> <body translate="no"> <div id="circle" style="--xpos:0;--ypos:0;"></div> <div class="gallery"> <img src="//repo.bfw.wiki/random/300x400/景色?rad=1" alt="Vigo, Casa Bonín" /> <img src="//repo.bfw.wiki/random/300x400/景色?rad=3" alt="Vigo, Rúa de Marqués de Valladares" /> <img src="//repo.bfw.wiki/random/300x400/景色?rad=2" alt="Vigo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0