1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[219],{28453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>i});var s=t(96540);const o={},r=s.createContext(o);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(r.Provider,{value:n},e.children)}},78293:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"series/iThome_2024/day_18","title":"Day 18 - \u6587\u5b57\u7206\u70b8\u7279\u6548","description":"\u4eca\u5929\u65e9\u4e0a\u6211\u5bc6\u4e86\u4e00\u500b\u524d\u7aef\u5de5\u7a0b\u5e2b\u7fa4\u7d44\uff0c\u8aaa\uff1a\u8a92\uff0c\u6211\u4eca\u5929\u9435\u4eba\u8cfd\u5c11\u4e86\u4e00\u500b\u4e3b\u984c\u8a92\uff0c\u6709\u6c92\u6709\u4eba\u6709\u597d\u9ede\u5b50\u53ef\u4ee5\u5206\u4eab\u4e00\u4e0b\uff1f","source":"@site/docs/series/01-iThome_2024/18-day_18.mdx","sourceDirName":"series/01-iThome_2024","slug":"/series/iThome_2024/day_18","permalink":"/docs/series/iThome_2024/day_18","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":18,"frontMatter":{"title":"Day 18 - \u6587\u5b57\u7206\u70b8\u7279\u6548"},"sidebar":"series","previous":{"title":"Day 17 - \u5f48\u8df3\u6587\u5b57\u6548\u679c\u6700\u7d42\u56de","permalink":"/docs/series/iThome_2024/day_17"},"next":{"title":"Day 19 - \u8dd1\u99ac\u71c8\u6587\u5b57","permalink":"/docs/series/iThome_2024/day_19"}}');var o=t(74848),r=t(28453);const a={title:"Day 18 - \u6587\u5b57\u7206\u70b8\u7279\u6548"},i=void 0,c={},l=[];function d(e){const n={br:"br",code:"code",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["\u4eca\u5929\u65e9\u4e0a\u6211\u5bc6\u4e86\u4e00\u500b\u524d\u7aef\u5de5\u7a0b\u5e2b\u7fa4\u7d44\uff0c\u8aaa\uff1a\u8a92\uff0c\u6211\u4eca\u5929\u9435\u4eba\u8cfd\u5c11\u4e86\u4e00\u500b\u4e3b\u984c\u8a92\uff0c\u6709\u6c92\u6709\u4eba\u6709\u597d\u9ede\u5b50\u53ef\u4ee5\u5206\u4eab\u4e00\u4e0b\uff1f",(0,o.jsx)(n.br,{}),"\n","\u4e00\u500b\u7576\u521d\u5728\u524d\u516c\u53f8\u5e36\u904e\u6211\u7684\u524d\u8f29\u7d66\u4e86\u6211\u4e00\u500b\u6211\u5f9e\u6c92\u60f3\u904e\u7684\u56de\u7b54\uff1a\u8b93\u6587\u5b57\u7206\u70b8\u5427\uff01",(0,o.jsx)(n.br,{}),"\n","\u55ef\uff0c\u597d\uff0c\u7684\u78ba\u633a\u6709\u8da3\u7684\uff0c\u6240\u4ee5\u5c31\u9019\u6a23\u4eca\u5929\u7684\u4e3b\u984c\u5c31\u9019\u6a23\u6109\u5feb\u5730\u5b9a\u4e86\u3002"]}),"\n",(0,o.jsxs)(n.p,{children:["\u662f\u8aaa\uff0c\u6240\u8b02\u6587\u5b57\u7206\u70b8\u7279\u6548\uff0c\u5176\u5be6\u4e5f\u53ea\u662f\u8b93\u6587\u5b57\u5728\u6ed1\u9f20\u9ede\u64ca\u6642\u56db\u6563\u958b\u4f86\uff0c\u4ed4\u7d30\u60f3\u4e00\u4e0b\u5c31\u662f\u4e00\u500b ",(0,o.jsx)(n.code,{children:"translate"})," + ",(0,o.jsx)(n.code,{children:"rotate"})," \u505a\u6210\u7684\u7c21\u55ae\u52d5\u756b\u7f77\u4e86\u3002",(0,o.jsx)(n.br,{}),"\n","\u4f46\u70ba\u4e86\u71df\u9020\u90a3\u7a2e\u7206\u70b8\u56db\u6563\u7684\u96a8\u6a5f\u6027\uff0c\u4eca\u5929\u5f15\u5165\u7528\u4e00\u9ede JavaScript \u4f86\u8b93\u90a3\u500b\u56db\u6563\u7684\u7684\u65b9\u5411\u8b8a\u5f97\u96a8\u6a5f\u3002",(0,o.jsx)(n.br,{}),"\n","\u540c\u6a23\uff0c\u5148\u770b code \u624d\u597d\u7e7c\u7e8c\u8aaa\u4e0b\u53bb\uff1a"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<div class="explosion-container">\n <span class="explosion-text">\u9ede\u64ca\u9019\u88e1\uff01</span>\n</div>\n'})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:".explosion-container {\n display: inline-block;\n font-size: 40px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.explosion-text {\n display: inline-block;\n position: relative;\n}\n\n.explosion-text span {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n transition: transform 0.6s ease-out, opacity 0.6s ease-out;\n}\n\n.explosion-text span.exploded {\n opacity: 1;\n transform: translate(calc(var(--x) * 1000px), calc(var(--y) * 1000px)) rotate(calc(var(--angle) * 360deg)) scale(0);\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-javascript",children:'document\n .querySelector(".explosion-text")\n .addEventListener("click", function () {\n const text = this.textContent;\n this.innerHTML = "";\n\n // Create spans for each character\n for (let i = 0; i < text.length;
1 i++) {\n const span = document.createElement("span");\n span.textContent = text[i];\n span.style.setProperty("--x", Math.random() - 0.5);\n span.style.setProperty("--y", Math.random() - 0.5);\n span.style.setProperty("--angle", Math.random());\n this.appendChild(span);\n }\n\n requestAnimationFrame(() => {\n this.querySelectorAll("span").forEach((span) => {\n span.classList.add("exploded");\n });\n });\n\n // Add reverting class after 1 seconds\n setTimeout(() => {\n this.classList.add("reverting");\n\n setTimeout(() => {\n // Clean up the reverting state\n this.classList.remove("reverting");\n this.innerHTML = text; // Restore original text\n }, 600); // Match the duration of the transition\n }, 1000); // 1 seconds delay\n });\n'})}),"\n",(0,o.jsx)("iframe",{height:"600",width:"100%",title:"day 18 - explosion_text",src:"https://codepen.io/ChungYingHo/embed/KKjBQwd?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,o.jsxs)(n.p,{children:["See the Pen ",(0,o.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/KKjBQwd",children:"\nday 18 - explosion_text"})," by ChungYingHo (",(0,o.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,o.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,o.jsxs)(n.p,{children:["\u5176\u5be6\u53ef\u4ee5\u770b\u5230\u5728 CSS \u4e2d\uff0c",(0,o.jsx)(n.code,{children:".explosion-text span"})," \u8ddf ",(0,o.jsx)(n.code,{children:".explosion-text span.exploded"})," \u9019\u5169\u9805\u9078\u4e2d\u7684\u90fd\u662f\u9ede\u64ca\u4e8b\u4ef6\u89f8\u767c\u5f8c\u7531 JavaScript \u52d5\u614b\u751f\u6210\u7684 ",(0,o.jsx)(n.code,{children:"span"})," \u4ee5\u53ca class\u3002",(0,o.jsx)(n.br,{}),"\n","\u4ea4\u7d66 JavaScript \u505a\u53ea\u662f\u56e0\u70ba\u6211\u61f6\u5f97\u50cf\u524d\u5e7e\u5929\u5f48\u8df3\u6587\u5b57\u4e00\u6a23\u4e00\u500b\u5b57\u4e00\u500b\u5b57\u6572 ",(0,o.jsx)(n.code,{children:"span"})," \u4e86\uff0c\u9019\u6a23\u5beb\u771f\u7684\u6bd4\u8f03\u5feb\u3002",(0,o.jsx)(n.br,{}),"\n","\u4f46\u90a3\u4e0d\u662f\u91cd\u9ede\uff01"]}),"\n",(0,o.jsxs)(n.p,{children:["\u4e0a\u9762\u7684\u91cd\u9ede\u5176\u5be6\u662f\u5728 ",(0,o.jsx)(n.code,{children:"transform: translate(calc(var(--x) * 1000px), calc(var(--y) * 1000px)) rotate(calc(var(--angle) * 360deg)) scale(0);"})," \u9019\u884c\u3002",(0,o.jsx)(n.br,{}),"\n","\u6211\u5011\u628a X \u548c Y \u8ef8\u7684 ",(0,o.jsx)(n.code,{children:"translate"})," (\u4f4d\u79fb) \u4ee5\u53ca ",(0,o.jsx)(n.code,{children:"rotate"})," \u90fd\u4ea4\u7d66 JavaScript \u4f86\u96a8\u6a5f\u751f\u6210\u6578\u503c\uff0c\u9019\u6a23\u5c31\u53ef\u4ee5\u8b93\u6587\u5b57\u6bcf\u6b21\u9ede\u64ca\u6642\u56db\u6563\u7684\u65b9\u5411\u90fd\u4e0d\u4e00\u6a23\u3002",(0,o.jsx)(n.br,{}),"\n",(0,o.jsx)(n.code,{children:"scale(0)"})," \u5247\u662f\u8b93\u6587\u5b57\u5728\u56db\u6563\u6642\u7e2e\u6210 0\uff0c\u8b93\u5b83\u770b\u8d77\u4f86\u50cf\u662f\u6d88\u5931\u4e86\u3002",(0,o.jsx)(n.br,{}),"\n","(\u5982\u679c\u6709\u4eba\u8981\u554f\u4e0b\u9762 ",(0,o.jsx)(n.code,{children:"setTimeout"})," \u5728\u5e79\u561b\uff0c\u5b83\u5176\u5be6\u53ea\u662f\u6211\u60f3\u8b93\u6587\u5b57\u5728\u7206\u70b8\u5f8c\u5728\u5fa9\u539f\u800c\u5df2\uff0c\u9019\u53eb\u5584\u5f8c www)"]})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.