{"html":"

\n\n

\n\n \n\n

\n\n

\n Loading\n Story Mode\n

\n","css":".rdr-revolver-loader {\n /* Scoped Variables */\n --rdr-red: #cc0000;\n --rdr-red-dark: #8a0000;\n --rdr-brass: #d4af37;\n --rdr-brass-dark: #997c1f;\n --rdr-metal: #1a1a1a;\n --rdr-metal-highlight: #333;\n --rdr-paper: #e6e6e6;\n --rdr-smoke: rgba(200, 200, 200, 0.1);\n --rdr-spark: #ffaa00;\n --rdr-size: 10em;\n\n position: relative;\n width: var(--rdr-size);\n height: var(--rdr-size);\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n\n /* Global Recoil Animation */\n animation: rdr-recoil-shock 4.5s ease-out infinite;\n}\n\n/* --- Hammer Mechanism --- */\n.rdr-hammer {\n position: absolute;\n top: -15%;\n width: 1.5em;\n height: 4em;\n background: linear-gradient(to bottom, #222, #000);\n border: 1px solid #333;\n border-radius: 4px;\n z-index: 0;\n transform-origin: bottom center;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);\n animation: rdr-hammer-action 4.5s infinite;\n}\n\n/* --- Interaction Ring (Dead Eye Meter) --- */\n.rdr-ring-svg {\n position: absolute;\n width: 110%;\n height: 110%;\n transform: rotate(-90deg);\n z-index: 1;\n filter: drop-shadow(0 0 4px black);\n}\n\n.rdr-ring-bg {\n fill: none;\n stroke: rgba(255, 255, 255, 0.05);\n stroke-width: 1;\n}\n\n.rdr-ring-fill {\n fill: none;\n stroke: var(--rdr-red);\n stroke-width: 2;\n stroke-linecap: round;\n stroke-dasharray: 283; /* 2 * pi * 45 */\n stroke-dashoffset: 283;\n animation: rdr-fill-ring 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n\n/* --- Smoke Effects --- */\n.rdr-smoke-container {\n position: absolute;\n top: -30%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n z-index: 0;\n}\n\n.rdr-smoke {\n position: absolute;\n bottom: 50%;\n left: 50%;\n width: 2em;\n height: 4em;\n background: radial-gradient(\n ellipse at center,\n var(--rdr-smoke) 0%,\n transparent 70%\n );\n border-radius: 50%;\n opacity: 0;\n transform-origin: bottom center;\n animation: rdr-smoke-rise 4.5s ease-out infinite;\n filter: blur(5px);\n}\n\n.rdr-smoke:nth-child(2) {\n width: 3.5em;\n left: 40%;\n animation-delay: 2.2s;\n}\n\n/* --- Sparks --- */\n.rdr-sparks {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 5;\n}\n\n.rdr-spark {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 3px;\n height: 1px;\n background: var(--rdr-spark);\n box-shadow: 0 0 4px var(--rdr-spark);\n opacity: 0;\n animation: rdr-spark-fly 4.5s linear infinite;\n}\n\n.rdr-spark:nth-child(1) {\n transform: rotate(15deg);\n animation-delay: 1.6s;\n}\n.rdr-spark:nth-child(2) {\n transform: rotate(-45deg);\n animation-delay: 1.7s;\n}\n.rdr-spark:nth-child(3) {\n transform: rotate(80deg);\n animation-delay: 1.65s;\n}\n\n/* --- The Revolver Cylinder --- */\n.rdr-cylinder {\n position: relative;\n width: 60%;\n height: 60%;\n background: radial-gradient(\n circle at 30% 30%,\n var(--rdr-metal-highlight),\n var(--rdr-metal)\n );\n border-radius: 50%;\n border: 1px solid #000;\n box-shadow:\n inset 0 0 2em #000,\n 0 1em 2em rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n /* Easing: \"Back\" easing creates a mechanical overshoot/snap effect */\n animation: rdr-spin-cylinder 4.5s cubic-bezier(0.6, -0.28, 0.735, 0.045)\n infinite;\n z-index: 2;\n}\n\n/* Cylinder Texture Detail */\n.rdr-cylinder::before {\n content: \"\";\n position: absolute;\n top: 2%;\n left: 2%;\n right: 2%;\n bottom: 2%;\n border-radius: 50%;\n border: 1px dashed rgba(255, 255, 255, 0.05);\n pointer-events: none;\n}\n\n/* Central Ratchet/Axle */\n.rdr-cylinder::after {\n content: \"\";\n position: absolute;\n width: 1.4em;\n height: 1.4em;\n background: radial-gradient(circle, #444, #111);\n border: 1px solid #222;\n border-radius: 50%;\n box-shadow: 0 0 0.5em #000;\n z-index: 4;\n}\n\n/* Chambers */\n.rdr-chamber {\n position: absolute;\n width: 1.9em;\n height: 1.9em;\n background-color: #050505;\n border-radius: 50%;\n box-shadow:\n inset 1px 1px 4px rgba(0, 0, 0, 0.9),\n 0 0 0 1px rgba(255, 255, 255, 0.05);\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n/* Positioning Chambers */\n.rdr-chamber:nth-child(1) {\n transform: rotate(0deg) translate(2.3em) rotate(0deg);\n}\n.rdr-chamber:nth-child(2) {\n transform: rotate(60deg) translate(2.3em) rotate(-60deg);\n}\n.rdr-chamber:nth-child(3) {\n transform: rotate(120deg) translate(2.3em) rotate(-120deg);\n}\n.rdr-chamber:nth-child(4) {\n transform: rotate(180deg) translate(2.3em) rotate(-180deg);\n}\n.rdr-chamber:nth-child(5) {\n transform: rotate(240deg) translate(2.3em) rotate(-240deg);\n}\n.rdr-chamber:nth-child(6) {\n transform: rotate(300deg) translate(2.3em) rotate(-300deg);\n}\n\n/* The Bullet Casing (Brass) */\n.rdr-bullet {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: radial-gradient(\n circle,\n var(--rdr-brass) 30%,\n var(--rdr-brass-dark) 70%\n );\n position: relative;\n transform: scale(0);\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n animation: rdr-load-bullet 4.5s infinite;\n}\n\n/* Primer */\n.rdr-bullet::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 35%;\n height: 35%;\n background: radial-gradient(circle, #e0e0e0, #888);\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.3);\n box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);\n}\n\n/* Dead Eye \"X\" Mark */\n.rdr-dead-eye-x {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5;\n opacity: 0;\n animation: rdr-paint-x 4.5s infinite;\n}\n\n.rdr-dead-eye-x::before,\n.rdr-dead-eye-x::after {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 3px;\n background-color: #ff0000;\n border-radius: 2px;\n box-shadow: 0 0 4px #ff0000;\n}\n.rdr-dead-eye-x::before {\n transform: rotate(45deg);\n}\n.rdr-dead-eye-x::after {\n transform: rotate(-45deg);\n}\n\n/* Staggered Loading & Targeting */\n.rdr-chamber:nth-child(1) .rdr-bullet,\n.rdr-chamber:nth-child(1) .rdr-dead-eye-x {\n animation-delay: 0.1s;\n}\n.rdr-chamber:nth-child(2) .rdr-bullet,\n.rdr-chamber:nth-child(2) .rdr-dead-eye-x {\n animation-delay: 0.2s;\n}\n.rdr-chamber:nth-child(3) .rdr-bullet,\n.rdr-chamber:nth-child(3) .rdr-dead-eye-x {\n animation-delay: 0.3s;\n}\n.rdr-chamber:nth-child(4) .rdr-bullet,\n.rdr-chamber:nth-child(4) .rdr-dead-eye-x {\n animation-delay: 0.4s;\n}\n.rdr-chamber:nth-child(5) .rdr-bullet,\n.rdr-chamber:nth-child(5) .rdr-dead-eye-x {\n animation-delay: 0.5s;\n}\n.rdr-chamber:nth-child(6) .rdr-bullet,\n.rdr-chamber:nth-child(6) .rdr-dead-eye-x {\n animation-delay: 0.6s;\n}\n\n/* --- Text Style --- */\n.rdr-text-wrapper {\n position: absolute;\n bottom: -4em;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.rdr-text {\n color: var(--rdr-paper);\n font-size: 1.6em;\n font-weight: 900;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n text-shadow: 0 2px 0px #000;\n opacity: 0.9;\n filter: contrast(1.2);\n}\n\n.rdr-text-sub {\n color: var(--rdr-red);\n font-size: 0.85em;\n letter-spacing: 0.25em;\n font-weight: 700;\n text-transform: uppercase;\n margin-top: 0.5em;\n opacity: 0;\n animation: rdr-fade-text 2s ease-in-out infinite alternate;\n}\n\n/* --- Animations --- */\n\n/* Recoil Shock: Jolt the whole container when cylinder snaps */\n@keyframes rdr-recoil-shock {\n 0%,\n 54% {\n transform: translateY(0) rotate(0);\n }\n 55% {\n transform: translateY(2px) rotate(1deg);\n } /* Snap! */\n 58% {\n transform: translateY(-1px) rotate(-0.5deg);\n }\n 62% {\n transform: translateY(0) rotate(0);\n }\n}\n\n/* Hammer: Cocks back then releases */\n@keyframes rdr-hammer-action {\n 0% {\n transform: translateY(0);\n }\n 10% {\n transform: translateY(1.5em) rotate(-10deg);\n } /* Cock back */\n 15% {\n transform: translateY(1.5em) rotate(-10deg);\n }\n 35% {\n transform: translateY(0) rotate(0);\n } /* Release (Fire/Spin) */\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes rdr-spin-cylinder {\n 0% {\n transform: rotate(0deg);\n }\n 15% {\n transform: rotate(-60deg);\n } /* Cocking back */\n 40% {\n transform: rotate(720deg);\n } /* Fast spin */\n 55% {\n transform: rotate(720deg);\n } /* Hard Stop */\n 100% {\n transform: rotate(720deg);\n }\n}\n\n@keyframes rdr-fill-ring {\n 0%,\n 50% {\n stroke-dashoffset: 283;\n }\n 90% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes rdr-load-bullet {\n 0%,\n 55% {\n transform: scale(0);\n opacity: 0;\n }\n 60% {\n transform: scale(1);\n opacity: 1;\n }\n 65% {\n transform: scale(0.9);\n }\n 90% {\n transform: scale(0.9);\n opacity: 1;\n }\n 95% {\n transform: scale(0);\n opacity: 0;\n }\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n}\n\n@keyframes rdr-paint-x {\n 0%,\n 60% {\n opacity: 0;\n transform: scale(1.5);\n }\n 62% {\n opacity: 1;\n transform: scale(1);\n } /* X marks the spot */\n 75% {\n opacity: 1;\n }\n 85% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes rdr-spark-fly {\n 0%,\n 35% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 36% {\n opacity: 1;\n transform: translate(0, 0) scale(1);\n }\n 45% {\n transform: translate(60px, -60px) scale(0);\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes rdr-smoke-rise {\n 0% {\n transform: translateX(-50%) translateY(0) scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n }\n 100% {\n transform: translateX(-50%) translateY(-30px) scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes rdr-fade-text {\n from {\n opacity: 0.5;\n }\n to {\n opacity: 1;\n }\n}\n"}

proud-bobcat-54

👁 实时预览

📝 源代码