{"id":235,"date":"2026-08-28T15:52:53","date_gmt":"2026-08-28T07:52:53","guid":{"rendered":"https:\/\/yykcj.com\/?p=235"},"modified":"2026-08-28T15:52:53","modified_gmt":"2026-08-28T07:52:53","slug":"css-%e5%8a%a8%e7%94%bb%e8%bf%9b%e9%98%b6%ef%bc%9a%e4%bb%8e%e5%9f%ba%e7%a1%80%e5%88%b0%e9%ab%98%e6%80%a7%e8%83%bd%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%ae%9e%e6%88%98","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=235","title":{"rendered":"CSS \u52a8\u753b\u8fdb\u9636\uff1a\u4ece\u57fa\u7840\u5230\u9ad8\u6027\u80fd\u4ea4\u4e92\u8bbe\u8ba1\u5b9e\u6218"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

\u5728\u73b0\u4ee3 Web \u5f00\u53d1\u4e2d\uff0c\u52a8\u753b\u65e9\u5df2\u4e0d\u662f\u9526\u4e0a\u6dfb\u82b1\u7684\u70b9\u7f00\uff0c\u800c\u662f\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3001\u4f20\u8fbe\u54c1\u724c\u8c03\u6027\u7684\u6838\u5fc3\u624b\u6bb5\u3002\u7136\u800c\uff0c\u5f88\u591a\u5f00\u53d1\u8005\u5bf9 CSS \u52a8\u753b\u7684\u7406\u89e3\u4ecd\u505c\u7559\u5728 transition<\/code> \u548c @keyframes<\/code> \u7684\u57fa\u7840\u7528\u6cd5\u4e0a\uff0c\u9047\u5230\u590d\u6742\u4ea4\u4e92\u65f6\u5f80\u5f80\u9009\u62e9 JavaScript \u52a8\u753b\u5e93\uff0c\u5374\u5ffd\u7565\u4e86 CSS \u672c\u8eab\u8574\u542b\u7684\u5de8\u5927\u6f5c\u529b\u3002<\/p>\n

\u672c\u6587\u5c06\u5e26\u4f60\u7a81\u7834\u74f6\u9888\uff0c\u638c\u63e1 CSS \u52a8\u753b\u8fdb\u9636\u6280\u5de7\uff1a\u4ece\u52a8\u753b\u66f2\u7ebf\u5b9a\u5236\u5230\u786c\u4ef6\u52a0\u901f\uff0c\u4ece FLIP \u52a8\u753b\u5230\u6eda\u52a8\u9a71\u52a8\uff0c\u6bcf\u4e00\u6b65\u90fd\u6709\u4ee3\u7801\u793a\u4f8b\u548c\u8e29\u5751\u7ecf\u9a8c\u3002\u8bfb\u5b8c\u8fd9\u7bc7\u6587\u7ae0\uff0c\u4f60\u5c06\u80fd\u591f\u81ea\u4fe1\u5730\u6784\u5efa\u9ad8\u6027\u80fd\u7684\u52a8\u753b\u4ea4\u4e92\uff0c\u8ba9\u4f60\u7684\u9875\u9762\u5728\u7528\u6237\u6307\u5c16\u4e0b\u6d41\u7545\u8d77\u821e\u3002<\/p>\n

1. \u52a8\u753b\u66f2\u7ebf\u4e0e\u7f13\u52a8\u51fd\u6570\uff1a\u8ba9\u52a8\u753b\u6709\u7075\u9b42<\/h2>\n

CSS \u52a8\u753b\u7684\u9ed8\u8ba4\u7f13\u52a8 ease<\/code> \u867d\u7136\u81ea\u7136\uff0c\u4f46\u5343\u7bc7\u4e00\u5f8b\u3002\u5b9a\u5236\u8d1d\u585e\u5c14\u66f2\u7ebf\u53ef\u4ee5\u8ba9\u52a8\u753b\u66f4\u5177\u4e2a\u6027\uff0c\u540c\u65f6\u7b26\u5408\u7269\u7406\u76f4\u89c9\u3002<\/p>\n

1.1 \u7406\u89e3 cubic-bezier<\/h3>\n

cubic-bezier(x1, y1, x2, y2)<\/code> \u5b9a\u4e49\u4e86\u4e00\u6761\u4e09\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\uff0c\u63a7\u5236\u52a8\u753b\u901f\u5ea6\u968f\u65f6\u95f4\u7684\u53d8\u5316\u3002x<\/code> \u8f74\u4ee3\u8868\u65f6\u95f4\uff0cy<\/code> \u8f74\u4ee3\u8868\u8fdb\u5ea6\u3002\u9ed8\u8ba4 ease<\/code> \u5373 cubic-bezier(0.25, 0.1, 0.25, 1)<\/code>\u3002<\/p>\n

\u4e3a\u4e86\u6a21\u62df\u771f\u5b9e\u4e16\u754c\u7684\u8fd0\u52a8\uff0c\u6211\u4eec\u5e38\u7528\u4ee5\u4e0b\u66f2\u7ebf\uff1a<\/p>\n

    \n
  • ease-out<\/strong>\uff1a\u5feb\u901f\u5f00\u59cb\uff0c\u7f13\u6162\u7ed3\u675f\uff0c\u9002\u5408\u5143\u7d20\u79bb\u5f00\u5c4f\u5e55\u3002<\/li>\n
  • ease-in-out<\/strong>\uff1a\u7f13\u6162\u5f00\u59cb\u548c\u7ed3\u675f\uff0c\u9002\u5408\u5143\u7d20\u5728\u9875\u9762\u5185\u7684\u79fb\u52a8\u3002<\/li>\n
  • \u81ea\u5b9a\u4e49<\/strong>\uff1a\u4f8b\u5982 cubic-bezier(0.68, -0.55, 0.265, 1.55)<\/code> \u53ef\u4ee5\u4ea7\u751f\u56de\u5f39\u6548\u679c\u3002<\/li>\n<\/ul>\n

    1.2 \u5b9e\u6218\uff1a\u6309\u94ae\u7684\u5fae\u4ea4\u4e92<\/h3>\n

    \u60f3\u8c61\u4e00\u4e2a\u70b9\u8d5e\u6309\u94ae\uff0c\u70b9\u51fb\u540e\u5fc3\u5f62\u56fe\u6807\u5f39\u8df3\u4e00\u4e0b\u3002\u6211\u4eec\u53ef\u4ee5\u7528 cubic-bezier<\/code> \u5b9e\u73b0\u5f39\u8df3\u6548\u679c\uff1a<\/p>\n

    \n.heart {\n    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.heart.liked {\n    transform: scale(1.3);\n}\n<\/code><\/pre>\n
    \u5f53\u6dfb\u52a0 liked<\/code> \u7c7b\u65f6\uff0c\u5fc3\u5f62\u4f1a\u5148\u653e\u5927\u5230 1.3 \u500d\uff0c\u7136\u540e\u56de\u5f39\u5230\u6b63\u5e38\u5927\u5c0f\u3002\u6ce8\u610f\uff0c\u8fd9\u91cc\u7684 cubic-bezier<\/code> \u7684 y \u503c\u8d85\u51fa [0,1] \u533a\u95f4\uff0c\u5141\u8bb8\u52a8\u753b\u8d85\u51fa\u76ee\u6807\u503c\uff0c\u4ea7\u751f\u56de\u5f39\u6548\u679c\u3002<\/p>\n
    \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1a\u8d1f\u7684 y \u503c\u53ef\u80fd\u5bfc\u81f4\u52a8\u753b\u5728\u5f00\u59cb\u524d\u5411\u53cd\u65b9\u5411\u79fb\u52a8\uff0c\u786e\u4fdd\u4f60\u7684\u8bbe\u8ba1\u610f\u56fe\u7b26\u5408\u9884\u671f\u3002<\/p>\n
    2. \u786c\u4ef6\u52a0\u901f\u4e0e\u6027\u80fd\u4f18\u5316\uff1a\u6d41\u7545\u7684\u79d8\u5bc6<\/h2>\n
    \u52a8\u753b\u5361\u987f\u7684\u5143\u51f6\u5f80\u5f80\u662f\u91cd\u6392\uff08layout\uff09\u548c\u91cd\u7ed8\uff08paint\uff09\u3002\u4e3a\u4e86\u6d41\u7545\uff0c\u6211\u4eec\u5e94\u5c3d\u91cf\u4f7f\u7528 transform<\/code> \u548c opacity<\/code> \u5c5e\u6027\u8fdb\u884c\u52a8\u753b\uff0c\u56e0\u4e3a\u5b83\u4eec\u4e0d\u4f1a\u89e6\u53d1\u91cd\u6392\u3002<\/p>\n
    2.1 will-change \u7684\u5408\u7406\u4f7f\u7528<\/h3>\n
    will-change<\/code> \u5c5e\u6027\u53ef\u4ee5\u63d0\u524d\u544a\u77e5\u6d4f\u89c8\u5668\u54ea\u4e9b\u5143\u7d20\u4f1a\u53d8\u5316\uff0c\u4ece\u800c\u8fdb\u884c\u4f18\u5316\u3002\u4f46\u4e0d\u8981\u6ee5\u7528\uff0c\u5426\u5219\u4f1a\u5360\u7528\u5927\u91cf\u5185\u5b58\u3002<\/p>\n
    \n.animated-element {\n    will-change: transform;\n}\n<\/code><\/pre>\n
    \ud83d\udca1 \u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a\u53ea\u5728\u52a8\u753b\u5f00\u59cb\u65f6\u6dfb\u52a0\uff0c\u7ed3\u675f\u540e\u79fb\u9664\u3002\u53ef\u4ee5\u4f7f\u7528 JavaScript \u6216 animationend<\/code> \u4e8b\u4ef6\u3002<\/p>\n
    2.2 \u5f3a\u5236 GPU \u52a0\u901f<\/h3>\n
    \u6709\u65f6\u5373\u4f7f\u4f7f\u7528 transform<\/code>\uff0c\u52a8\u753b\u4f9d\u7136\u4e0d\u591f\u6d41\u7545\uff0c\u8fd9\u65f6\u53ef\u4ee5\u5f3a\u5236 GPU \u52a0\u901f\uff1a<\/p>\n
    \n.element {\n    transform: translateZ(0);\n    \/* \u6216\u8005 *\/\n    transform: translate3d(0,0,0);\n}\n<\/code><\/pre>\n
    \u4f46\u8fd9\u4f1a\u6d88\u8017\u66f4\u591a\u5185\u5b58\uff0c\u4ec5\u5728\u5fc5\u8981\u65f6\u4f7f\u7528\u3002<\/p>\n
    2.3 \u5b9e\u8df5\uff1a\u65e0\u9650\u5faa\u73af\u7684\u52a0\u8f7d\u52a8\u753b<\/h3>\n
    \u4e00\u4e2a\u5e38\u89c1\u7684\u52a0\u8f7d\u52a8\u753b\u662f\u65cb\u8f6c\u7684\u5706\u5f62\uff0c\u6211\u4eec\u4f7f\u7528 transform: rotate<\/code> \u5b9e\u73b0\uff1a<\/p>\n
    \n.loader {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    border: 4px solid #ccc;\n    border-top-color: #333;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n<\/code><\/pre>\n
    \u8fd9\u91cc border-top-color<\/code> \u7684\u53d8\u5316\u4f1a\u89e6\u53d1\u91cd\u7ed8\uff0c\u4f46\u6574\u4f53\u6027\u80fd\u5f71\u54cd\u4e0d\u5927\u3002\u82e5\u8981\u6781\u81f4\u4f18\u5316\uff0c\u53ef\u4ee5\u7528\u4f2a\u5143\u7d20\u7ed8\u5236\u5f27\u7ebf\u3002<\/p>\n
    3. FLIP \u6280\u672f\uff1a\u8ba9\u5e03\u5c40\u52a8\u753b\u4e0d\u518d\u5361\u987f<\/h2>\n
    FLIP\uff08First, Last, Invert, Play\uff09\u662f\u4e00\u79cd\u52a8\u753b\u6280\u672f\uff0c\u7528\u4e8e\u5728\u5e03\u5c40\u53d8\u5316\u65f6\u5e73\u6ed1\u8fc7\u6e21\u3002\u5b83\u901a\u8fc7\u6d4b\u91cf\u5143\u7d20\u9996\u5c3e\u4f4d\u7f6e\uff0c\u7136\u540e\u53cd\u8f6c\u53d8\u5316\uff0c\u6700\u540e\u64ad\u653e\u52a8\u753b\uff0c\u907f\u514d\u5f3a\u5236\u540c\u6b65\u5e03\u5c40\u3002<\/p>\n
    3.1 \u5b9e\u73b0\u601d\u8def<\/h3>\n
      \n
    1. First<\/strong>\uff1a\u8bb0\u5f55\u5143\u7d20\u7684\u521d\u59cb\u4f4d\u7f6e\uff08getBoundingClientRect()<\/code>\uff09\u3002<\/li>\n
    2. Last<\/strong>\uff1a\u6539\u53d8\u5143\u7d20\uff08\u5982\u6dfb\u52a0\u7c7b\uff09\uff0c\u8bb0\u5f55\u6700\u7ec8\u4f4d\u7f6e\u3002<\/li>\n
    3. Invert<\/strong>\uff1a\u8ba1\u7b97\u4f4d\u7f6e\u5dee\uff0c\u7528 transform<\/code> \u5c06\u5143\u7d20\u79fb\u56de\u521d\u59cb\u4f4d\u7f6e\u3002<\/li>\n
    4. Play<\/strong>\uff1a\u79fb\u9664 transform<\/code>\uff0c\u8ba9\u5143\u7d20\u5e73\u6ed1\u8fc7\u6e21\u5230\u6700\u7ec8\u4f4d\u7f6e\u3002<\/li>\n<\/ol>\n
      3.2 \u5b9e\u6218\uff1a\u5217\u8868\u6392\u5e8f\u52a8\u753b<\/h3>\n
      \u5047\u8bbe\u6709\u4e00\u4e2a\u5361\u7247\u5217\u8868\uff0c\u70b9\u51fb\u6309\u94ae\u540e\u5361\u7247\u987a\u5e8f\u968f\u673a\u6253\u4e71\u3002\u6211\u4eec\u5e0c\u671b\u5361\u7247\u5e73\u6ed1\u79fb\u52a8\u5230\u65b0\u4f4d\u7f6e\u3002<\/p>\n
      \n<div class="container">\n    <div class="card">A<\/div>\n    <div class="card">B<\/div>\n    <div class="card">C<\/div>\n<\/div>\n<button id="shuffle">Shuffle<\/button>\n<\/code><\/pre>\n
      \n.card {\n    transition: transform 0.5s ease;\n}\n<\/code><\/pre>\n
      \nconst container = document.querySelector('.container');\nconst shuffleBtn = document.getElementById('shuffle');\n\nshuffleBtn.addEventListener('click', () => {\n    \/\/ First: \u8bb0\u5f55\u521d\u59cb\u4f4d\u7f6e\n    const cards = [...container.children];\n    const firstRects = cards.map(card => card.getBoundingClientRect());\n\n    \/\/ Last: \u6253\u4e71\u987a\u5e8f\n    while (cards.length) {\n        const randomIndex = Math.floor(Math.random() * cards.length);\n        container.appendChild(cards.splice(randomIndex, 1)[0]);\n    }\n\n    \/\/ Invert: \u8ba1\u7b97\u4f4d\u79fb\u5e76\u8bbe\u7f6e transform\n    cards.forEach((card, i) => {\n        const lastRect = card.getBoundingClientRect();\n        const dx = firstRects[i].left - lastRect.left;\n        const dy = firstRects[i].top - lastRect.top;\n        card.style.transform = `translate(${dx}px, ${dy}px)`;\n    });\n\n    \/\/ Play: \u5f3a\u5236\u56de\u6d41\u540e\u79fb\u9664 transform\n    requestAnimationFrame(() => {\n        cards.forEach(card => {\n            card.style.transform = '';\n        });\n    });\n});\n<\/code><\/pre>\n
      \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1a\u5fc5\u987b\u7528 requestAnimationFrame<\/code> \u786e\u4fdd\u6d4f\u89c8\u5668\u5148\u7ed8\u5236\u521d\u59cb\u4f4d\u7f6e\u3002<\/p>\n
      4. \u6eda\u52a8\u9a71\u52a8\u52a8\u753b\uff1a\u8ba9\u9875\u9762\u52a8\u8d77\u6765<\/h2>\n
      \u4f20\u7edf\u6eda\u52a8\u52a8\u753b\u4f9d\u8d56 JavaScript \u76d1\u542c scroll<\/code> \u4e8b\u4ef6\uff0c\u6027\u80fd\u5dee\u4e14\u4e0d\u6d41\u7545\u3002\u73b0\u5728\uff0cCSS \u63d0\u4f9b\u4e86 animation-timeline<\/code> \u5c5e\u6027\uff0c\u53ef\u4ee5\u7eaf CSS \u5b9e\u73b0\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\uff08Chrome \u652f\u6301\uff09\u3002<\/p>\n
      4.1 \u57fa\u672c\u7528\u6cd5<\/h3>\n
      \n@keyframes reveal {\n    from { opacity: 0; transform: translateY(50px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.reveal {\n    animation: reveal 1s ease both;\n    animation-timeline: view();\n}\n<\/code><\/pre>\n
      \u8fd9\u91cc view()<\/code> \u8868\u793a\u52a8\u753b\u8fdb\u5ea6\u4e0e\u5143\u7d20\u5728\u89c6\u53e3\u4e2d\u7684\u53ef\u89c1\u6027\u76f8\u5173\u3002\u5143\u7d20\u8fdb\u5165\u89c6\u53e3\u65f6\u5f00\u59cb\u52a8\u753b\uff0c\u79bb\u5f00\u65f6\u7ed3\u675f\u3002<\/p>\n
      4.2 \u5b9e\u6218\uff1a\u6eda\u52a8\u8fdb\u5ea6\u6761<\/h3>\n
      \u4e00\u4e2a\u56fa\u5b9a\u5728\u9876\u90e8\u7684\u8fdb\u5ea6\u6761\uff0c\u663e\u793a\u9875\u9762\u6eda\u52a8\u8fdb\u5ea6\uff1a<\/p>\n
      \n.progress-bar {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 4px;\n    background: #4caf50;\n    width: 100%;\n    transform-origin: 0 50%;\n    animation: progress 1s linear;\n    animation-timeline: scroll();\n}\n\n@keyframes progress {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n}\n<\/code><\/pre>\n
      scroll()<\/code> \u8868\u793a\u52a8\u753b\u8fdb\u5ea6\u4e0e\u6eda\u52a8\u5bb9\u5668\u7684\u6eda\u52a8\u504f\u79fb\u76f8\u5173\uff0c\u9ed8\u8ba4\u662f\u6700\u8fd1\u7684\u6eda\u52a8\u7956\u5148\u3002<\/p>\n
      \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1aanimation-timeline<\/code> \u76ee\u524d\u4ec5 Chrome \u652f\u6301\uff0c\u751f\u4ea7\u73af\u5883\u9700\u8003\u8651\u964d\u7ea7\u65b9\u6848\u3002<\/p>\n
      5. \u7efc\u5408\u5b9e\u6218\uff1a\u4e00\u4e2a\u5b8c\u6574\u7684\u5361\u7247\u4ea4\u4e92<\/h2>\n
      \u8ba9\u6211\u4eec\u7ed3\u5408\u4ee5\u4e0a\u6280\u672f\uff0c\u505a\u4e00\u4e2a\u5361\u7247\u7ffb\u8f6c\u5c55\u793a\u7684\u4ea4\u4e92\u3002\u5361\u7247\u6b63\u9762\u662f\u6807\u9898\uff0c\u80cc\u9762\u662f\u8be6\u60c5\uff0c\u60ac\u505c\u6216\u70b9\u51fb\u65f6\u7ffb\u8f6c\u3002<\/p>\n
      HTML \u7ed3\u6784<\/h3>\n
      \n<div class="card">\n    <div class="card-inner">\n        <div class="card-face card-front">\n            <h2>\u524d\u7aef\u8fdb\u9636<\/h2>\n        <\/div>\n        <div class="card-face card-back">\n            <p>\u638c\u63e1 CSS \u52a8\u753b\u9ad8\u7ea7\u6280\u5de7\uff0c\u6253\u9020\u9ad8\u6027\u80fd\u4ea4\u4e92\u3002<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<\/code><\/pre>\n
      CSS \u6837\u5f0f<\/h3>\n
      \n.card {\n    width: 300px;\n    height: 200px;\n    perspective: 1000px;\n    cursor: pointer;\n}\n\n.card-inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition: transform 0.6s;\n    transform-style: preserve-3d;\n}\n\n.card:hover .card-inner {\n    transform: rotateY(180deg);\n}\n\n.card-face {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n}\n\n.card-front {\n    background: linear-gradient(135deg, #667eea, #764ba2);\n    color: white;\n}\n\n.card-back {\n    background: #f8f9fa;\n    transform: rotateY(180deg);\n}\n<\/code><\/pre>\n
      \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1abackface-visibility: hidden<\/code> \u53ef\u4ee5\u9632\u6b62\u80cc\u9762\u5185\u5bb9\u5728\u7ffb\u8f6c\u65f6\u955c\u50cf\u663e\u793a\u3002<\/p>\n
      \u6027\u80fd\u4f18\u5316<\/h3>\n
      \u8fd9\u91cc\u6211\u4eec\u4f7f\u7528\u4e86 transform: rotateY<\/code> \u548c transition<\/code>\uff0c\u6ca1\u6709\u89e6\u53d1\u5e03\u5c40\uff0c\u6027\u80fd\u826f\u597d\u3002\u4f46\u82e5\u5361\u7247\u5f88\u591a\uff0c\u5efa\u8bae\u6dfb\u52a0 will-change: transform<\/code>\u3002<\/p>\n
      6. \u5e38\u89c1\u5751\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n