1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[3317],{8402:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"day_series/02-2024_ithome/day_15","title":"Day 15 - \u58d3\u7e2e\u6587\u5b57\u6548\u679c","description":"\u4eca\u5929\u9019\u500b\u7279\u6548\u662f\u6211\u9031\u672b\u6ed1 IG \u770b\u5230 This.Web \u5728\u4ecb\u7d39\u6587\u5b57\u8df3\u8e8d\u8d77\u4f86\u7684\u7279\u6548\uff0c\u525b\u597d\u6211\u56e0\u70ba\u62ff\u6389\u5e7e\u7bc7\u5be6\u4f5c\u8d77\u4f86\u8ddf\u524d\u9762\u5e7e\u5929\u5f88\u76f8\u4f3c\u7684\u4e3b\u984c\u6b63\u82e6\u7121\u66ff\u4ee3\uff0c\u6240\u4ee5\u6c7a\u5b9a\u4e5f\u7df4\u7df4\u5982\u4f55\u8b93\u6587\u5b57\u300c\u8df3\u300d\u8d77\u4f86\u3002","source":"@site/docs/30_day_series/02-2024_ithome/16-day_15.mdx","sourceDirName":"30_day_series/02-2024_ithome","slug":"/day_series/02-2024_ithome/day_15","permalink":"/docs/day_series/02-2024_ithome/day_15","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":16,"frontMatter":{"title":"Day 15 - \u58d3\u7e2e\u6587\u5b57\u6548\u679c"},"sidebar":"thirtySeriesSidebar","previous":{"title":"Day 14 - \u6253\u5b57\u6a5f\u6548\u679c","permalink":"/docs/day_series/02-2024_ithome/day_14"},"next":{"title":"Day 16 - \u5f48\u8df3\u6587\u5b57\u6548\u679c","permalink":"/docs/day_series/02-2024_ithome/day_16"}}');var r=s(74848),i=s(28453);const o={title:"Day 15 - \u58d3\u7e2e\u6587\u5b57\u6548\u679c"},a=void 0,c={},d=[{value:"\u58d3\u7e2e\u6587\u5b57\u6548\u679c",id:"\u58d3\u7e2e\u6587\u5b57\u6548\u679c",level:2},{value:"\u7d50\u8a9e",id:"\u7d50\u8a9e",level:2}];function l(e){const n={a:"a",blockquote:"blockquote",br:"br",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["\u4eca\u5929\u9019\u500b\u7279\u6548\u662f\u6211\u9031\u672b\u6ed1 IG \u770b\u5230 ",(0,r.jsx)(n.a,{href:"https://www.instagram.com/p/C_AwpqYyKv7/?img_index=1",children:"This.Web"})," \u5728\u4ecb\u7d39\u6587\u5b57\u8df3\u8e8d\u8d77\u4f86\u7684\u7279\u6548\uff0c\u525b\u597d\u6211\u56e0\u70ba\u62ff\u6389\u5e7e\u7bc7\u5be6\u4f5c\u8d77\u4f86\u8ddf\u524d\u9762\u5e7e\u5929\u5f88\u76f8\u4f3c\u7684\u4e3b\u984c\u6b63\u82e6\u7121\u66ff\u4ee3\uff0c\u6240\u4ee5\u6c7a\u5b9a\u4e5f\u7df4\u7df4\u5982\u4f55\u8b93\u6587\u5b57\u300c\u8df3\u300d\u8d77\u4f86\u3002",(0,r.jsx)(n.br,{}),"\n","\u554a\u4e0d\u904e ",(0,r.jsx)(n.strong,{children:"This.Web"})," \u5728 IG \u63d0\u4f9b\u7684\u7bc4\u4f8b\u771f\u7684\u592a\u9177\u70ab \uff0c\u9084\u6709\u7528\u5230\u4e00\u4e9b JavaScript\uff0c\u6211\u9019\u908a\u5c31\u53ea\u662f\u597d\u5947\u7a0d\u5fae\u6478\u6478\uff0c\u8457\u91cd\u5728 CSS \u90e8\u5206\u800c\u5df2\u3002",(0,r.jsx)(n.br,{}),"\n","\u90a3\u6211\u662f\u9019\u6a23\u60f3\u7684\uff0c",(0,r.jsx)(n.strong,{children:"This.Web"})," \u7684\u6587\u5b57\u8df3\u8e8d\u5176\u5be6\u662f\u6709",(0,r.jsx)(n.strong,{children:"\u58d3\u7e2e"})," + ",(0,r.jsx)(n.strong,{children:"\u5f48\u8d77"}),"\u7684\u611f\u89ba\uff0c\u6211\u5011\u4eca\u5929\u5148\u4f86\u73a9\u58d3\u7e2e\uff0c\u660e\u5929\u518d\u4f86\u73a9\u5f48\u8d77\u3002"]}),"\n",(0,r.jsx)(n.h2,{id:"\u58d3\u7e2e\u6587\u5b57\u6548\u679c",children:"\u58d3\u7e2e\u6587\u5b57\u6548\u679c"}),"\n",(0,r.jsxs)(n.p,{children:["\u5176\u5be6\u6587\u5b57\u58d3\u4e0b\u53bb\u7684\u611f\u89ba\u672c\u8cea\u4e0a\u4e5f\u662f\u900f\u904e ",(0,r.jsx)(n.code,{children:"transform"})," \u4f86\u9054\u6210\uff0c\u900f\u904e ",(0,r.jsx)(n.code,{children:"scale"})," \u5c07\u6587\u5b57\u5f9e Y \u8ef8\u7e2e\u5c0f\u4f46\u5f9e X \u8ef8\u7a0d\u5fae\u653e\u5927\u5c31\u6703\u8b93\u6587\u5b57\u770b\u8d77\u4f86\u6709\u9ede\u88ab\u58d3\u6241\u7684\u611f\u89ba\u3002"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<div class="squish-text">\n <span>\u58d3</span>\n <span>\u7e2e</span>\n <span>\u5f48</span>\n <span>\u6027</span>\n <span>\u6548</span>\n <span>\u679c</span>\n</div>\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* \u4e00\u6a23\u7701\u7565\u5176\u5b83\u96dc\u4e03\u96dc\u516b\u7684\u8a2d\u5b9a */\n.squish-text span {\n transition: transform 0.5s cubic-bezier(0.25, 1.5, 0.5, 1);\n}\n\n.squish-text span:hover {\n transform: scale(1.2, 0.8); /* \u6c34\u5e73\u65b9\u5411\u653e\u5927\uff0c\u5782\u76f4\u65b9\u5411\u58d3\u7e2e */\n}\n"})}),"\n",(0,r.jsx)("iframe",{height:"600",width:"100%",title:"day 15 - jump_text",src:"https://codepen.io/ChungYingHo/embed/RwzyYbM?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,r.jsxs)(n.p,{children:["See the Pen ",(0,r.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/RwzyYbM",children:"\nday 15 - jump_text"})," by ChungYingHo (",(0,r.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,r.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,r.jsxs)(n.p,{children:["\u55ef\uff0c\u5927\u6982\u5c31\u662f\u9019\u6a23\uff0c",(0,r.jsx)(n.code,{children:"transform"})," \u771f\u597d\u7528\u3002"]}),"\n",(0,r.jsx)(n.h2,{id:"\u7d50\u8a9e",children:"\u7d50\u8a9e"}),"\n",(0,r.jsxs)(n.p,{children:["\u4eca\u5929\u7684\u7d50\u8a9e\u4e0
1d\u662f\u5ee2\u8a71\uff0c\u662f\u525b\u597d ",(0,r.jsx)(n.strong,{children:"This.Web"})," \u5728\u9019\u7bc7 IG \u8cbc\u6587\u7684\u5f8c\u9762\u6709\u4e00\u6bb5\u8a71\u6211\u89ba\u5f97\u5f88\u6709\u9053\u7406\uff0c\u4e5f\u662f\u6211\u9435\u4eba\u8cfd\u9023\u7e8c\u5beb 15 \u5929 CSS \u7684\u5fc3\u60c5\uff1a"]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:"\u5f88\u591a\u770b\u8d77\u4f86\u5f88\u70ab\u7684\u6548\u679c\u539f\u7406\u5176\u5be6\u5f88\u7c21\u55ae\uff0c\u91cd\u9ede\u53cd\u800c\u662f\u4f60\u7684\u60f3\u50cf\u529b"}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>a});var t=s(96540);const r={},i=t.createContext(r);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]);
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.