{"id":201,"date":"2026-08-27T22:42:08","date_gmt":"2026-08-27T14:42:08","guid":{"rendered":"https:\/\/supersrui.top\/?page_id=201"},"modified":"2026-08-28T20:57:08","modified_gmt":"2026-08-28T12:57:08","slug":"201-2","status":"publish","type":"page","link":"https:\/\/supersrui.top\/index.php\/201-2\/","title":{"rendered":""},"content":{"rendered":"\n<!-- =========================================================\n     Sakurairo \u00b7 \u6781\u7b80\u6027\u80fd\u4f18\u5316\u8f6e\u76d8\u53cb\u94fe\n\n     \u672c\u7248\u672c\u4fee\u6539\uff1a\n     \u2460 \u7126\u70b9\u5361\u7247\u6574\u4f53\u5411\u4e0a\u79fb\u52a8\n     \u2461 \u5361\u7247\u6587\u5b57\u7f29\u5c0f\n     \u2462 \u4fdd\u7559\u7ec4\u4ef6\u5185\u90e8\u89e6\u6478\u6ed1\u52a8\u65f6\u7981\u6b62\u9875\u9762\u6eda\u52a8\n\n     \u5176\u4ed6\u903b\u8f91\u5168\u90e8\u4fdd\u6301\u539f\u6837\uff1a\n     - \u4e0a\u4e0b\u6ed1\u4e00\u6b21\u53ea\u5207\u6362\u4e00\u4e2a\u5361\u7247\n     - \u65e0\u9650\u5faa\u73af\n     - \u975e\u7126\u70b9\u5361\u7247\u4e0d\u663e\u793a\u80cc\u666f\u56fe\u7247\n     - \u7126\u70b9\u5361\u7247\u624d\u52a0\u8f7d\u80cc\u666f\u56fe\u7247\n     - \u7126\u70b9\u5361\u7247\u653e\u5927\n     - \u7126\u70b9\u5361\u7247\u7b80\u4ecb\u5c55\u5f00\n     - \u7126\u70b9\u5361\u7247\u5934\u50cf\u52a8\u753b\n     - \u7b2c\u4e00\u6b21\u70b9\u51fb\u5361\u7247\u6fc0\u6d3b\n     - \u6fc0\u6d3b\u540e\u51fa\u73b0\u524d\u5f80\u7f51\u7ad9\u6309\u94ae\n     - \u70b9\u51fb\u6309\u94ae\u624d\u80fd\u771f\u6b63\u8df3\u8f6c\n     ========================================================= -->\n\n\n<style>\n\n\/* =========================================================\n   \u2460 \u6700\u5916\u5c42\n   ========================================================= *\/\n\n.sakura-wheel-friends {\n    --sw-card-width: 86vw;\n    --sw-card-max-width: 430px;\n    --sw-card-height: 150px;\n\n    --sw-normal-scale: .88;\n    --sw-focus-scale: 1;\n\n    --sw-gap: 12px;\n\n    \/* \u7126\u70b9\u5361\u7247\u6574\u4f53\u4e0a\u79fb *\/\n    --sw-focus-offset: -104px;\n\n    position: relative;\n\n    width: 100%;\n    height: 100vh;\n    min-height: 620px;\n\n    overflow: hidden;\n\n    box-sizing: border-box;\n\n    \/* \u7981\u6b62\u6d4f\u89c8\u5668\u5904\u7406\u8be5\u533a\u57df\u7684\u89e6\u6478\u6eda\u52a8 *\/\n    touch-action: none;\n\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n\n\/* =========================================================\n   \u2461 \u5361\u7247\u8f68\u9053\n   ========================================================= *\/\n\n.sakura-wheel-track {\n\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n\n    width: 100%;\n    height: 100%;\n\n    transform: translate(-50%, -50%);\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   \u2462 \u5355\u4e2a\u53cb\u94fe\u5361\u7247\n   ========================================================= *\/\n\n.sakura-wheel-card {\n\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n\n    width: var(--sw-card-width);\n    max-width: var(--sw-card-max-width);\n    height: var(--sw-card-height);\n\n    box-sizing: border-box;\n\n    transform:\n        translate(-50%, calc(-50% + var(--sw-focus-offset)))\n        scale(var(--sw-normal-scale));\n\n    opacity: .58;\n\n    z-index: 1;\n\n    pointer-events: none;\n\n    border-radius: 24px;\n\n    overflow: hidden;\n\n    text-decoration: none !important;\n\n    color: inherit;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.42),\n            rgba(255,255,255,.13)\n        );\n\n    border: 1px solid rgba(255,255,255,.48);\n\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n\n    box-shadow:\n        0 12px 30px rgba(0,0,0,.06),\n        inset 0 1px 1px rgba(255,255,255,.55);\n\n    transition:\n        transform .42s cubic-bezier(.2,.75,.2,1),\n        opacity .32s ease,\n        box-shadow .4s ease,\n        border-color .4s ease;\n\n    will-change: transform, opacity;\n}\n\n\n\/* =========================================================\n   \u2605 \u8d85\u51fa\u53ef\u89c6\u8303\u56f4\u7684\u8fdc\u5904\u5361\u7247\u5f7b\u5e95\u9690\u85cf\n   ========================================================= *\/\n\n.sakura-wheel-card.sw-wheel-hidden {\n\n    opacity: 0 !important;\n\n    visibility: hidden !important;\n\n    pointer-events: none !important;\n\n    transform:\n        translate(\n            -50%,\n            calc(-50% + var(--sw-focus-offset))\n        )\n        scale(.7) !important;\n\n    z-index: 0 !important;\n}\n\n\n\/* =========================================================\n   \u2463 \u5361\u7247\u4e4b\u95f4\u4fdd\u6301\u6bd4\u8f83\u677e\u7684\u6392\u5217\n   ========================================================= *\/\n\n.sakura-wheel-card[data-position=\"0\"] {\n    transform:\n        translate(-50%, calc(-50% + var(--sw-focus-offset)))\n        scale(1);\n\n    opacity: 1;\n\n    visibility: visible;\n\n    z-index: 20;\n\n    pointer-events: auto;\n\n    box-shadow:\n        0 22px 55px rgba(0,0,0,.10),\n        0 0 35px rgba(255,145,182,.08),\n        inset 0 1px 2px rgba(255,255,255,.75);\n}\n\n\n\/* \u4e0a\u9762\u7684\u5361\u7247 *\/\n\n.sakura-wheel-card[data-position=\"-1\"] {\n    transform:\n        translate(\n            -50%,\n            calc(-50% - var(--sw-card-height) - var(--sw-gap) + var(--sw-focus-offset))\n        )\n        scale(var(--sw-normal-scale));\n\n    opacity: .52;\n\n    visibility: visible;\n\n    z-index: 10;\n}\n\n\n\/* \u4e0b\u9762\u7684\u5361\u7247 *\/\n\n.sakura-wheel-card[data-position=\"1\"] {\n    transform:\n        translate(\n            -50%,\n            calc(-50% + var(--sw-card-height) + var(--sw-gap) + var(--sw-focus-offset))\n        )\n        scale(var(--sw-normal-scale));\n\n    opacity: .52;\n\n    visibility: visible;\n\n    z-index: 10;\n}\n\n\n\/* \u66f4\u8fdc\u7684\u5361\u7247 *\/\n\n.sakura-wheel-card[data-position=\"-2\"] {\n    transform:\n        translate(\n            -50%,\n            calc(-50% - (var(--sw-card-height) + var(--sw-gap)) * 2 + var(--sw-focus-offset))\n        )\n        scale(.78);\n\n    opacity: .25;\n\n    visibility: visible;\n\n    z-index: 5;\n}\n\n\n.sakura-wheel-card[data-position=\"2\"] {\n    transform:\n        translate(\n            -50%,\n            calc(-50% + (var(--sw-card-height) + var(--sw-gap)) * 2 + var(--sw-focus-offset))\n        )\n        scale(.78);\n\n    opacity: .25;\n\n    visibility: visible;\n\n    z-index: 5;\n}\n\n\n\/* =========================================================\n   \u2464 \u5361\u7247\u5185\u90e8\n   ========================================================= *\/\n\n.sakura-wheel-inner {\n\n    position: relative;\n\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n\n    align-items: center;\n\n    box-sizing: border-box;\n\n    padding: 20px 22px;\n\n    overflow: hidden;\n}\n\n\n\/* =========================================================\n   \u2465 \u80cc\u666f\u56fe\u7247\n   ========================================================= *\/\n\n.sakura-wheel-bg {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: -2;\n\n    opacity: 0;\n\n    background-size: cover;\n    background-position: center;\n\n    filter:\n        blur(1px)\n        saturate(.85);\n\n    transform: scale(1.04);\n\n    transition:\n        opacity .65s ease,\n        transform .9s cubic-bezier(.2,.75,.2,1);\n\n    pointer-events: none;\n}\n\n\n\/* \u56fe\u7247\u4e0a\u9762\u7684\u96fe *\/\n\n.sakura-wheel-bg::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(255,255,255,.08) 0%,\n            rgba(255,255,255,.25) 25%,\n            rgba(255,255,255,.58) 60%,\n            rgba(255,255,255,.88) 100%\n        );\n\n    pointer-events: none;\n}\n\n\n\/* \u7126\u70b9\u5361\u7247\u624d\u663e\u793a\u56fe\u7247 *\/\n\n.sakura-wheel-card[data-position=\"0\"] .sakura-wheel-bg {\n\n    opacity: .30;\n\n    transform: scale(1);\n\n}\n\n\n\/* =========================================================\n   \u2466 \u73bb\u7483\u906e\u7f69\n   ========================================================= *\/\n\n.sakura-wheel-glass {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: -1;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.45),\n            rgba(255,255,255,.12)\n        );\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   \u2467 \u5185\u5bb9\n   ========================================================= *\/\n\n.sakura-wheel-content {\n\n    min-width: 0;\n\n    flex: 1;\n\n    position: relative;\n\n    z-index: 5;\n\n    padding-right: 12px;\n\n}\n\n\n\/* =========================================================\n   \u2468 \u6807\u9898\n   ========================================================= *\/\n\n.sakura-wheel-title {\n\n    margin: 0;\n\n    color: #414141;\n\n    \/* \u539f 20px \u2192 \u7f29\u5c0f *\/\n    font-size: 17px;\n\n    line-height: 1.3;\n\n    font-weight: 650;\n\n    letter-spacing: .2px;\n\n    white-space: nowrap;\n\n    overflow: hidden;\n\n    text-overflow: ellipsis;\n\n    transition:\n        transform .38s cubic-bezier(.2,.75,.2,1),\n        font-size .38s ease,\n        color .35s ease;\n\n}\n\n\n\/* \u7126\u70b9\u6807\u9898\u7a0d\u5fae\u653e\u5927 *\/\n\n.sakura-wheel-card[data-position=\"0\"] .sakura-wheel-title {\n\n    transform: translateY(-7px) scale(1.03);\n\n    color: #333;\n\n}\n\n\n\/* =========================================================\n   \u2469 \u7b80\u4ecb\n   ========================================================= *\/\n\n.sakura-wheel-description {\n\n    margin: 7px 0 0;\n\n    max-width: 100%;\n\n    color: #666;\n\n    \/* \u539f 12.5px \u2192 \u7f29\u5c0f *\/\n    font-size: 11.5px;\n\n    line-height: 1.65;\n\n    opacity: 0;\n\n    transform:\n        translateY(10px);\n\n    max-height: 0;\n\n    overflow: hidden;\n\n    transition:\n        opacity .5s ease,\n        transform .5s cubic-bezier(.2,.75,.2,1),\n        max-height .55s ease;\n\n}\n\n\n\/* \u7126\u70b9\u51fa\u73b0\u7b80\u4ecb *\/\n\n.sakura-wheel-card[data-position=\"0\"] .sakura-wheel-description {\n\n    opacity: .82;\n\n    transform: translateY(0);\n\n    max-height: 48px;\n\n}\n\n\n\/* =========================================================\n   \u246a \u5934\u50cf\u533a\u57df\n   ========================================================= *\/\n\n.sakura-wheel-avatar-wrap {\n\n    position: relative;\n\n    flex: 0 0 72px;\n\n    width: 72px;\n    height: 72px;\n\n    z-index: 8;\n\n}\n\n\n\/* =========================================================\n   \u246b \u5934\u50cf\n   ========================================================= *\/\n\n.sakura-wheel-avatar {\n\n    width: 72px;\n    height: 72px;\n\n    object-fit: cover;\n\n    display: block;\n\n    border-radius: 50%;\n\n    border: 3px solid rgba(255,255,255,.76);\n\n    background: rgba(255,255,255,.22);\n\n    box-sizing: border-box;\n\n    box-shadow:\n        0 10px 25px rgba(0,0,0,.10),\n        inset 0 1px 2px rgba(255,255,255,.7);\n\n    transition:\n        transform .8s cubic-bezier(.2,.75,.2,1),\n        box-shadow .5s ease;\n\n}\n\n\n\/* \u7126\u70b9\u5934\u50cf\u65cb\u8f6c\u653e\u5927 *\/\n\n.sakura-wheel-card[data-position=\"0\"] .sakura-wheel-avatar {\n\n    transform:\n        scale(1.08)\n        rotate(360deg);\n\n    box-shadow:\n        0 15px 32px rgba(0,0,0,.15),\n        0 0 25px rgba(255,145,182,.12);\n\n}\n\n\n\/* =========================================================\n   \u246c \u524d\u5f80\u7f51\u7ad9\u6309\u94ae\n   ========================================================= *\/\n\n.sakura-wheel-go {\n\n    position: absolute;\n\n    right: -2px;\n    bottom: -8px;\n\n    width: 28px;\n    height: 28px;\n\n    border-radius: 50%;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n\n    background:\n        rgba(255,255,255,.88);\n\n    border: 1px solid rgba(255,255,255,.8);\n\n    box-shadow:\n        0 5px 15px rgba(0,0,0,.12);\n\n    color: #555;\n\n    font-size: 16px;\n\n    line-height: 1;\n\n    text-decoration: none !important;\n\n    opacity: 0;\n\n    transform:\n        scale(.35)\n        translateY(8px);\n\n    pointer-events: none;\n\n    transition:\n        opacity .45s ease,\n        transform .5s cubic-bezier(.2,.75,.2,1),\n        background .25s ease,\n        box-shadow .25s ease;\n\n}\n\n\n\/* =========================================================\n   \u246d \u7b2c\u4e00\u6b21\u70b9\u51fb\u6fc0\u6d3b\u540e\u663e\u793a\u6309\u94ae\n   ========================================================= *\/\n\n.sakura-wheel-card.is-activated .sakura-wheel-go {\n\n    opacity: 1;\n\n    transform:\n        scale(1)\n        translateY(0);\n\n    pointer-events: auto;\n\n}\n\n\n\/* \u9f20\u6807\u7ecf\u8fc7\u6309\u94ae *\/\n\n.sakura-wheel-go:hover {\n\n    background: rgba(255,255,255,1);\n\n    box-shadow:\n        0 7px 18px rgba(0,0,0,.15);\n\n}\n\n\n\/* =========================================================\n   \u246e \u7bad\u5934\n   ========================================================= *\/\n\n.sakura-wheel-go::before {\n\n    content: \"\u2192\";\n\n    display: block;\n\n    font-size: 17px;\n\n    line-height: 1;\n\n    transform: translateX(0);\n\n    transition:\n        transform .25s ease;\n\n}\n\n\n.sakura-wheel-go:hover::before {\n\n    transform:\n        translateX(2px);\n\n}\n\n\n\/* =========================================================\n   \u246f \u8f7b\u5fae\u9ad8\u5149\n   ========================================================= *\/\n\n.sakura-wheel-card[data-position=\"0\"]::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: -20%;\n\n    top: -65px;\n\n    width: 140%;\n\n    height: 100px;\n\n    border-radius: 50%;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(255,255,255,.42),\n            transparent\n        );\n\n    filter: blur(9px);\n\n    opacity: .7;\n\n    pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   \u2470 \u6697\u8272\u6a21\u5f0f\n   ========================================================= *\/\n\nbody.dark .sakura-wheel-card {\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(60,60,60,.54),\n            rgba(20,20,20,.42)\n        );\n\n    border-color:\n        rgba(255,255,255,.12);\n\n    box-shadow:\n        0 15px 35px rgba(0,0,0,.28),\n        inset 0 1px 1px rgba(255,255,255,.08);\n\n}\n\n\nbody.dark .sakura-wheel-glass {\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(80,80,80,.35),\n            rgba(20,20,20,.25)\n        );\n\n}\n\n\nbody.dark .sakura-wheel-title {\n\n    color: #ddd;\n\n}\n\n\nbody.dark .sakura-wheel-card[data-position=\"0\"] .sakura-wheel-title {\n\n    color: #eee;\n\n}\n\n\nbody.dark .sakura-wheel-description {\n\n    color: #aaa;\n\n}\n\n\nbody.dark .sakura-wheel-go {\n\n    background:\n        rgba(50,50,50,.9);\n\n    color: #ddd;\n\n    border-color:\n        rgba(255,255,255,.15);\n\n}\n\n\n\/* =========================================================\n   \u2471 \u624b\u673a\u5c3a\u5bf8\n   ========================================================= *\/\n\n@media (max-width:680px) {\n\n    .sakura-wheel-friends {\n\n        --sw-card-width: calc(100vw - 34px);\n\n        --sw-card-height: 146px;\n\n        --sw-gap: 11px;\n\n        \/* \u624b\u673a\u7126\u70b9\u540c\u6837\u6574\u4f53\u4e0a\u79fb *\/\n        --sw-focus-offset: -114px;\n\n        min-height: 100vh;\n\n    }\n\n\n    .sakura-wheel-card {\n\n        border-radius: 22px;\n\n    }\n\n\n    .sakura-wheel-inner {\n\n        padding:\n            18px\n            19px;\n\n    }\n\n\n    .sakura-wheel-avatar-wrap {\n\n        flex-basis: 70px;\n\n        width: 70px;\n        height: 70px;\n\n    }\n\n\n    .sakura-wheel-avatar {\n\n        width: 70px;\n        height: 70px;\n\n    }\n\n\n    .sakura-wheel-title {\n\n        \/* \u539f 19px \u2192 \u7f29\u5c0f *\/\n        font-size: 17px;\n\n    }\n\n\n    .sakura-wheel-card[data-position=\"0\"]\n    .sakura-wheel-title {\n\n        transform:\n            translateY(-7px)\n            scale(1.02);\n\n    }\n\n\n    .sakura-wheel-description {\n\n        \/* \u539f 12px \u2192 \u7f29\u5c0f *\/\n        font-size: 11px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   \u2472 \u975e\u5e38\u5c0f\u7684\u624b\u673a\n   ========================================================= *\/\n\n@media (max-width:380px) {\n\n    .sakura-wheel-friends {\n\n        --sw-card-width: calc(100vw - 24px);\n\n        --sw-card-height: 132px;\n\n        \/* \u975e\u5e38\u5c0f\u5c4f\u5e55\u7126\u70b9\u4f4d\u7f6e *\/\n        --sw-focus-offset: -110px;\n\n    }\n\n\n    .sakura-wheel-inner {\n\n        padding: 16px;\n\n    }\n\n\n    .sakura-wheel-avatar-wrap {\n\n        flex-basis: 64px;\n\n        width: 64px;\n        height: 64px;\n\n    }\n\n\n    .sakura-wheel-avatar {\n\n        width: 64px;\n        height: 64px;\n\n    }\n\n\n    .sakura-wheel-title {\n\n        font-size: 17px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   \u2473 \u51cf\u5c11\u52a8\u753b\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .sakura-wheel-card,\n    .sakura-wheel-avatar,\n    .sakura-wheel-description,\n    .sakura-wheel-title,\n    .sakura-wheel-go {\n\n        transition: none !important;\n\n    }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     HTML\n     ========================================================= -->\n\n<div class=\"sakura-wheel-friends\" id=\"sakuraWheelFriends\">\n\n    <div class=\"sakura-wheel-track\" id=\"sakuraWheelTrack\">\n\n\n        <!-- \u53cb\u94fe 1 -->\n\n        <div class=\"sakura-wheel-card\" data-index=\"0\" data-url=\"https:\/\/supersrui.github.io\/SUPERSRUI-s-web\/index.html#\" data-bg=\"https:\/\/images.unsplash.com\/photo-1518709268805-4e9042af9f23?auto=format&amp;fit=crop&amp;w=900&amp;q=70\">\n\n            <div class=\"sakura-wheel-bg\"><\/div>\n\n            <div class=\"sakura-wheel-glass\"><\/div>\n\n            <div class=\"sakura-wheel-inner\">\n\n                <div class=\"sakura-wheel-content\">\n\n                    <h3 class=\"sakura-wheel-title\">\n                        <s>\u897f\u7ef4\u7684\u5c0f\u7ad9<\/s>\n                    <\/h3>\n\n                    <p class=\"sakura-wheel-description\">\n                        \u4e00\u4e2a\u5c0f\u70c2\u7ad9\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"sakura-wheel-avatar-wrap\">\n\n                    <img decoding=\"async\" class=\"sakura-wheel-avatar\" src=\"https:\/\/cdn.jsdelivr.net\/gh\/twitter\/twemoji@14.0.2\/assets\/72x72\/1f680.png\" alt=\"\u897f\u7ef4\u7684\u5c0f\u7ad9\" loading=\"lazy\">\n\n                    <a class=\"sakura-wheel-go\" href=\"https:\/\/supersrui.github.io\/SUPERSRUI-s-web\/index.html#\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u524d\u5f80\u7f51\u7ad9\" rel=\"nofollow\" ><\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- \u53cb\u94fe 2 -->\n\n        <div class=\"sakura-wheel-card\" data-index=\"1\" data-url=\"https:\/\/supersrui.top\/\" data-bg=\"https:\/\/images.unsplash.com\/photo-1497250681960-ef046c08a56e?auto=format&amp;fit=crop&amp;w=900&amp;q=70\">\n\n            <div class=\"sakura-wheel-bg\"><\/div>\n\n            <div class=\"sakura-wheel-glass\"><\/div>\n\n            <div class=\"sakura-wheel-inner\">\n\n                <div class=\"sakura-wheel-content\">\n\n                    <h3 class=\"sakura-wheel-title\">\n                        srui\u7684\u7f51\u7ad9\n                    <\/h3>\n\n                    <p class=\"sakura-wheel-description\">\n                        \u8bd5\u7740\u628a\u5bfb\u5e38\u65e5\u5b50\u8fc7\u5f97\u6709\u8ff9\u53ef\u5faa\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"sakura-wheel-avatar-wrap\">\n\n                    <img decoding=\"async\" class=\"sakura-wheel-avatar\" src=\"http:\/\/supersrui.top\/wp-content\/uploads\/2026\/07\/1785224826-Image_1785224792121.jpg\" alt=\"srui\u7684\u7f51\u7ad9\" loading=\"lazy\">\n\n                    <a class=\"sakura-wheel-go\" href=\"https:\/\/supersrui.top\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u524d\u5f80\u7f51\u7ad9\" rel=\"nofollow\" ><\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- \u53cb\u94fe 3 -->\n\n        <div class=\"sakura-wheel-card\" data-index=\"2\" data-url=\"https:\/\/www.lov3u.top\/\" data-bg=\"https:\/\/images.unsplash.com\/photo-1511497584788-876760111969?auto=format&amp;fit=crop&amp;w=900&amp;q=70\">\n\n            <div class=\"sakura-wheel-bg\"><\/div>\n\n            <div class=\"sakura-wheel-glass\"><\/div>\n\n            <div class=\"sakura-wheel-inner\">\n\n                <div class=\"sakura-wheel-content\">\n\n                    <h3 class=\"sakura-wheel-title\">\n                        Weiwei's blog\n                    <\/h3>\n\n                    <p class=\"sakura-wheel-description\">\n                        \u6211\u662f\u4f60\u7238\u7238\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"sakura-wheel-avatar-wrap\">\n\n                    <img decoding=\"async\" class=\"sakura-wheel-avatar\" src=\"https:\/\/www.lov3u.top\/wp-content\/uploads\/2026\/07\/cropped-cropped-1785343618-IMG_20260730_004521.png\" alt=\"Weiwei's blog\" loading=\"lazy\">\n\n                    <a class=\"sakura-wheel-go\" href=\"https:\/\/www.lov3u.top\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u524d\u5f80\u7f51\u7ad9\" rel=\"nofollow\" ><\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- \u53cb\u94fe 4 -->\n\n        <div class=\"sakura-wheel-card\" data-index=\"3\" data-url=\"https:\/\/www.cuizi.top\/\" data-bg=\"https:\/\/images.unsplash.com\/photo-1500534623283-312aade485b7?auto=format&amp;fit=crop&amp;w=900&amp;q=70\">\n\n            <div class=\"sakura-wheel-bg\"><\/div>\n\n            <div class=\"sakura-wheel-glass\"><\/div>\n\n            <div class=\"sakura-wheel-inner\">\n\n                <div class=\"sakura-wheel-content\">\n\n                    <h3 class=\"sakura-wheel-title\">\n                        ks blog\n                    <\/h3>\n\n                    <p class=\"sakura-wheel-description\">\n                        \u4fdd\u6301\u597d\u5947\uff0c\u4fdd\u6301\u8bda\u5b9e\u3002\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"sakura-wheel-avatar-wrap\">\n\n                    <img decoding=\"async\" class=\"sakura-wheel-avatar\" src=\"https:\/\/www.cuizi.top\/logo.png\" alt=\"ks blog\" loading=\"lazy\">\n\n                    <a class=\"sakura-wheel-go\" href=\"https:\/\/www.cuizi.top\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u524d\u5f80\u7f51\u7ad9\" rel=\"nofollow\" ><\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- \u53cb\u94fe 5 \u81f3 10 \u5df2\u6309\u8981\u6c42\u6ce8\u91ca\u6389\n        <div class=\"sakura-wheel-card\" data-index=\"4\" data-url=\"https:\/\/example.com\/\" data-bg=\"https:\/\/images.unsplash.com\/photo-1519608487953-e999c86e7455?auto=format&amp;fit=crop&amp;w=900&amp;q=70\">\n            ...\n        <\/div>\n        ...\n        -->\n\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       \u9632\u6b62\u91cd\u590d\u521d\u59cb\u5316\n       ===================================================== *\/\n\n    if (window.__SakuraWheelFriendsLoaded) {\n        return;\n    }\n\n    window.__SakuraWheelFriendsLoaded = true;\n\n\n    const root =\n        document.getElementById(\"sakuraWheelFriends\");\n\n    if (!root) {\n        return;\n    }\n\n\n    const cards =\n        Array.from(\n            root.querySelectorAll(\".sakura-wheel-card\")\n        );\n\n\n    if (!cards.length) {\n        return;\n    }\n\n\n    \/* =====================================================\n       \u72b6\u6001\n       ===================================================== *\/\n\n    let current = 0;\n\n    let locked = false;\n\n    let startY = 0;\n\n    let startX = 0;\n\n    let activated = false;\n\n\n    const total = cards.length;\n\n\n    \/* =====================================================\n       \u65e0\u9650\u5faa\u73af\u4f4d\u7f6e\n       ===================================================== *\/\n\n    function circularPosition(index) {\n\n        let diff =\n            index - current;\n\n\n        \/*\n         * \u628a\u4f4d\u7f6e\u538b\u7f29\u5230\u6700\u77ed\u8ddd\u79bb\n         *\/\n\n        if (diff > total \/ 2) {\n\n            diff -= total;\n\n        }\n\n        if (diff < -total \/ 2) {\n\n            diff += total;\n\n        }\n\n\n        return diff;\n\n    }\n\n\n    \/* =====================================================\n       \u80cc\u666f\u56fe\u7247\u61d2\u52a0\u8f7d\n       ===================================================== *\/\n\n    function updateBackground(card, position) {\n\n        const bg =\n            card.querySelector(\".sakura-wheel-bg\");\n\n        if (!bg) {\n            return;\n        }\n\n\n        if (position === 0) {\n\n            const image =\n                card.dataset.bg;\n\n            if (\n                image &&\n                !bg.dataset.loaded\n            ) {\n\n                bg.style.backgroundImage =\n                    'url(\"' + image + '\")';\n\n                bg.dataset.loaded = \"true\";\n\n            }\n\n        }\n\n        else {\n\n            bg.style.opacity = \"0\";\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       \u66f4\u65b0\u6240\u6709\u5361\u7247\n       ===================================================== *\/\n\n    function render() {\n\n        cards.forEach(function (card, index) {\n\n            const position =\n                circularPosition(index);\n\n\n            card.dataset.position =\n                String(position);\n\n\n            \/* =================================================\n               \u8ddd\u79bb\u7126\u70b9\u8d85\u8fc7 2 \u5f20\u5f7b\u5e95\u9690\u85cf\n               ================================================= *\/\n\n            if (\n                Math.abs(position) > 2\n            ) {\n\n                card.classList.add(\n                    \"sw-wheel-hidden\"\n                );\n\n            }\n\n            else {\n\n                card.classList.remove(\n                    \"sw-wheel-hidden\"\n                );\n\n            }\n\n\n            \/*\n             * \u6bcf\u6b21\u91cd\u65b0\u8f6e\u5230\u7126\u70b9\u65f6\uff0c\n             * \u91cd\u7f6e\u6fc0\u6d3b\u72b6\u6001\u3002\n             *\/\n\n            if (position !== 0) {\n\n                card.classList.remove(\n                    \"is-activated\"\n                );\n\n            }\n\n\n            updateBackground(\n                card,\n                position\n            );\n\n        });\n\n\n        \/*\n         * \u7126\u70b9\u5361\u7247\u7684\u80cc\u666f\u663e\u793a\n         *\/\n\n        const focus =\n            cards[current];\n\n        if (focus) {\n\n            const bg =\n                focus.querySelector(\n                    \".sakura-wheel-bg\"\n                );\n\n            if (bg) {\n\n                requestAnimationFrame(\n                    function () {\n\n                        bg.style.opacity =\n                            \".30\";\n\n                    }\n                );\n\n            }\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       \u5207\u6362\u5361\u7247\n\n       \u4e00\u6b21\u624b\u52bf\u6c38\u8fdc\u53ea\u79fb\u52a8\u4e00\u4e2a\u5361\u7247\n       ===================================================== *\/\n\n    function move(direction) {\n\n        if (locked) {\n            return;\n        }\n\n\n        locked = true;\n\n\n        current += direction;\n\n\n        \/*\n         * \u65e0\u9650\u5faa\u73af\n         *\/\n\n        if (current >= total) {\n\n            current = 0;\n\n        }\n\n        if (current < 0) {\n\n            current = total - 1;\n\n        }\n\n\n        activated = false;\n\n\n        render();\n\n\n        \/*\n         * \u9632\u6b62\u5feb\u901f\u8fde\u7eed\u6ed1\u52a8\u5bfc\u81f4\u52a8\u753b\u53e0\u52a0\n         *\/\n\n        window.setTimeout(\n            function () {\n\n                locked = false;\n\n            },\n            430\n        );\n\n    }\n\n\n    \/* =====================================================\n       \u624b\u673a\u89e6\u6478\u5f00\u59cb\n       ===================================================== *\/\n\n    root.addEventListener(\n        \"touchstart\",\n        function (event) {\n\n            if (\n                !event.touches ||\n                !event.touches.length\n            ) {\n                return;\n            }\n\n\n            startY =\n                event.touches[0].clientY;\n\n            startX =\n                event.touches[0].clientX;\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    \/* =====================================================\n       \u2605 \u963b\u6b62\u89e6\u6478\u6ed1\u52a8\u5bfc\u81f4\u6574\u4e2a\u9875\u9762\u6eda\u52a8\n\n       \u8fd9\u662f\u4e4b\u524d\u8981\u6c42\u4fdd\u7559\u7684\u9875\u9762\u9501\u5b9a\u4fee\u590d\u3002\n       ===================================================== *\/\n\n    root.addEventListener(\n        \"touchmove\",\n        function (event) {\n\n            event.preventDefault();\n\n        },\n        {\n            passive: false\n        }\n    );\n\n\n    \/* =====================================================\n       \u624b\u673a\u89e6\u6478\u7ed3\u675f\n       ===================================================== *\/\n\n    root.addEventListener(\n        \"touchend\",\n        function (event) {\n\n            if (\n                !event.changedTouches ||\n                !event.changedTouches.length\n            ) {\n                return;\n            }\n\n\n            const endY =\n                event.changedTouches[0].clientY;\n\n            const endX =\n                event.changedTouches[0].clientX;\n\n\n            const deltaY =\n                endY - startY;\n\n\n            const deltaX =\n                endX - startX;\n\n\n            \/*\n             * \u5fc5\u987b\u4e3b\u8981\u662f\u7ad6\u76f4\u6ed1\u52a8\n             *\/\n\n            if (\n                Math.abs(deltaY) <\n                Math.abs(deltaX)\n            ) {\n                return;\n            }\n\n\n            \/*\n             * \u4e0d\u7ba1\u6ed1\u591a\u5c11\uff0c\n             * \u53ea\u8981\u8d85\u8fc7\u89e6\u53d1\u8ddd\u79bb\uff0c\n             * \u5c31\u53ea\u79fb\u52a8\u4e00\u4e2a\u5361\u7247\u3002\n             *\/\n\n            if (\n                Math.abs(deltaY) < 18\n            ) {\n                return;\n            }\n\n\n            if (deltaY < 0) {\n\n                \/*\n                 * \u624b\u6307\u5411\u4e0a\n                 * \u4e0b\u4e00\u5f20\n                 *\/\n\n                move(1);\n\n            }\n\n            else {\n\n                \/*\n                 * \u624b\u6307\u5411\u4e0b\n                 * \u4e0a\u4e00\u5f20\n                 *\/\n\n                move(-1);\n\n            }\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    \/* =====================================================\n       \u9f20\u6807\u6eda\u8f6e\n       ===================================================== *\/\n\n    root.addEventListener(\n        \"wheel\",\n        function (event) {\n\n            \/*\n             * \u684c\u9762\u7aef\u540c\u6837\u4e00\u6b21\u53ea\u5207\u4e00\u4e2a\u3002\n             *\/\n\n            if (\n                Math.abs(event.deltaY) <\n                Math.abs(event.deltaX)\n            ) {\n                return;\n            }\n\n\n            event.preventDefault();\n\n\n            if (event.deltaY > 0) {\n\n                move(1);\n\n            }\n\n            else {\n\n                move(-1);\n\n            }\n\n        },\n        {\n            passive: false\n        }\n    );\n\n\n    \/* =====================================================\n       \u5361\u7247\u70b9\u51fb\n\n       \u7b2c\u4e00\u6b21\uff1a\n       \u6fc0\u6d3b\u7126\u70b9\u5361\u7247\n\n       \u7b2c\u4e8c\u6b21\uff1a\n       \u70b9\u51fb\u771f\u6b63\u7684\u7bad\u5934\u6309\u94ae\u624d\u80fd\u8fdb\u5165\u7f51\u7ad9\u3002\n       ===================================================== *\/\n\n    cards.forEach(function (card) {\n\n        card.addEventListener(\n            \"click\",\n            function (event) {\n\n                \/*\n                 * \u5982\u679c\u70b9\u51fb\u7684\u662f\u524d\u5f80\u6309\u94ae\uff0c\n                 * \u5141\u8bb8\u6b63\u5e38\u8df3\u8f6c\u3002\n                 *\/\n\n                if (\n                    event.target.closest(\n                        \".sakura-wheel-go\"\n                    )\n                ) {\n\n                    return;\n\n                }\n\n\n                \/*\n                 * \u975e\u7126\u70b9\u5361\u7247\u70b9\u51fb\uff1a\n                 * \u4e0d\u8df3\u8f6c\uff0c\u53ea\u628a\u5b83\u79fb\u52a8\u5230\u7126\u70b9\u3002\n                 *\/\n\n                const position =\n                    Number(\n                        card.dataset.position\n                    );\n\n\n                if (position !== 0) {\n\n                    event.preventDefault();\n\n                    \/*\n                     * \u6839\u636e\u5f53\u524d\u76f8\u5bf9\u4f4d\u7f6e\uff0c\n                     * \u4e00\u6b21\u53ea\u79fb\u52a8\u4e00\u4e2a\u3002\n                     *\/\n\n                    if (position > 0) {\n\n                        move(1);\n\n                    }\n\n                    else {\n\n                        move(-1);\n\n                    }\n\n                    return;\n\n                }\n\n\n                \/*\n                 * \u7126\u70b9\u5361\u7247\u7b2c\u4e00\u6b21\u70b9\u51fb\uff1a\n                 * \u6fc0\u6d3b\u6309\u94ae\u3002\n                 *\/\n\n                if (\n                    !card.classList.contains(\n                        \"is-activated\"\n                    )\n                ) {\n\n                    event.preventDefault();\n\n                    card.classList.add(\n                        \"is-activated\"\n                    );\n\n                }\n\n            }\n        );\n\n    });\n\n\n    \/* =====================================================\n       \u521d\u59cb\u5316\n       ===================================================== *\/\n\n    render();\n\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u897f\u7ef4\u7684\u5c0f\u7ad9 \u4e00\u4e2a\u5c0f\u70c2\u7ad9 srui\u7684\u7f51\u7ad9 \u8bd5\u7740\u628a\u5bfb\u5e38\u65e5\u5b50\u8fc7\u5f97\u6709\u8ff9\u53ef\u5faa Weiwei&#8217;s blog \u6211\u662f\u4f60\u7238\u7238 ks blog \u4fdd\u6301\u597d &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"class_list":["post-201","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/pages\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":2,"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/pages\/201\/revisions"}],"predecessor-version":[{"id":205,"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/pages\/201\/revisions\/205"}],"wp:attachment":[{"href":"https:\/\/supersrui.top\/index.php\/wp-json\/wp\/v2\/media?parent=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}