{"id":6096,"date":"2024-04-14T19:32:13","date_gmt":"2024-04-14T11:32:13","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6096"},"modified":"2024-04-14T19:32:13","modified_gmt":"2024-04-14T11:32:13","slug":"generate-an-animated-effect-with-rotation-when-hovering-mouseover","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh_cn\/generate-an-animated-effect-with-rotation-when-hovering-mouseover\/","title":{"rendered":"\u60ac\u505c\uff08\u9f20\u6807\u60ac\u505c\uff09\u65f6\u751f\u6210\u65cb\u8f6c\u7684\u52a8\u753b\u6548\u679c"},"content":{"rendered":"
\n

\u6839\u636e\u5149\u6807\u7684\u4f4d\u7f6e\u5efa\u7acb\u65cb\u8f6c\u673a\u5236\u3002\u00a0<\/p>\n

\u5728\u672c\u6559\u7a0b\u4e2d\uff1a\u00a0<\/strong><\/p>\n

    \n
  1. \u6811\u7acb\u6b63\u786e\u7684\u89c2\u70b9<\/li>\n
  2. \u521b\u5efa\u89e6\u53d1\u5143\u7d20<\/li>\n
  3. \u4e3a\u65cb\u8f6c\u8fd0\u52a8\u5236\u4f5c\u52a8\u753b<\/li>\n
  4. \u8bbe\u7f6e\u9ed8\u8ba4\u72b6\u6001<\/li>\n
  5. \u6dfb\u52a0\u7279\u6b8a\u6548\u679c\u4ee5\u8fdb\u884c\u5f3a\u8c03<\/li>\n<\/ol>\n

    \u6811\u7acb\u6b63\u786e\u7684\u89c2\u70b9<\/h2>\n
      \n
    1. \u786e\u4fdd\u52a8\u753b\u7684\u76ee\u6807\u5143\u7d20\u7684\u7956\u5148\u5143\u7d20\u88ab\u9009\u4e2d<\/li>\n
    2. \u5728 \u6837\u5f0f\u9762\u677f<\/strong> \u5728\u4e0b\u9762 \u8fc7\u6e21\u548c\u53d8\u6362<\/strong>\uff0c\u4fee\u6539 \u513f\u7ae5\u89c6\u89d2<\/strong> \u81f3 1000 \u50cf\u7d20<\/li>\n<\/ol>\n

      \u521b\u5efa\u89e6\u53d1\u5143\u7d20<\/h2>\n
        \n
      1. \u9009\u62e9\u8981\u7528\u4f5c\u89e6\u53d1\u5668\u7684\u7279\u5b9a\u5143\u7d20\uff08\u5982\u5361\u7247\uff09<\/li>\n
      2. \u5728\u91cc\u9762 \u4ea4\u4e92\u9762\u677f<\/strong>\uff0c\u70b9\u51fb \u9009\u5b9a\u5143\u7d20<\/strong> \u5e76\u9009\u62e9 \u9f20\u6807\u5728\u5143\u7d20\u4e0a\u79fb\u52a8<\/strong> \u4ece\u4e0b\u62c9\u83dc\u5355\u4e2d<\/li>\n<\/ol>\n

        \u4e3a\u65cb\u8f6c\u8fd0\u52a8\u5236\u4f5c\u52a8\u753b<\/h2>\n
          \n
        1. \u8bbf\u95ee \u4ea4\u4e92\u9762\u677f<\/strong> > \u9f20\u6807\u79fb\u52a8\u65f6<\/strong> > \u884c\u52a8<\/strong> > \u542f\u52a8\u9f20\u6807\u52a8\u753b<\/strong><\/li>\n
        2. \u70b9\u51fb\u65c1\u8fb9\u7684\u52a0\u53f7 \u9f20\u6807\u52a8\u753b<\/strong><\/li>\n
        3. \u547d\u540d\uff08\u4f8b\u5982\uff0c\u60ac\u505c\u65cb\u8f6c\uff09<\/li>\n
        4. \u70b9\u51fb\u65f6\u95f4\u7ebf\u4e0b\u65b9\u7684\u52a0\u53f7 \u9f20\u6807X\u64cd\u4f5c<\/strong> \u5728 0% \u5e76\u9009\u62e9 \u65cb\u8f6c<\/strong><\/li>\n
        5. \u5728\u91cc\u9762 \u65cb\u8f6c<\/strong> \u90e8\u5206\uff0c\u5c06 y \u8f74\u8c03\u6574\u4e3a -5 \u5ea6<\/li>\n
        6. \u9009\u62e9 \u5361\u7247\u5143\u7d20<\/strong> \u5728 100% \u548c \u65cb\u8f6c<\/strong> \u573a\uff0c\u5c06\u5176 y \u8f74\u6539\u4e3a 5 \u5ea6<\/li>\n
        7. \u6dfb\u52a0 \u65cb\u8f6c<\/strong> \u91c7\u53d6\u7684\u884c\u52a8 \u9f20\u6807 Y \u52a8\u4f5c<\/strong><\/li>\n
        8. 0% \u4e8e \u65cb\u8f6c<\/strong>\uff0c\u5c06 x \u8f74\u8bbe\u7f6e\u4e3a 5 \u5ea6<\/li>\n
        9. \u5728 100% \u65cb\u8f6c<\/strong>\uff0c\u5c06 x \u8f74\u8bbe\u7f6e\u4e3a -5 \u5ea6<\/li>\n
        10. \u5b8c\u6210\u52a8\u753b\u8c03\u6574\u4ee5\u5b8c\u5584 \u5e73\u6ed1<\/strong><\/li>\n<\/ol>\n

          \u8bbe\u7f6e\u9ed8\u8ba4\u72b6\u6001<\/h2>\n
            \n
          1. \u5728\u91cc\u9762 \u4ea4\u4e92\u9762\u677f<\/strong> \u5728\u4e0b\u9762 \u9f20\u6807\u79fb\u52a8\u65f6<\/strong>\uff0c\u5b9a\u4e49\u9f20\u6807X\u4f4d\u7f6e\u4e3a50%<\/li>\n
          2. \u5c06\u9f20\u6807 Y \u4f4d\u7f6e\u8bbe\u7f6e\u4e3a 50%<\/li>\n<\/ol>\n

            \u6dfb\u52a0\u7279\u6b8a\u6548\u679c\u4ee5\u8fdb\u884c\u5f3a\u8c03<\/h2>\n
              \n
            1. \u653e\u7f6e\u65b0\u7684 \u5206\u533a\u5757<\/strong> \u5230\u753b\u5e03\u4e0a\u76f8\u5e94\u7684\u5143\u7d20\uff08\u5361\u7247\uff09<\/li>\n
            2. \u521b\u5efa\u4e00\u4e2a \u73ed\u7ea7<\/strong> \u5e76\u6307\u5b9a\u4e00\u4e2a\u540d\u79f0\uff08\u4f8b\u5982 Card-highlight\uff09<\/li>\n
            3. \u8bbe\u7f6e\u5176\u5c3a\u5bf8\uff08\u4f8b\u5982 400 \u50cf\u7d20\uff09\u5e76\u5c06\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u7edd\u5bf9<\/li>\n
            4. \u4ece\u5de6\u4e0a\u89d2\u5f00\u59cb\u5b9a\u4f4d<\/li>\n
            5. \u9009\u62e9\u5408\u9002\u7684 \u80cc\u666f\u989c\u8272<\/strong> \uff08\u4f8b\u5982\u767d\u8272\uff09<\/li>\n
            6. \u4fee\u6539 \u534a\u5f84<\/strong> \u5728\u4e0b\u9762 \u8fb9\u754c<\/strong> \u81f3 50%<\/li>\n
            7. \u8c03\u6574 \u4e0d\u900f\u660e\u5ea6<\/strong> \u81f3 10% \u4e0b \u6548\u679c<\/strong><\/li>\n
            8. \u5e94\u7528 \u6a21\u7cca<\/strong> \u8fc7\u6ee4\u5e76\u6539\u53d8 \u534a\u5f84<\/strong> \u81f3 50 \u50cf\u7d20<\/li>\n
            9. \u5728\u91cc\u9762 \u4ea4\u4e92\u9762\u677f<\/strong>\uff0c \u6311\u9009 \u60ac\u505c\u65cb\u8f6c<\/strong><\/li>\n
            10. \u5728\u91cc\u9762 \u5c0f\u9f20X\u65f6\u95f4\u7ebf<\/strong> \u5728 0%\uff0c\u5305\u62ec\u4e00\u4e2a \u79fb\u52a8<\/strong> \u52a8\u753b\u5e76\u5c06\u5176 x \u8f74\u8bbe\u7f6e\u4e3a 100%<\/li>\n
            11. \u5728\u91cc\u9762 \u5c0f\u9f20X\u65f6\u95f4\u7ebf<\/strong> \u5728 100%\uff0c\u7eb3\u5165\u4e00\u4e2a \u79fb\u52a8<\/strong> x \u8f74\u8bbe\u7f6e\u4e3a -50% \u7684\u52a8\u753b<\/li>\n
            12. \u4e3a\u4e86 \u9f20\u6807 Y \u65f6\u95f4\u7ebf<\/strong> \u5728 0%\uff0c\u6574\u5408\u4e00\u4e2a \u79fb\u52a8<\/strong> \u52a8\u753b\u5e76\u5c06\u5176 y \u8f74\u8c03\u6574\u4e3a 50%<\/li>\n
            13. \u5728100% \u9f20\u6807 Y \u65f6\u95f4\u7ebf<\/strong>\uff0c\u5e94\u7528 \u79fb\u52a8<\/strong> \u52a8\u753b\u5e76\u5c06\u5176 y \u8f74\u4fee\u6539\u4e3a -50%<\/li>\n<\/ol>\n

              <\/p>\n

              \u5728\u9884\u89c8\u6a21\u5f0f\u4e0b\u67e5\u770b\u60a8\u7684\u8fdb\u5ea6\u3002<\/p>\n

              <\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"\u6839\u636e\u9f20\u6807\u60ac\u505c\u5728\u5143\u7d20\u4e0a\u7684\u4f4d\u7f6e\uff0c\u4e3a\u65cb\u8f6c\u5361\u7247\u79fb\u52a8\u5236\u4f5c\u52a8\u753b\u3002","protected":false},"author":2,"featured_media":6097,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-6096","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/posts\/6096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/comments?post=6096"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/posts\/6096\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/media\/6097"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/media?parent=6096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/categories?post=6096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh_cn\/wp-json\/wp\/v2\/tags?post=6096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}