{"id":4984,"date":"2024-08-01T22:48:06","date_gmt":"2024-08-01T14:48:06","guid":{"rendered":"https:\/\/xinchewhd.com.cn\/?p=4984"},"modified":"2024-08-01T22:48:06","modified_gmt":"2024-08-01T14:48:06","slug":"%e4%b8%80%e6%96%87%e5%b8%a6%e4%bd%a0css-%e5%8a%a8%e7%94%bb%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e9%ab%98%e6%89%8b","status":"publish","type":"post","link":"https:\/\/xinchewhd.com.cn\/index.php\/uncategorized\/%e4%b8%80%e6%96%87%e5%b8%a6%e4%bd%a0css-%e5%8a%a8%e7%94%bb%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e9%ab%98%e6%89%8b\/","title":{"rendered":"\u4e00\u6587\u5e26\u4f60CSS \u52a8\u753b\u4ece\u5165\u95e8\u5230\u9ad8\u624b"},"content":{"rendered":"
\n
\n

\u672c\u6587\u5c06\u6bd4\u8f83\u5168\u9762\u7ec6\u81f4\u7684\u68b3\u7406\u4e00\u4e0b CSS \u52a8\u753b\u7684\u65b9\u65b9\u9762\u9762\uff0c\u9488\u5bf9\u6bcf\u4e2a\u5c5e\u6027\u7528\u6cd5\u7684\u8bb2\u89e3\u53ca\u8fdb\u9636\u7528\u6cd5\u7684\u793a\u610f\uff0c\u5e0c\u671b\u80fd\u6210\u4e3a\u4e00\u4e2a\u6bd4\u8f83\u597d\u7684\u4ece\u5165\u95e8\u5230\u8fdb\u9636\u7684\u6559\u7a0b\u3002<\/p>\n

CSS \u52a8\u753b\u4ecb\u7ecd\u53ca\u8bed\u6cd5<\/h2>\n

\u9996\u5148\uff0c\u6211\u4eec\u6765\u7b80\u5355\u4ecb\u7ecd\u4e00\u4e0b CSS \u52a8\u753b\u3002<\/p>\n

\u6700\u65b0\u7248\u672c\u7684 CSS \u52a8\u753b\u7531\u89c4\u8303 --CSS Animations Level 1<\/span>[1]<\/sup>\u5b9a\u4e49\u3002<\/p>\n

CSS \u52a8\u753b\u7528\u4e8e\u5b9e\u73b0\u5143\u7d20\u4ece\u4e00\u4e2a CSS \u6837\u5f0f\u914d\u7f6e\u8f6c\u6362\u5230\u53e6\u4e00\u4e2a CSS \u6837\u5f0f\u914d\u7f6e\u3002<\/p>\n

\u52a8\u753b\u5305\u62ec\u4e24\u4e2a\u90e8\u5206: \u63cf\u8ff0\u52a8\u753b\u7684\u6837\u5f0f\u89c4\u5219\u548c\u7528\u4e8e\u6307\u5b9a\u52a8\u753b\u5f00\u59cb\u3001\u7ed3\u675f\u4ee5\u53ca\u4e2d\u95f4\u70b9\u6837\u5f0f\u7684\u5173\u952e\u5e27\u3002<\/p>\n

\u7b80\u5355\u6765\u8bf4\uff0c\u770b\u4e0b\u9762\u7684\u4f8b\u5b50\uff1a<\/p>\n

<\/span>div<\/span>{animation<\/span>:change3s<\/span>;}@keyframes<\/span>change{0%{color<\/span>:#f00<\/span>;}100%{color<\/span>:#000<\/span>;}}<\/code><\/pre>\n
    \n
  1. \n
    animation: move 1s<\/code>\u90e8\u5206\u5c31\u662f\u52a8\u753b\u7684\u7b2c\u4e00\u90e8\u5206\uff0c\u7528\u4e8e\u63cf\u8ff0\u52a8\u753b\u7684\u5404\u4e2a\u89c4\u5219;<\/section>\n<\/li>\n
  2. \n
    @keyframes move {}<\/code>\u90e8\u5206\u5c31\u662f\u52a8\u753b\u7684\u7b2c\u4e8c\u90e8\u5206\uff0c\u7528\u4e8e\u6307\u5b9a\u52a8\u753b\u5f00\u59cb\u3001\u7ed3\u675f\u4ee5\u53ca\u4e2d\u95f4\u70b9\u6837\u5f0f\u7684\u5173\u952e\u5e27;<\/section>\n<\/li>\n<\/ol>\n
    \u4e00\u4e2a CSS \u52a8\u753b\u4e00\u5b9a\u8981\u7531\u4e0a\u8ff0\u4e24\u90e8\u5206\u7ec4\u6210\u3002<\/p>\n
    CSS \u52a8\u753b\u7684\u8bed\u6cd5<\/h3>\n
    \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u7b80\u5355\u770b\u770b CSS \u52a8\u753b\u7684\u8bed\u6cd5\u3002<\/p>\n
    \u521b\u5efa\u52a8\u753b\u5e8f\u5217\uff0c\u9700\u8981\u4f7f\u7528 animation \u5c5e\u6027\u6216\u5176\u5b50\u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u5141\u8bb8\u914d\u7f6e\u52a8\u753b\u65f6\u95f4\u3001\u65f6\u957f\u4ee5\u53ca\u5176\u4ed6\u52a8\u753b\u7ec6\u8282\uff0c\u4f46\u8be5\u5c5e\u6027\u4e0d\u80fd\u914d\u7f6e\u52a8\u753b\u7684\u5b9e\u9645\u8868\u73b0\uff0c\u52a8\u753b\u7684\u5b9e\u9645\u8868\u73b0\u662f\u7531 @keyframes \u89c4\u5219\u5b9e\u73b0\u3002<\/p>\n
    animation \u7684\u5b50\u5c5e\u6027\u6709\uff1a<\/p>\n
      \n
    • \n
      animation-name\uff1a\u6307\u5b9a\u7531 @keyframes \u63cf\u8ff0\u7684\u5173\u952e\u5e27\u540d\u79f0\u3002<\/section>\n<\/li>\n
    • \n
      animation-duration\uff1a\u8bbe\u7f6e\u52a8\u753b\u4e00\u4e2a\u5468\u671f\u7684\u65f6\u957f\u3002<\/section>\n<\/li>\n
    • \n
      animation-delay\uff1a\u8bbe\u7f6e\u5ef6\u65f6\uff0c\u5373\u4ece\u5143\u7d20\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\u5230\u52a8\u753b\u5e8f\u5217\u5f00\u59cb\u6267\u884c\u7684\u8fd9\u6bb5\u65f6\u95f4\u3002<\/section>\n<\/li>\n
    • \n
      animation-direction\uff1a\u8bbe\u7f6e\u52a8\u753b\u5728\u6bcf\u6b21\u8fd0\u884c\u5b8c\u540e\u662f\u53cd\u5411\u8fd0\u884c\u8fd8\u662f\u91cd\u65b0\u56de\u5230\u5f00\u59cb\u4f4d\u7f6e\u91cd\u590d\u8fd0\u884c\u3002<\/section>\n<\/li>\n
    • \n
      animation-iteration-count\uff1a\u8bbe\u7f6e\u52a8\u753b\u91cd\u590d\u6b21\u6570\uff0c \u53ef\u4ee5\u6307\u5b9a infinite \u65e0\u9650\u6b21\u91cd\u590d\u52a8\u753b<\/section>\n<\/li>\n
    • \n
      animation-play-state\uff1a\u5141\u8bb8\u6682\u505c\u548c\u6062\u590d\u52a8\u753b\u3002<\/section>\n<\/li>\n
    • \n
      animation-timing-function\uff1a\u8bbe\u7f6e\u52a8\u753b\u901f\u5ea6\uff0c \u5373\u901a\u8fc7\u5efa\u7acb\u52a0\u901f\u5ea6\u66f2\u7ebf\uff0c\u8bbe\u7f6e\u52a8\u753b\u5728\u5173\u952e\u5e27\u4e4b\u95f4\u662f\u5982\u4f55\u53d8\u5316\u3002<\/section>\n<\/li>\n
    • \n
      animation-fill-mode\uff1a\u6307\u5b9a\u52a8\u753b\u6267\u884c\u524d\u540e\u5982\u4f55\u4e3a\u76ee\u6807\u5143\u7d20\u5e94\u7528\u6837\u5f0f<\/section>\n<\/li>\n
    • \n
      @keyframes \u89c4\u5219\uff0c\u5f53\u7136\uff0c\u4e00\u4e2a\u52a8\u753b\u60f3\u8981\u8fd0\u884c\uff0c\u8fd8\u5e94\u8be5\u5305\u62ec @keyframes \u89c4\u5219\uff0c\u5728\u5185\u90e8\u8bbe\u5b9a\u52a8\u753b\u5173\u952e\u5e27<\/section>\n<\/li>\n<\/ul>\n
      \u5176\u4e2d\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u52a8\u753b\uff1a<\/p>\n
        \n
      • \n
        \u5fc5\u987b\u9879<\/strong>\uff1aanimation-name<\/code>\u3001animation-duration<\/code>\u548c@keyframes<\/code>\u89c4\u5219<\/section>\n<\/li>\n
      • \n
        \u975e\u5fc5\u987b\u9879<\/strong>\uff1aanimation-delay<\/code>\u3001animation-direction<\/code>\u3001animation-iteration-count<\/code>\u3001animation-play-state<\/code>\u3001animation-timing-function<\/code>\u3001animation-fill-mode<\/code>\uff0c\u5f53\u7136\u4e0d\u662f\u8bf4\u5b83\u4eec\u4e0d\u91cd\u8981\uff0c\u53ea\u662f\u4e0d\u8bbe\u7f6e\u65f6\uff0c\u5b83\u4eec\u90fd\u6709\u9ed8\u8ba4\u503c<\/section>\n<\/li>\n<\/ul>\n
        \u4e0a\u9762\u5df2\u7ecf\u7ed9\u4e86\u4e00\u4e2a\u7b80\u5355\u7684 DEMO\uff0c \u5c31\u7528\u4e0a\u8ff0\u7684 DEMO\uff0c\u770b\u770b\u7ed3\u679c\uff1a<\/p>\n