https://duan602728596.github.io/_next/static/chunks/pages/article/web/mix-image-b4e8009d86f1c054.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3505],{76269:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/article/web/mix-image",function(){return t(7200)}])},7200:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return B}});var i=t(85893),o=t(67294),r=t(9008),s=t.n(r),a=t(66252),c=t(57307),l=t(26219),u=t(41577),d=t(72253),p=t(24043),m=t(87162),h=t(52856),x=t(93967),g=t.n(x),v=t(2824),f=t.n(v),_=t(78046),b=[{avifSrc:"/images/mix-image/3.avif",webpSrc:"/images/mix-image/3.webp",src:"/images/mix-image/3.jpg",alt:"吹响吧！上低音号 吉川优子"},{avifSrc:"/images/mix-image/2.avif",webpSrc:"/images/mix-image/2.webp",src:"/images/mix-image/2.jpg",alt:"吹响吧！上低音号 中川夏纪"}],j=function(e){var n=(0,o.useRef)(null),t=(0,p._)((0,o.useState)(0),2),r=t[0],s=t[1],a=(0,o.useCallback)(function(e){if(n.current){var t=n.current.getBoundingClientRect(),i=[e.clientX-t.left,e.clientY-t.top],o=i[0],r=i[1];n.current.style.setProperty("--x","".concat(o,"px")),n.current.style.setProperty("--y","".concat(r,"px"))}},[]),c=(0,o.useCallback)(function(e){n.current.style.setProperty("--radius","100px"),a(e),document.addEventListener("mousemove",a)},[]);return(0,o.useEffect)(function(){return document.addEventListener("mouseover",c,{once:!0}),function(){document.removeEventListener("mouseover",c),document.removeEventListener("mousemove",a)}},[]),(0,i.jsx)(o.Fragment,{children:(0,i.jsx)(m.Z,{className:f().card,styles:{body:{textAlign:"center"}},extra:(0,i.jsx)(h.ZP,{onClick:function(e){s(function(e){return 0===e?1:0})},children:"切换图片"}),children:(0,i.jsx)("div",{ref:n,className:g()("inline-block",f().container),children:(0,i.jsxs)("div",{className:"relative inline-block max-w-[500px] pointer-events-none",children:[(0,i.jsx)(_.Z,(0,d._)({className:"block w-full",imageClassName:"w-full"},b[r])),(0,i.jsx)(_.Z,(0,d._)({className:g()("block absolute top-0 left-0 w-full pointer-events-none",f().mix),imageClassName:"w-full"},b[0===r?1:0]))]})})})})},y=t(14932),w=t(11151);function k(e){var n=(0,d._)({code:"code",pre:"pre"},(0,w.a)(),e.components);return(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:"<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n    <style>\n      .bottomBg {\n      --topX: 0;\n      --topY: 0;\n      --radius: 0;\n\n      width: 720px;\n      height: 911px;\n      background-image: url('./2.jpg');\n    }\n\n      .upBg {\n      width: 100%;\n      height: 100%;\n      background-image: url('./3.jpg');\n      clip-path: circle(var(--radius) at var(--topX) var(--topY));\n      pointer-events: none;\n    }\n    </style>\n</head>\n<body>\n<div class=\"bottomBg\" id=\"bottomBg\">\n  <div class=\"upBg\"></div>\n</div>\n\n<script>\n  const bottomBg = document.getElementById('bottomBg');\n\n  function handleMouseMove(event) {\n  const bounding = bottomBg.getBoundingClientRect();\n  const [x, y] = [event.clientX - bounding.left, event.clientY - bounding.top];\n\n  bottomBg.style.setProperty('--topX', `${ x }px`);\n  bottomBg.style.setProperty('--topY', `${ y }px`);\n}\n\n  function handleMouseOver(event) {\n  handleMouseMove(event);\n  bottomBg.style.setProperty('--radius', '120px');\n}\n\n  document.addEventListener('mousemove', handleMouseMove);\n  document.addEventListener('mouseover', handleMouseOver, { once: true });\n</script>\n</body>\n</html>\n"})})}function S(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=(0,d._)({},(0,w.a)(),e.components).wrapper;return n?(0,i.jsx)(n,(0,y._)((0,d._)({},e),{children:(0,i.jsx)(k,(0,d._)({},e))})):k(e)}var C=a.Z.Title,N=a.Z.Paragraph,Z=function(e){return(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(C,{children:"使用CSS的clip-path属性实现图片探照灯效果"}),(0,i.jsxs)(N,{children:["今天在",(0,i.jsx)(u.Z,{href:"https://voussoir.net/writing/browser_in_the_dark",children:"这个网站"}),"上看到了一篇文章，使用CSS的clip-path属性实现的手电筒的特效，觉得非常赞，于是自己也模仿了一下。"]}),(0,i.jsx)(j,{}),(0,i.jsx)(C,{level:2,children:"代码演示"}),(0,i.jsx)(S,{}),(0,i.jsx)(c.Z,{type:"info",message:[(0,i.jsx)("div",{className:"mb-0 py-[8px] text-[16px]",children:"参考地址："},"cankaodizhi"),(0,i.jsxs)("div",{className:"py-[8px]",children:["Browser in the Dark: flashlights with CSS and canvas：",(0,i.jsx)(u.Z,{href:"https://voussoir.net/writing/browser_in_the_dark",children:"https://voussoir.net/writing/browser_in_the_dark"})]},"browser_in_the_dark"),(0,i.jsxs)("div",{className:"py-[8px]",children:["clip-path：",(0,i.jsx)(u.Z,{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path",children:"https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path"})]},"clip-path")]})]})};function B(e){return(0,i.jsxs)(o.Fragment,{children:[(0,i.jsxs)(s(),{children:[(0,i.jsx)("title",{children:"使用CSS的clip-path属性实现图片探照灯效果"}),(0,i.jsx)("meta",{name:"keywords",content:"前端, CSS, clip-path"}),(0,i.jsx)("meta",{name:"description",content:"使用CSS的clip-path属性实现图片探照灯效果"})]}),(0,i.jsx)(Z,{})]})}},94914:function(e,n,t){"use strict";var i=t(85893),o=t(73935),r=t(39332),s=t(39738),a=t(52856),c=t(70612),l=t(30448),u=t(76467),d=t(1294),p=t.n(d),m=s.Z.BackTop;n.Z=function(e){var n=(0,r.useRouter)();return[(0,i.jsxs)("div",{className:p().main,children:[e.goBack?(0,i.jsx)("div",{className:"mb-[16px] text-right",children:(0,i.jsxs)(a.ZP,{onClick:function(e){n.push("/")},children:[(0,i.jsx)(l.Z,{className:"mr-[6px]"}),"返回"]})}):null,null==e?void 0:e.children]},"main"),(null==e?void 0:e.goToTop)?(0,i.jsx)(u.default,{children:"object"==typeof document?(0,o.createPortal)((0,i.jsx)(m,{type:"primary",icon:(0,i.jsx)(c.Z,{}),title:"返回顶部",tabIndex:0,role:"button","aria-label":"返回顶部"}),document.body):null},"backTop"):null]}},26219:function(e,n,t){"use strict";var i=t(85893),o=t(66252),r=t(94914);n.Z=function(e){return(0,i.jsx)(r.Z,{goToTop:!0,goBack:!0,children:(0,i.jsx)(o.Z,{children:e.children})})}},1294:function(e){e.exports={main:"main_main__IZXSv",goToTop:"main_goToTop__Py8c8"}},2824:function(e){e.exports={container:"clipPathImageMixDemo_container__4LUU2",mix:"clipPathImageMixDemo_mix__cG8pT",card:"clipPathImageMixDemo_card__KvUjR"}}},function(e){e.O(0,[2856,8375,7307,4853,1991,7162,2888,9774,179],function(){return e(e.s=76269)}),_N_E=e.O()}]);