{"id":262,"date":"2026-03-16T23:19:32","date_gmt":"2026-03-16T15:19:32","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=262"},"modified":"2026-03-16T23:19:32","modified_gmt":"2026-03-16T15:19:32","slug":"day-17-css%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=262","title":{"rendered":"Day-17-CSS\u52a8\u753b"},"content":{"rendered":"<h1>Day 17: CSS \u52a8\u753b (CSS Animation)<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u7406\u89e3 CSS \u52a8\u753b\u7684\u57fa\u672c\u6982\u5ff5\u548c\u539f\u7406<\/li>\n<li>\u638c\u63e1 <code>@keyframes<\/code> \u89c4\u5219\u7684\u4f7f\u7528\u65b9\u6cd5<\/li>\n<li>\u5b66\u4f1a\u4f7f\u7528 <code>animation<\/code> \u7b80\u5199\u5c5e\u6027<\/li>\n<li>\u80fd\u591f\u521b\u5efa\u590d\u6742\u7684\u52a8\u753b\u6548\u679c\u548c\u8fc7\u6e21<\/li>\n<li>\u4e86\u89e3\u6027\u80fd\u4f18\u5316\u548c\u6700\u4f73\u5b9e\u8df5<\/li>\n<\/ul>\n<hr>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>\u4ec0\u4e48\u662f CSS \u52a8\u753b\uff1f<\/h3>\n<p><strong>CSS \u52a8\u753b<\/strong> \u662f\u4e00\u79cd\u4f7f\u7528 CSS \u521b\u5efa\u5143\u7d20\u52a8\u6001\u6548\u679c\u7684\u6280\u672f\uff0c\u53ef\u4ee5\u8ba9\u5143\u7d20\u4ece\u4e00\u4e2a\u6837\u5f0f\u9010\u6e10\u53d8\u5316\u5230\u53e6\u4e00\u4e2a\u6837\u5f0f\uff0c\u521b\u5efa\u6d41\u7545\u7684\u89c6\u89c9\u4f53\u9a8c\u3002<\/p>\n<h3>CSS \u52a8\u753b vs CSS \u8fc7\u6e21<\/h3>\n<table>\n<thead>\n<tr>\n<th>\u7279\u6027<\/th>\n<th>CSS \u52a8\u753b (Animation)<\/th>\n<th>CSS \u8fc7\u6e21 (Transition)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u590d\u6742\u5ea6<\/td>\n<td>\u53ef\u4ee5\u521b\u5efa\u590d\u6742\u7684\u591a\u9636\u6bb5\u52a8\u753b<\/td>\n<td>\u53ea\u80fd\u5728\u4e24\u4e2a\u72b6\u6001\u4e4b\u95f4\u8fc7\u6e21<\/td>\n<\/tr>\n<tr>\n<td>\u63a7\u5236\u529b<\/td>\n<td>\u53ef\u4ee5\u6682\u505c\u3001\u53cd\u8f6c\u3001\u63a7\u5236\u64ad\u653e\u8fdb\u5ea6<\/td>\n<td>\u8f83\u5c11\u7684\u63a7\u5236\u9009\u9879<\/td>\n<\/tr>\n<tr>\n<td>\u5173\u952e\u5e27<\/td>\n<td>\u652f\u6301\u591a\u4e2a\u5173\u952e\u5e27<\/td>\n<td>\u53ea\u6709\u8d77\u59cb\u548c\u7ed3\u675f\u72b6\u6001<\/td>\n<\/tr>\n<tr>\n<td>JavaScript \u4ea4\u4e92<\/td>\n<td>\u63d0\u4f9b\u4e30\u5bcc\u7684 API \u63a5\u53e3<\/td>\n<td>\u8f83\u5c11\u7684 API \u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>\u6027\u80fd<\/td>\n<td>\u540c\u6837\u57fa\u4e8e GPU \u52a0\u901f<\/td>\n<td>\u540c\u6837\u57fa\u4e8e GPU \u52a0\u901f<\/td>\n<\/tr>\n<tr>\n<td>\u9002\u7528\u573a\u666f<\/td>\n<td>\u590d\u6742\u52a8\u753b\u5e8f\u5217\u3001\u5faa\u73af\u52a8\u753b<\/td>\n<td>\u7b80\u5355\u7684\u72b6\u6001\u53d8\u5316<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\u52a8\u753b\u7684\u57fa\u672c\u7ec4\u6210\u90e8\u5206<\/h3>\n<pre><code class=\"language-css\">\/* 1. \u5b9a\u4e49\u5173\u952e\u5e27 *\/\n@keyframes animationName {\n  from { \/* \u8d77\u59cb\u72b6\u6001 *\/ }\n  to { \/* \u7ed3\u675f\u72b6\u6001 *\/ }\n}\n\n\/* 2. \u5e94\u7528\u52a8\u753b *\/\n.element {\n  animation: animationName 2s ease-in-out infinite;\n}\n<\/code><\/pre>\n<hr>\n<h2>\ud83d\udcdd \u52a8\u753b\u5c5e\u6027\u8be6\u89e3<\/h2>\n<h3>1. @keyframes &#8211; \u5b9a\u4e49\u5173\u952e\u5e27<\/h3>\n<p><strong>\u8bed\u6cd5<\/strong>:<\/p>\n<pre><code class=\"language-css\">@keyframes animationName {\n  \/* \u767e\u5206\u6bd4\u8868\u793a\u65f6\u95f4\u70b9 *\/\n  0% { \/* \u8d77\u59cb\u72b6\u6001 *\/ }\n  50% { \/* \u4e2d\u95f4\u72b6\u6001 *\/ }\n  100% { \/* \u7ed3\u675f\u72b6\u6001 *\/ }\n  \n  \/* \u4e5f\u53ef\u4ee5\u4f7f\u7528 from \u548c to *\/\n  from { \/* \u7b49\u540c\u4e8e 0% *\/ }\n  to { \/* \u7b49\u540c\u4e8e 100% *\/ }\n}\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u6de1\u5165\u6548\u679c *\/\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\/* \u79fb\u52a8\u6548\u679c *\/\n@keyframes moveRight {\n  0% {\n    transform: translateX(0);\n  }\n  50% {\n    transform: translateX(100px);\n  }\n  100% {\n    transform: translateX(200px);\n  }\n}\n\n\/* \u591a\u5c5e\u6027\u53d8\u5316 *\/\n@keyframes complex {\n  0% {\n    transform: scale(1) rotate(0deg);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.2) rotate(180deg);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) rotate(360deg);\n    opacity: 0;\n  }\n}\n<\/code><\/pre>\n<hr>\n<h3>2. animation-name &#8211; \u52a8\u753b\u540d\u79f0<\/h3>\n<p>\u6307\u5b9a\u8981\u5e94\u7528\u7684\u52a8\u753b\u540d\u79f0\uff08@keyframes \u5b9a\u4e49\u7684\u540d\u5b57\uff09\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  animation-name: fadeIn;\n}\n<\/code><\/pre>\n<hr>\n<h3>3. animation-duration &#8211; \u52a8\u753b\u65f6\u957f<\/h3>\n<p>\u8bbe\u7f6e\u52a8\u753b\u5b8c\u6210\u4e00\u4e2a\u5468\u671f\u6240\u9700\u7684\u65f6\u95f4\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  animation-duration: 2s;      \/* 2\u79d2 *\/\n  animation-duration: 1000ms;  \/* 1000\u6beb\u79d2 *\/\n}\n<\/code><\/pre>\n<hr>\n<h3>4. animation-timing-function &#8211; \u65f6\u95f4\u51fd\u6570<\/h3>\n<p>\u63a7\u5236\u52a8\u753b\u7684\u901f\u5ea6\u66f2\u7ebf\u3002<\/p>\n<p><strong>\u5e38\u7528\u503c<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u7ebf\u6027\u901f\u5ea6 *\/\nanimation-timing-function: linear;\n\n\/* \u7f13\u52a8\u6548\u679c *\/\nanimation-timing-function: ease;        \/* \u9ed8\u8ba4\u503c *\/\nanimation-timing-function: ease-in;     \/* \u6162\u901f\u5f00\u59cb *\/\nanimation-timing-function: ease-out;    \/* \u6162\u901f\u7ed3\u675f *\/\nanimation-timing-function: ease-in-out; \/* \u6162\u901f\u5f00\u59cb\u548c\u7ed3\u675f *\/\n\n\/* \u81ea\u5b9a\u4e49\u8d1d\u585e\u5c14\u66f2\u7ebf *\/\nanimation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\n\n\/* \u9636\u68af\u51fd\u6570\uff08\u79bb\u6563\u6b65\u9aa4\uff09 *\/\nanimation-timing-function: steps(4);       \/* 4\u4e2a\u6b65\u9aa4 *\/\nanimation-timing-function: steps(4, end);  \/* \u5728\u6bcf\u4e2a\u6b65\u9aa4\u7ed3\u675f\u8df3\u53d8 *\/\nanimation-timing-function: steps(4, start); \/* \u5728\u6bcf\u4e2a\u6b65\u9aa4\u5f00\u59cb\u8df3\u53d8 *\/\n<\/code><\/pre>\n<p><strong>\u53ef\u89c6\u5316\u65f6\u95f4\u66f2\u7ebf<\/strong>:<\/p>\n<pre><code>linear:     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nease:       \u2571\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2572\nease-in:    \u2571\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nease-out:   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2572\nease-in-out:\u2571\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2572\n<\/code><\/pre>\n<hr>\n<h3>5. animation-delay &#8211; \u52a8\u753b\u5ef6\u8fdf<\/h3>\n<p>\u8bbe\u7f6e\u52a8\u753b\u5f00\u59cb\u524d\u7684\u5ef6\u8fdf\u65f6\u95f4\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  animation-delay: 1s;     \/* \u5ef6\u8fdf1\u79d2\u540e\u5f00\u59cb *\/\n  animation-delay: -0.5s;  \/* \u7acb\u5373\u5f00\u59cb\uff0c\u4ece\u4e2d\u95f4\u5f00\u59cb\u64ad\u653e *\/\n}\n<\/code><\/pre>\n<hr>\n<h3>6. animation-iteration-count &#8211; \u8fed\u4ee3\u6b21\u6570<\/h3>\n<p>\u8bbe\u7f6e\u52a8\u753b\u64ad\u653e\u7684\u6b21\u6570\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  animation-iteration-count: 3;        \/* \u64ad\u653e3\u6b21 *\/\n  animation-iteration-count: infinite; \/* \u65e0\u9650\u5faa\u73af *\/\n  animation-iteration-count: 2.5;      \/* \u64ad\u653e2.5\u6b21 *\/\n}\n<\/code><\/pre>\n<hr>\n<h3>7. animation-direction &#8211; \u52a8\u753b\u65b9\u5411<\/h3>\n<p>\u8bbe\u7f6e\u52a8\u753b\u7684\u64ad\u653e\u65b9\u5411\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  \/* \u6b63\u5e38\u65b9\u5411\uff08\u9ed8\u8ba4\uff09 *\/\n  animation-direction: normal;\n  \n  \/* \u53cd\u5411\u64ad\u653e *\/\n  animation-direction: reverse;\n  \n  \/* \u4ea4\u66ff\u65b9\u5411\uff1a\u6b63-\u53cd-\u6b63-\u53cd... *\/\n  animation-direction: alternate;\n  \n  \/* \u53cd\u5411\u4ea4\u66ff\uff1a\u53cd-\u6b63-\u53cd-\u6b63... *\/\n  animation-direction: alternate-reverse;\n}\n<\/code><\/pre>\n<hr>\n<h3>8. animation-fill-mode &#8211; \u586b\u5145\u6a21\u5f0f<\/h3>\n<p>\u8bbe\u7f6e\u52a8\u753b\u5728\u64ad\u653e\u524d\u540e\u7684\u6837\u5f0f\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  \/* \u9ed8\u8ba4\u503c\uff1a\u52a8\u753b\u7ed3\u675f\u540e\u56de\u5230\u521d\u59cb\u72b6\u6001 *\/\n  animation-fill-mode: none;\n  \n  \/* \u52a8\u753b\u5f00\u59cb\u524d\u4fdd\u6301\u7b2c\u4e00\u5e27\u6837\u5f0f *\/\n  animation-fill-mode: backwards;\n  \n  \/* \u52a8\u753b\u7ed3\u675f\u540e\u4fdd\u6301\u6700\u540e\u4e00\u5e27\u6837\u5f0f *\/\n  animation-fill-mode: forwards;\n  \n  \/* \u540c\u65f6\u5e94\u7528 backwards \u548c forwards *\/\n  animation-fill-mode: both;\n}\n<\/code><\/pre>\n<p><strong>\u586b\u5145\u6a21\u5f0f\u5bf9\u6bd4<\/strong>:<\/p>\n<pre><code>none:       [\u521d\u59cb] \u2500\u2500\u52a8\u753b\u2500\u2500&gt; [\u56de\u5230\u521d\u59cb]\nbackwards:  [\u7b2c\u4e00\u5e27] \u2500\u2500\u52a8\u753b\u2500\u2500&gt; [\u56de\u5230\u521d\u59cb]\nforwards:   [\u521d\u59cb] \u2500\u2500\u52a8\u753b\u2500\u2500&gt; [\u6700\u540e\u4e00\u5e27]\nboth:       [\u7b2c\u4e00\u5e27] \u2500\u2500\u52a8\u753b\u2500\u2500&gt; [\u6700\u540e\u4e00\u5e27]\n<\/code><\/pre>\n<hr>\n<h3>9. animation-play-state &#8211; \u64ad\u653e\u72b6\u6001<\/h3>\n<p>\u63a7\u5236\u52a8\u753b\u7684\u64ad\u653e\u548c\u6682\u505c\u3002<\/p>\n<pre><code class=\"language-css\">.element {\n  animation-play-state: running;  \/* \u64ad\u653e\uff08\u9ed8\u8ba4\uff09 *\/\n  animation-play-state: paused;   \/* \u6682\u505c *\/\n}\n\n\/* \u60ac\u505c\u65f6\u6682\u505c\u52a8\u753b *\/\n.element:hover {\n  animation-play-state: paused;\n}\n<\/code><\/pre>\n<hr>\n<h3>10. animation &#8211; \u7b80\u5199\u5c5e\u6027<\/h3>\n<p>\u4e00\u6b21\u6027\u8bbe\u7f6e\u6240\u6709\u52a8\u753b\u5c5e\u6027\u3002<\/p>\n<pre><code class=\"language-css\">\/* \u5b8c\u6574\u8bed\u6cd5 *\/\nanimation: name duration timing-function delay iteration-count direction fill-mode play-state;\n\n\/* \u793a\u4f8b *\/\nanimation: fadeIn 2s ease-in-out 1s infinite alternate forwards running;\n\n\/* \u5206\u5f00\u5199\u66f4\u6e05\u6670 *\/\nanimation-name: fadeIn;\nanimation-duration: 2s;\nanimation-timing-function: ease-in-out;\nanimation-delay: 1s;\nanimation-iteration-count: infinite;\nanimation-direction: alternate;\nanimation-fill-mode: forwards;\nanimation-play-state: running;\n<\/code><\/pre>\n<p><strong>\u6ce8\u610f<\/strong>: \u7b80\u5199\u65f6\uff0c<code>duration<\/code> \u5fc5\u987b\u5728 <code>delay<\/code> \u4e4b\u524d\uff01<\/p>\n<hr>\n<h2>\ud83c\udfae \u5b9e\u6218\u793a\u4f8b<\/h2>\n<h3>\u793a\u4f8b 1: \u57fa\u7840\u6de1\u5165\u52a8\u753b<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u57fa\u7840\u6de1\u5165\u52a8\u753b&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      margin: 0;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      font-family: 'Arial', sans-serif;\n    }\n\n    .container {\n      text-align: center;\n    }\n\n    .box {\n      width: 200px;\n      height: 200px;\n      background: white;\n      border-radius: 20px;\n      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n      font-weight: bold;\n      color: #333;\n      \n      \/* \u5e94\u7528\u52a8\u753b *\/\n      animation: fadeInScale 1.5s ease-out forwards;\n      opacity: 0; \/* \u521d\u59cb\u4e0d\u53ef\u89c1 *\/\n    }\n\n    @keyframes fadeInScale {\n      0% {\n        opacity: 0;\n        transform: scale(0.5);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n\n    .delay-1 { animation-delay: 0.2s; }\n    .delay-2 { animation-delay: 0.4s; }\n    .delay-3 { animation-delay: 0.6s; }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;box delay-1&quot;&gt;Hello!&lt;\/div&gt;\n    &lt;div class=&quot;box delay-2&quot;&gt;CSS&lt;\/div&gt;\n    &lt;div class=&quot;box delay-3&quot;&gt;Animation&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>\u793a\u4f8b 2: \u65cb\u8f6c\u52a0\u8f7d\u52a8\u753b<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u65cb\u8f6c\u52a0\u8f7d\u52a8\u753b&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      margin: 0;\n      background: #1a1a2e;\n    }\n\n    .loader {\n      width: 100px;\n      height: 100px;\n      position: relative;\n    }\n\n    .loader::before,\n    .loader::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 4px solid transparent;\n    }\n\n    .loader::before {\n      border-top-color: #00d2ff;\n      border-right-color: #00d2ff;\n      animation: spin 1s linear infinite;\n    }\n\n    .loader::after {\n      border-bottom-color: #ff0055;\n      border-left-color: #ff0055;\n      animation: spin 1.5s linear infinite reverse;\n    }\n\n    @keyframes spin {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    .loading-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      color: white;\n      font-size: 14px;\n      font-weight: bold;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        opacity: 1;\n      }\n      50% {\n        opacity: 0.5;\n      }\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;loader&quot;&gt;\n    &lt;span class=&quot;loading-text&quot;&gt;Loading...&lt;\/span&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>\u793a\u4f8b 3: \u60ac\u6d6e\u5361\u7247\u6548\u679c<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u60ac\u6d6e\u5361\u7247\u6548\u679c&lt;\/title&gt;\n  &lt;style&gt;\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      min-height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n      font-family: 'Arial', sans-serif;\n    }\n\n    .card {\n      width: 300px;\n      background: white;\n      border-radius: 20px;\n      overflow: hidden;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n      transition: transform 0.3s ease;\n    }\n\n    .card:hover {\n      animation: float 3s ease-in-out infinite;\n    }\n\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-20px);\n      }\n    }\n\n    .card-image {\n      width: 100%;\n      height: 200px;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 48px;\n    }\n\n    .card-content {\n      padding: 20px;\n    }\n\n    .card-title {\n      font-size: 24px;\n      font-weight: bold;\n      color: #333;\n      margin-bottom: 10px;\n    }\n\n    .card-description {\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .card-button {\n      display: inline-block;\n      margin-top: 15px;\n      padding: 10px 20px;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      text-decoration: none;\n      border-radius: 25px;\n      font-weight: bold;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .card-button:hover {\n      transform: scale(1.05);\n      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n    }\n\n    .card-button:active {\n      transform: scale(0.95);\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;card&quot;&gt;\n    &lt;div class=&quot;card-image&quot;&gt;\ud83c\udfa8&lt;\/div&gt;\n    &lt;div class=&quot;card-content&quot;&gt;\n      &lt;h2 class=&quot;card-title&quot;&gt;CSS \u52a8\u753b&lt;\/h2&gt;\n      &lt;p class=&quot;card-description&quot;&gt;\n        \u60ac\u505c\u5728\u5361\u7247\u4e0a\u67e5\u770b\u6d6e\u52a8\u6548\u679c\u3002CSS \u52a8\u753b\u8ba9\u7f51\u9875\u66f4\u52a0\u751f\u52a8\u6709\u8da3\uff01\n      &lt;\/p&gt;\n      &lt;a href=&quot;#&quot; class=&quot;card-button&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/a&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>\u793a\u4f8b 4: \u6253\u5b57\u673a\u6548\u679c<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u6253\u5b57\u673a\u6548\u679c&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      margin: 0;\n      background: #1e1e1e;\n      font-family: 'Courier New', monospace;\n    }\n\n    .typewriter {\n      font-size: 32px;\n      color: #00ff00;\n      white-space: nowrap;\n      overflow: hidden;\n      border-right: 3px solid #00ff00;\n      animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;\n    }\n\n    @keyframes typing {\n      from {\n        width: 0;\n      }\n      to {\n        width: 100%;\n      }\n    }\n\n    @keyframes blink-caret {\n      from,\n      to {\n        border-color: transparent;\n      }\n      50% {\n        border-color: #00ff00;\n      }\n    }\n\n    .container {\n      text-align: center;\n    }\n\n    h1 {\n      color: white;\n      margin-bottom: 30px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;h1&gt;\u6253\u5b57\u673a\u6548\u679c&lt;\/h1&gt;\n    &lt;div class=&quot;typewriter&quot;&gt;Hello, World! This is a typewriter effect.&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>\u793a\u4f8b 5: \u6ce2\u6d6a\u52a8\u753b<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u6ce2\u6d6a\u52a8\u753b&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      margin: 0;\n      min-height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);\n      font-family: 'Arial', sans-serif;\n    }\n\n    .wave-container {\n      position: relative;\n      width: 200px;\n      height: 200px;\n    }\n\n    .wave {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 2px solid rgba(255, 255, 255, 0.5);\n      animation: wave 3s linear infinite;\n    }\n\n    .wave:nth-child(1) {\n      animation-delay: 0s;\n    }\n\n    .wave:nth-child(2) {\n      animation-delay: 0.5s;\n    }\n\n    .wave:nth-child(3) {\n      animation-delay: 1s;\n    }\n\n    .wave:nth-child(4) {\n      animation-delay: 1.5s;\n    }\n\n    .wave:nth-child(5) {\n      animation-delay: 2s;\n    }\n\n    @keyframes wave {\n      0% {\n        transform: scale(0.5);\n        opacity: 1;\n      }\n      100% {\n        transform: scale(2);\n        opacity: 0;\n      }\n    }\n\n    .center-icon {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 48px;\n      color: white;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;wave-container&quot;&gt;\n    &lt;div class=&quot;wave&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;wave&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;wave&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;wave&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;wave&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;center-icon&quot;&gt;\ud83c\udf0a&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>\u793a\u4f8b 6: 3D \u7ffb\u8f6c\u5361\u7247<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;3D \u7ffb\u8f6c\u5361\u7247&lt;\/title&gt;\n  &lt;style&gt;\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      min-height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n      font-family: 'Arial', sans-serif;\n      perspective: 1000px;\n    }\n\n    .flip-card {\n      width: 300px;\n      height: 400px;\n      position: relative;\n      transform-style: preserve-3d;\n      transition: transform 0.8s;\n      cursor: pointer;\n    }\n\n    .flip-card:hover {\n      animation: flip 1s ease-in-out forwards;\n    }\n\n    @keyframes flip {\n      0% {\n        transform: rotateY(0deg);\n      }\n      100% {\n        transform: rotateY(180deg);\n      }\n    }\n\n    .flip-card-front,\n    .flip-card-back {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      backface-visibility: hidden;\n      border-radius: 20px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n    }\n\n    .flip-card-front {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n    }\n\n    .flip-card-back {\n      background: white;\n      color: #333;\n      transform: rotateY(180deg);\n    }\n\n    .card-icon {\n      font-size: 80px;\n      margin-bottom: 20px;\n    }\n\n    .card-title {\n      font-size: 28px;\n      font-weight: bold;\n      margin-bottom: 10px;\n    }\n\n    .card-text {\n      font-size: 16px;\n      text-align: center;\n      padding: 20px;\n      line-height: 1.6;\n    }\n\n    .card-button {\n      margin-top: 20px;\n      padding: 12px 24px;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      border-radius: 25px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: transform 0.2s;\n    }\n\n    .card-button:hover {\n      transform: scale(1.05);\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;flip-card&quot;&gt;\n    &lt;div class=&quot;flip-card-front&quot;&gt;\n      &lt;div class=&quot;card-icon&quot;&gt;\ud83c\udfb4&lt;\/div&gt;\n      &lt;div class=&quot;card-title&quot;&gt;\u60ac\u505c\u7ffb\u8f6c&lt;\/div&gt;\n      &lt;div class=&quot;card-text&quot;&gt;\u628a\u9f20\u6807\u653e\u5728\u5361\u7247\u4e0a\u67e5\u770b\u80cc\u9762&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;flip-card-back&quot;&gt;\n      &lt;div class=&quot;card-icon&quot;&gt;\u2728&lt;\/div&gt;\n      &lt;div class=&quot;card-title&quot;&gt;3D \u7ffb\u8f6c\u6548\u679c&lt;\/div&gt;\n      &lt;div class=&quot;card-text&quot;&gt;\n        \u8fd9\u662f\u4e00\u4e2a\u4f7f\u7528 CSS 3D \u53d8\u6362\u548c\u52a8\u753b\u521b\u5efa\u7684\u7ffb\u8f6c\u5361\u7247\u6548\u679c\u3002\n      &lt;\/div&gt;\n      &lt;button class=&quot;card-button&quot;&gt;\u70b9\u51fb\u4e86\u89e3&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h2>\u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>1. \u6027\u80fd\u4f18\u5316<\/h3>\n<p><strong>\u6700\u4f73\u5b9e\u8df5<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u2705 \u63a8\u8350\uff1a\u4f7f\u7528 transform \u548c opacity *\/\n.element {\n  animation: move 2s ease-in-out;\n}\n\n@keyframes move {\n  to {\n    transform: translateX(100px);\n    opacity: 0.5;\n  }\n}\n\n\/* \u274c \u907f\u514d\uff1a\u4f7f\u7528 left\/top\/width\/height *\/\n.element {\n  animation: move 2s ease-in-out;\n}\n\n@keyframes move {\n  to {\n    left: 100px;  \/* \u89e6\u53d1\u91cd\u6392\uff0c\u6027\u80fd\u5dee *\/\n    width: 200px;\n  }\n}\n<\/code><\/pre>\n<p><strong>\u539f\u56e0<\/strong>: <code>transform<\/code> \u548c <code>opacity<\/code> \u53ef\u4ee5\u7531 GPU \u52a0\u901f\uff0c\u4e0d\u4f1a\u89e6\u53d1\u91cd\u6392\uff08reflow\uff09\u3002<\/p>\n<hr>\n<h3>2. will-change \u63d0\u793a\u6d4f\u89c8\u5668<\/h3>\n<pre><code class=\"language-css\">\/* \u63d0\u793a\u6d4f\u89c8\u5668\u8be5\u5143\u7d20\u5c06\u4f1a\u53d8\u5316\uff0c\u6d4f\u89c8\u5668\u53ef\u4ee5\u63d0\u524d\u4f18\u5316 *\/\n.element {\n  will-change: transform, opacity;\n}\n\n\/* \u52a8\u753b\u7ed3\u675f\u540e\u6e05\u9664 *\/\n.element.finished {\n  will-change: auto;\n}\n<\/code><\/pre>\n<p><strong>\u6ce8\u610f<\/strong>: \u4e0d\u8981\u6ee5\u7528 <code>will-change<\/code>\uff0c\u53ea\u5728\u9700\u8981\u65f6\u4f7f\u7528\u3002<\/p>\n<hr>\n<h3>3. \u51cf\u5c11\u91cd\u7ed8\u548c\u91cd\u6392<\/h3>\n<pre><code class=\"language-css\">\/* \u2705 \u597d\uff1a\u4f7f\u7528\u590d\u5408\u5c42 *\/\n.element {\n  transform: translateZ(0);  \/* \u521b\u5efa\u65b0\u7684\u590d\u5408\u5c42 *\/\n  animation: slide 2s ease-in-out;\n}\n\n\/* \u274c \u5dee\uff1a\u9891\u7e41\u89e6\u53d1\u91cd\u6392 *\/\n.element {\n  animation: changeSize 2s ease-in-out;\n}\n\n@keyframes changeSize {\n  to {\n    width: 200px;  \/* \u89e6\u53d1\u91cd\u6392 *\/\n    height: 200px;\n  }\n}\n<\/code><\/pre>\n<hr>\n<h3>4. \u52a8\u753b\u586b\u5145\u6a21\u5f0f<\/h3>\n<pre><code class=\"language-css\">\/* \u4fdd\u6301\u52a8\u753b\u7ed3\u675f\u540e\u7684\u72b6\u6001 *\/\n.element {\n  animation: fadeIn 1s ease-out forwards;\n}\n\n\/* \u907f\u514d\uff1a\u52a8\u753b\u7ed3\u675f\u540e\u5143\u7d20\u56de\u5230\u521d\u59cb\u72b6\u6001 *\/\n.element {\n  animation: fadeIn 1s ease-out;  \/* \u9ed8\u8ba4 fill-mode: none *\/\n}\n<\/code><\/pre>\n<hr>\n<h3>5. \u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n<pre><code class=\"language-css\">\/* \u5728\u5c0f\u5c4f\u5e55\u4e0a\u51cf\u5c11\u52a8\u753b\u6548\u679c *\/\n@media (max-width: 768px) {\n  .element {\n    animation: none;  \/* \u7981\u7528\u52a8\u753b *\/\n  }\n}\n\n\/* \u6216\u8005\u51cf\u5c11\u52a8\u753b\u65f6\u957f *\/\n@media (max-width: 768px) {\n  .element {\n    animation-duration: 0.5s;  \/* \u66f4\u5feb\u7684\u52a8\u753b *\/\n  }\n}\n<\/code><\/pre>\n<hr>\n<h3>6. \u53ef\u8bbf\u95ee\u6027<\/h3>\n<pre><code class=\"language-css\">\/* \u5c0a\u91cd\u7528\u6237\u7684\u52a8\u753b\u504f\u597d\u8bbe\u7f6e *\/\n@media (prefers-reduced-motion: reduce) {\n  .element {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/code><\/pre>\n<hr>\n<h2>\ud83c\udf93 \u5b9e\u6218\u5e94\u7528\u573a\u666f<\/h2>\n<h3>\u573a\u666f 1: \u52a0\u8f7d\u52a8\u753b<\/h3>\n<pre><code class=\"language-css\">.spinner {\n  width: 50px;\n  height: 50px;\n  border: 5px solid #f3f3f3;\n  border-top: 5px solid #3498db;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n<\/code><\/pre>\n<hr>\n<h3>\u573a\u666f 2: \u901a\u77e5\u63d0\u793a\u52a8\u753b<\/h3>\n<pre><code class=\"language-css\">.notification {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  padding: 15px 25px;\n  background: #4caf50;\n  color: white;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: slideIn 0.5s ease-out, fadeOut 0.5s ease-in 2.5s forwards;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  to {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n}\n<\/code><\/pre>\n<hr>\n<h3>\u573a\u666f 3: \u6309\u94ae\u70b9\u51fb\u6548\u679c<\/h3>\n<pre><code class=\"language-css\">.button {\n  padding: 10px 20px;\n  background: #3498db;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n}\n\n.button::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.5);\n  transform: translate(-50%, -50%);\n  transition: width 0.6s, height 0.6s;\n}\n\n.button:active::before {\n  width: 300px;\n  height: 300px;\n}\n<\/code><\/pre>\n<hr>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u57fa\u7840\u7ec3\u4e60<\/h3>\n<ol>\n<li><strong>\u6de1\u5165\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u6de1\u5165\u52a8\u753b\uff0c\u5143\u7d20\u4ece\u900f\u660e\u53d8\u4e3a\u4e0d\u900f\u660e<\/li>\n<li><strong>\u79fb\u52a8\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u5143\u7d20\u4ece\u5de6\u5230\u53f3\u79fb\u52a8\u7684\u52a8\u753b<\/li>\n<li><strong>\u65cb\u8f6c\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u5143\u7d20\u6301\u7eed\u65cb\u8f6c\u7684\u52a8\u753b<\/li>\n<li><strong>\u7f29\u653e\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u5143\u7d20\u4ece\u5c0f\u53d8\u5927\u7684\u52a8\u753b<\/li>\n<\/ol>\n<h3>\u8fdb\u9636\u7ec3\u4e60<\/h3>\n<ol start=\"5\">\n<li><strong>\u7ec4\u5408\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u540c\u65f6\u8fdb\u884c\u65cb\u8f6c\u3001\u7f29\u653e\u548c\u79fb\u52a8\u7684\u52a8\u753b<\/li>\n<li><strong>\u5173\u952e\u5e27\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u4f7f\u7528\u591a\u4e2a\u5173\u952e\u5e27\u7684\u590d\u6742\u52a8\u753b<\/li>\n<li><strong>\u4ea4\u66ff\u52a8\u753b<\/strong>: \u521b\u5efa\u4e00\u4e2a\u4f7f\u7528 <code>alternate<\/code> \u65b9\u5411\u7684\u5f80\u590d\u52a8\u753b<\/li>\n<li><strong>\u65e0\u9650\u5faa\u73af<\/strong>: \u521b\u5efa\u4e00\u4e2a\u65e0\u9650\u5faa\u73af\u7684\u52a0\u8f7d\u52a8\u753b<\/li>\n<\/ol>\n<h3>\u5b9e\u6218\u6311\u6218<\/h3>\n<ol start=\"9\">\n<li><strong>\u5bfc\u822a\u83dc\u5355<\/strong>: \u521b\u5efa\u4e00\u4e2a\u5e26\u6709\u52a8\u753b\u6548\u679c\u7684\u4e0b\u62c9\u83dc\u5355<\/li>\n<li><strong>\u5361\u7247\u7ffb\u8f6c<\/strong>: \u521b\u5efa\u4e00\u4e2a 3D \u7ffb\u8f6c\u5361\u7247\u6548\u679c<\/li>\n<li><strong>\u8fdb\u5ea6\u6761<\/strong>: \u521b\u5efa\u4e00\u4e2a\u5e26\u6709\u52a8\u753b\u6548\u679c\u7684\u8fdb\u5ea6\u6761<\/li>\n<li><strong>\u7c92\u5b50\u6548\u679c<\/strong>: \u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u7c92\u5b50\u7206\u70b8\u6548\u679c<\/li>\n<\/ol>\n<hr>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898 FAQ<\/h2>\n<h3>Q1: CSS \u52a8\u753b\u548c JavaScript \u52a8\u753b\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<ul>\n<li><strong>CSS \u52a8\u753b<\/strong>: \u58f0\u660e\u5f0f\u3001\u6027\u80fd\u597d\u3001\u6613\u4e8e\u5b9e\u73b0\u3001\u63a7\u5236\u8f83\u5c11<\/li>\n<li><strong>JavaScript \u52a8\u753b<\/strong>: \u547d\u4ee4\u5f0f\u3001\u66f4\u7075\u6d3b\u3001\u63a7\u5236\u529b\u5f3a\u3001\u53ef\u80fd\u6027\u80fd\u8f83\u5dee<\/li>\n<\/ul>\n<p><strong>\u9009\u62e9\u5efa\u8bae<\/strong>:<\/p>\n<ul>\n<li>\u7b80\u5355\u52a8\u753b \u2192 CSS \u52a8\u753b<\/li>\n<li>\u590d\u6742\u4ea4\u4e92 \u2192 JavaScript \u52a8\u753b<\/li>\n<li>\u6700\u4f73\u5b9e\u8df5 \u2192 \u7ed3\u5408\u4f7f\u7528\uff08CSS \u5904\u7406\u7b80\u5355\u52a8\u753b\uff0cJS \u5904\u7406\u590d\u6742\u903b\u8f91\uff09<\/li>\n<\/ul>\n<hr>\n<h3>Q2: \u5982\u4f55\u8c03\u8bd5 CSS \u52a8\u753b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<ol>\n<li>\u4f7f\u7528\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\uff08F12\uff09\u7684 &quot;Animations&quot; \u9762\u677f<\/li>\n<li>\u8c03\u6574\u52a8\u753b\u901f\u5ea6\uff1a<code>animation-duration: 10s<\/code>\uff08\u51cf\u6162\u901f\u5ea6\uff09<\/li>\n<li>\u4f7f\u7528 <code>animation-play-state: paused<\/code> \u6682\u505c\u52a8\u753b<\/li>\n<li>\u68c0\u67e5\u5173\u952e\u5e27\uff1a\u5728\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u67e5\u770b @keyframes \u89c4\u5219<\/li>\n<\/ol>\n<hr>\n<h3>Q3: \u52a8\u753b\u6027\u80fd\u4e0d\u597d\u600e\u4e48\u529e\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<ol>\n<li>\u4f7f\u7528 <code>transform<\/code> \u548c <code>opacity<\/code>\uff08GPU \u52a0\u901f\uff09<\/li>\n<li>\u907f\u514d\u4f7f\u7528 <code>left<\/code>\u3001<code>top<\/code>\u3001<code>width<\/code>\u3001<code>height<\/code><\/li>\n<li>\u4f7f\u7528 <code>will-change<\/code> \u63d0\u793a\u6d4f\u89c8\u5668<\/li>\n<li>\u51cf\u5c11\u52a8\u753b\u5143\u7d20\u6570\u91cf<\/li>\n<li>\u4f7f\u7528 <code>requestAnimationFrame<\/code>\uff08JavaScript\uff09<\/li>\n<\/ol>\n<hr>\n<h3>Q4: \u5982\u4f55\u8ba9\u52a8\u753b\u53ea\u5728\u7b2c\u4e00\u6b21\u52a0\u8f7d\u65f6\u64ad\u653e\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">.element {\n  animation: fadeIn 1s ease-out forwards;\n}\n\n\/* \u4f7f\u7528 JavaScript \u6dfb\u52a0\u7c7b\u540d *\/\n.element.animated {\n  animation: fadeIn 1s ease-out forwards;\n}\n<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ JavaScript\nelement.classList.add('animated');\n<\/code><\/pre>\n<hr>\n<h3>Q5: \u52a8\u753b\u7ed3\u675f\u540e\u5982\u4f55\u6267\u884c JavaScript \u4ee3\u7801\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">element.addEventListener('animationend', () =&gt; {\n  console.log('\u52a8\u753b\u7ed3\u675f');\n  \/\/ \u6267\u884c\u540e\u7eed\u64cd\u4f5c\n});\n<\/code><\/pre>\n<hr>\n<h3>Q6: \u5982\u4f55\u521b\u5efa\u590d\u6742\u7684\u591a\u9636\u6bb5\u52a8\u753b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">@keyframes complex {\n  0% {\n    transform: scale(1) rotate(0deg);\n    opacity: 0;\n  }\n  25% {\n    transform: scale(1.2) rotate(90deg);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1) rotate(180deg);\n    background: #ff0000;\n  }\n  75% {\n    transform: scale(1.2) rotate(270deg);\n    background: #00ff00;\n  }\n  100% {\n    transform: scale(1) rotate(360deg);\n    opacity: 0;\n  }\n}\n<\/code><\/pre>\n<hr>\n<h3>Q7: \u52a8\u753b\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u5361\u987f\u600e\u4e48\u529e\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<ol>\n<li>\u51cf\u5c11\u52a8\u753b\u590d\u6742\u5ea6<\/li>\n<li>\u4f7f\u7528 <code>transform<\/code> \u4ee3\u66ff\u5176\u4ed6\u5c5e\u6027<\/li>\n<li>\u51cf\u5c11\u540c\u65f6\u52a8\u753b\u7684\u5143\u7d20\u6570\u91cf<\/li>\n<li>\u5728\u5c0f\u5c4f\u5e55\u4e0a\u7981\u7528\u52a8\u753b<\/li>\n<li>\u4f7f\u7528 <code>will-change<\/code> \u521b\u5efa\u65b0\u7684\u590d\u5408\u5c42<\/li>\n<\/ol>\n<hr>\n<h2>\ud83d\udcda \u62d3\u5c55\u9605\u8bfb<\/h2>\n<ul>\n<li><strong>MDN \u6587\u6863<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/CSS_Animations\">CSS Animations<\/a><\/li>\n<li><strong>caniuse<\/strong>: \u67e5\u770b\u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/li>\n<li><strong>\u76f8\u5173\u4e3b\u9898<\/strong>: CSS Transitions\u3001CSS Transforms\u3001JavaScript Web Animations API<\/li>\n<\/ul>\n<hr>\n<h2>\ud83d\udcdd \u603b\u7ed3<\/h2>\n<p><strong>CSS \u52a8\u753b<\/strong> \u662f\u521b\u5efa\u7f51\u9875\u52a8\u6001\u6548\u679c\u7684\u91cd\u8981\u5de5\u5177\uff0c\u638c\u63e1\u540e\u53ef\u4ee5\u8ba9\u4f60\u7684\u7f51\u9875\u66f4\u52a0\u751f\u52a8\u6709\u8da3\u3002<\/p>\n<p><strong>\u5173\u952e\u8981\u70b9<\/strong>:<\/p>\n<ol>\n<li>\u4f7f\u7528 <code>@keyframes<\/code> \u5b9a\u4e49\u52a8\u753b\u5173\u952e\u5e27<\/li>\n<li>\u4f7f\u7528 <code>animation<\/code> \u5c5e\u6027\u5e94\u7528\u548c\u63a7\u5236\u52a8\u753b<\/li>\n<li>\u4f18\u5148\u4f7f\u7528 <code>transform<\/code> \u548c <code>opacity<\/code> \u4f18\u5316\u6027\u80fd<\/li>\n<li>\u8003\u8651\u53ef\u8bbf\u95ee\u6027\u548c\u7528\u6237\u4f53\u9a8c<\/li>\n<li>\u5408\u7406\u4f7f\u7528 <code>animation-fill-mode<\/code> \u4fdd\u6301\u52a8\u753b\u72b6\u6001<\/li>\n<\/ol>\n<p><strong>\u6700\u4f73\u5b9e\u8df5<\/strong>:<\/p>\n<ul>\n<li>\u2705 \u4f7f\u7528 GPU \u52a0\u901f\u5c5e\u6027\uff08transform\u3001opacity\uff09<\/li>\n<li>\u2705 \u4f7f\u7528 <code>will-change<\/code> \u63d0\u793a\u6d4f\u89c8\u5668<\/li>\n<li>\u2705 \u5c0a\u91cd\u7528\u6237\u7684\u52a8\u753b\u504f\u597d\u8bbe\u7f6e<\/li>\n<li>\u2705 \u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u7b80\u5316\u52a8\u753b<\/li>\n<li>\u274c \u907f\u514d\u4f7f\u7528\u89e6\u53d1\u91cd\u6392\u7684\u5c5e\u6027\uff08left\u3001top\u3001width\u3001height\uff09<\/li>\n<\/ul>\n<p><strong>\u4e0b\u4e00\u8bfe<\/strong>: Day 18 &#8211; \u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e0e\u5a92\u4f53\u67e5\u8be2<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 17: CSS \u52a8\u753b (CSS Animation) \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u7406\u89e3 CSS \u52a8\u753b\u7684\u57fa\u672c\u6982\u5ff5\u548c\u539f\u7406 &#8230; <a title=\"Day-17-CSS\u52a8\u753b\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=262\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-17-CSS\u52a8\u753b\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=262"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}