1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[3614],{28453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>a});var r=s(96540);const i={},t=r.createContext(i);function o(e){const n=r.useContext(t);return r.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(i):e.components||i:o(e.components),r.createElement(t.Provider,{value:n},e.children)}},89890:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"series/iThome_2024/day_08","title":"Day 08 - \u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c","description":"\u76f8\u4fe1\u4f60\u6709\u5be6\u5728\u901b\u4e00\u4e9b\u7db2\u7ad9\u6642\uff0c\u5c24\u5176\u90a3\u7a2e\u96fb\u5546\u5e73\u53f0\uff0c\u4f60\u53ef\u80fd\u6703\u6ce8\u610f\u5230\u6709\u4e00\u4e9b\u7db2\u7ad9\u7684\u8a2d\u8a08\u662f\u7576\u4f60\u6ed1\u9f20\u61f8\u505c\u5728\u5716\u7247\u4e0a\u6642\u5716\u7247\u6703\u6709\u4e00\u500b\u653e\u5927\u7684\u6548\u679c\uff0c\u8b93\u4f60\u53ef\u4ee5\u660e\u78ba\u77e5\u9053\u4f60\u6b63\u5728\u95dc\u6ce8\u54ea\u9805\u5546\u54c1\uff0c\u800c\u4e14\u4e5f\u589e\u52a0\u4e86\u4e00\u4e9b\u4e92\u52d5\u6027\u3002","source":"@site/docs/series/01-iThome_2024/08-day_08.mdx","sourceDirName":"series/01-iThome_2024","slug":"/series/iThome_2024/day_08","permalink":"/docs/series/iThome_2024/day_08","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":8,"frontMatter":{"title":"Day 08 - \u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c"},"sidebar":"series","previous":{"title":"Day 07 - \u6a21\u7cca\u8207\u6ffe\u93e1\u6548\u679c","permalink":"/docs/series/iThome_2024/day_07"},"next":{"title":"Day 09 - \u6f38\u8b8a\u80cc\u666f\u52d5\u756b","permalink":"/docs/series/iThome_2024/day_09"}}');var i=s(74848),t=s(28453);const o={title:"Day 08 - \u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c"},a=void 0,c={},d=[{value:"\u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c",id:"\u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c",level:2},{value:"\u7d50\u8a9e",id:"\u7d50\u8a9e",level:2}];function l(e){const n={br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["\u76f8\u4fe1\u4f60\u6709\u5be6\u5728\u901b\u4e00\u4e9b\u7db2\u7ad9\u6642\uff0c\u5c24\u5176\u90a3\u7a2e\u96fb\u5546\u5e73\u53f0\uff0c\u4f60\u53ef\u80fd\u6703\u6ce8\u610f\u5230\u6709\u4e00\u4e9b\u7db2\u7ad9\u7684\u8a2d\u8a08\u662f\u7576\u4f60\u6ed1\u9f20\u61f8\u505c\u5728\u5716\u7247\u4e0a\u6642\u5716\u7247\u6703\u6709\u4e00\u500b\u653e\u5927\u7684\u6548\u679c\uff0c\u8b93\u4f60\u53ef\u4ee5\u660e\u78ba\u77e5\u9053\u4f60\u6b63\u5728\u95dc\u6ce8\u54ea\u9805\u5546\u54c1\uff0c\u800c\u4e14\u4e5f\u589e\u52a0\u4e86\u4e00\u4e9b\u4e92\u52d5\u6027\u3002",(0,i.jsx)(n.br,{}),"\n","\u9019\u6a23\u7684\u6548\u679c\u5176\u5be6\u975e\u5e38\u5bb9\u6613\u5be6\u73fe\uff0c\u4e3b\u8981\u5c31\u662f\u900f\u904e\u6211\u5011\u7b2c\u4e8c\u5929\u63d0\u5230\u7684 CSS \u8b8a\u5f62\uff0c\u900f\u904e ",(0,i.jsx)(n.code,{children:"transform"})," \u8ddf ",(0,i.jsx)(n.code,{children:"transition"})," \u4f86\u9054\u6210\u3002"]}),"\n",(0,i.jsx)(n.h2,{id:"\u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c",children:"\u5716\u7247\u61f8\u505c\u7e2e\u653e\u6548\u679c"}),"\n",(0,i.jsx)(n.p,{children:"\u6211\u5011\u76f4\u63a5\u4f86\u770b\u7bc4\u4f8b\uff1a"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'<div class="container">\n <div class="image-wrapper">\n <img src="https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg" alt="Sample Image">\n </div>\n</div>\n'})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:".image-wrapper img {\n transition: transform 0.3s ease-in-out;\n}\n\n.image-wrapper:hover img {\n transform: scale(1.2);\n}\n"})}),"\n",(0,i.jsx)("iframe",{height:"600",width:"100%",title:"day 08 - hover_img",src:"https://codepen.io/ChungYingHo/embed/dyBJBrq?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,i.jsxs)(n.p,{children:["See the Pen ",(0,i.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/dyBJBrq",children:"\nday 08 - hover_img"})," by ChungYingHo (",(0,i.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,i.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,i.jsx)(n.p,{children:"\u89e3\u91cb\u4e00\u4e0b\u4e0a\u9762\u767c\u751f\u4ec0\u9ebc\u4e8b\uff1a"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"transition: transform 0.3s ease-in-out;"}),"\uff1a\u9019\u884c CSS \u4ee3\u8868\u7576\u5716\u7247\u7684 ",(0,i.jsx)(n.code,{children:"transform"})," \u5c6c\u6027\u767c\u751f\u8b8a\u5316\u6642\uff0c\u6703\u6709 0.3 \u79d2\u7684\u904e\u6e21\u6548\u679c\uff0c\u4e26\u4e14\u662f\u4ee5 ",(0,i.jsx)(n.code,{children:"ease-in-out"})," \u7684\u65b9\u5f0f\u8b8a\u5316\u3002"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"transform: scale(1.2);"}),"\uff1a\u9019\u884c CSS \u4ee3\u8868\u7576\u6ed1\u9f20\u61f8\u505c\u5728\u5716\u7247\u4e0a\u6642\uff0c\u5716\u7247\u6703\u653e\u5927 1.2 \u500d\u3002"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"\u7d50\u8a9e",children:"\u7d50\u8a9e"}),"\n",(0,i.jsxs)(n.p,{children:["\u5176\u5be6\u5c31\u662f\u5ee2\u8a71\u5566\uff0c\u4e00\u65e6\u5f9e\u4e00\u4e9b\u57fa\u790e\u7406\u8ad6\u9032\u5230\u5be6\u4f5c\uff0c\u5176\u5be6\u5f88\u591a\u6771\u897f\u5beb\u6210\u6587\u7ae0\u4e0d\u904e\u5c31\u5be5\u5be5\u5e7e\u884c\uff0c\u53ea\u662f\u5e73\u5e38\u6709\u6c92\u6709\u60f3\u5230\u9019\u6a23\u61c9\u7528\u800c\u5df2\u3002",(0,i.jsx)(n.br,{}
1),"\n","\u6253\u9019\u500b\u7d50\u8a9e\u5176\u5be6\u5c31\u662f\u4f86\u6c34\u5b57\u6578\u7684 ","\ud83d\ude05",(0,i.jsx)(n.br,{}),"\n","\u53cd\u6b63\u4e4b\u5f8c\u61c9\u8a72\u6703\u6162\u6162\u90fd\u8b8a\u9019\u7a2e\u7c21\u77ed\u98a8\u683c\uff0c\u7562\u7adf\u6709\u4e9b\u6771\u897f\u771f\u7684\u5be6\u969b\u505a\u8d77\u4f86\u771f\u7684\u5f88\u7c21\u55ae\u3002"]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(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.