js+css实现一个可滚动放大的放大镜效果代码
代码语言:html
所属分类:图片放大
代码描述:js+css实现一个可滚动放大的放大镜效果代码,鼠标滚轮滚动可放大缩小区域。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { min-height: 100vh; --mask-blur: 20px; --mask-size: 15vmin; --mask-x: 25%; --mask-y: 25%; --zoom: 1.5; cursor: crosshair; font-family: system-ui; } p { position: absolute; bottom: 1rem; right: 1rem; margin: 0; font-size: 2rem; } #bottom_layer { position: fixed; inset: 0; background: url('//repo.bfw.wiki/bfwrepo/image/606b0245271a8.png'); background-size: cover; transform-origin: var(--mask-x) var(--mask-y); transform: scale(var(--zoom)); image-rendering: auto; } #mid_layer { position: fixed; inset: 0; background: url('//repo.bfw.wiki/bfwrepo/image/606b0245271a8.png'); background-size: cover; -webkit-mask:radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99%, #fff 100%); mask:radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99%, #fff 100%); } #lens { position: fixed; inset: 0; backdrop-filter: blur(var(--mask-blur)); -webkit-mask:radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99%, #fff 100%); mask:radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99%, #fff 100%); filter: drop-shadow(-5px 5px 5px rgba(0,0,0,.25)); } #lens:before { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0