{"html":"

\n \n

\n ROLLSTOP\n

\n","css":".card * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.roll-toggle {\n display: none;\n}\n\n.card {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 40px;\n transform-style: preserve-3d;\n z-index: 1;\n}\n\n.result {\n position: absolute;\n top: calc(50% + 90px);\n left: 50%;\n transform: translateX(-50%) translateY(0) scale(0);\n font-size: 60px;\n font-weight: 900;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: #000;\n text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n opacity: 0;\n z-index: 100;\n pointer-events: none;\n letter-spacing: 4px;\n}\n\n.roll-toggle:not(:checked) ~ .result {\n animation: fall-number 2.5s cubic-bezier(0.4, 0, 0.6, 1) 0.8s forwards;\n}\n\n@keyframes fall-number {\n 0% {\n transform: translateX(-50%) translateY(-30px) scale(0);\n opacity: 0;\n }\n 15% {\n transform: translateX(-50%) translateY(0) scale(1.1);\n opacity: 1;\n }\n 25%,\n 45% {\n transform: translateX(-50%) translateY(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50%) translateY(200px) scale(0.6);\n opacity: 0;\n }\n}\n\n.dice-area {\n display: flex;\n gap: 60px;\n transform-style: preserve-3d;\n z-index: 10;\n position: relative;\n}\n\n.dice-area::before {\n content: \"\";\n position: absolute;\n bottom: -35px;\n left: 50%;\n transform: translateX(-50%);\n width: 360px;\n height: 35px;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 0%,\n rgba(0, 0, 0, 0.2) 20%,\n rgba(0, 0, 0, 0.12) 40%,\n rgba(0, 0, 0, 0.06) 60%,\n transparent 80%\n );\n border-radius: 50%;\n filter: blur(15px);\n}\n\n.dice-area::after {\n content: \"\";\n position: absolute;\n bottom: -12px;\n left: 50%;\n transform: translateX(-50%);\n width: 320px;\n height: 50px;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.1) 35%,\n rgba(0, 0, 0, 0.05) 60%,\n transparent 80%\n );\n border-radius: 50%;\n filter: blur(20px);\n}\n\n.dice {\n width: 90px;\n height: 90px;\n position: relative;\n transform-style: preserve-3d;\n transform: rotateX(-25deg) rotateY(-15deg);\n animation: float 8s ease-in-out infinite;\n}\n\n.dice2 {\n animation-delay: 4s;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: rotateX(-35deg) rotateY(-45deg) translateY(0);\n }\n 25% {\n transform: rotateX(-25deg) rotateY(25deg) translateY(-20px);\n }\n 50% {\n transform: rotateX(-45deg) rotateY(55deg) translateY(0);\n }\n 75% {\n transform: rotateX(-30deg) rotateY(-25deg) translateY(-20px);\n }\n}\n\n.roll-toggle:checked ~ .dice-area .dice {\n animation: roll 1.2s linear infinite !important;\n}\n\n.roll-toggle:checked ~ .dice-area .dice2 {\n animation: roll 1s linear infinite !important;\n}\n\n@keyframes roll {\n to {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n\n.roll-toggle:not(:checked) ~ .dice-area .dice1 {\n animation:\n float 8s ease-in-out infinite,\n stop-at-5 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n.roll-toggle:not(:checked) ~ .dice-area .dice2 {\n animation:\n float 8s ease-in-out 4s infinite,\n stop-at-3 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n@keyframes stop-at-5 {\n to {\n transform: rotateX(-70deg) rotateY(-15deg);\n }\n}\n\n@keyframes stop-at-3 {\n to {\n transform: rotateX(-25deg) rotateY(-105deg);\n }\n}\n\n.face {\n position: absolute;\n width: 90px;\n height: 90px;\n background: linear-gradient(145deg, #fff 0%, #f8f8f8 50%, #f2f2f2 100%);\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 8px;\n backface-visibility: hidden;\n transform-style: preserve-3d;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n inset 3px 3px 8px rgba(0, 0, 0, 0.08),\n inset -3px -3px 8px rgba(0, 0, 0, 0.08),\n 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.face::before {\n content: \"\";\n position: absolute;\n inset: 1px;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.4) 0%,\n transparent 50%\n );\n border-radius: 7px;\n pointer-events: none;\n}\n\n.front {\n transform: rotateY(0deg) translateZ(45px);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(45px);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(45px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(45px);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(45px);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(45px);\n}\n\n.dots {\n display: grid;\n padding: 15px;\n gap: 15px;\n width: 100%;\n height: 100%;\n position: relative;\n z-index: 1;\n}\n\n.face[data-value=\"1\"] .dots {\n grid-template: 1fr / 1fr;\n place-items: center;\n}\n\n.face[data-value=\"2\"] .dots {\n grid-template: 1fr 1fr / 1fr;\n place-items: center;\n}\n\n.face[data-value=\"3\"] .dots {\n grid-template: 1fr 1fr 1fr / 1fr;\n place-items: center;\n}\n\n.face[data-value=\"4\"] .dots {\n grid-template: 1fr 1fr / 1fr 1fr;\n}\n\n.face[data-value=\"5\"] .dots {\n grid-template: 1fr 1fr 1fr / 1fr 1fr;\n}\n\n.face[data-value=\"6\"] .dots {\n grid-template: 1fr 1fr 1fr / 1fr 1fr;\n}\n\n.face[data-value=\"5\"] .dots span:nth-child(3) {\n grid-column: 1 / -1;\n justify-self: center;\n}\n\n.dots span {\n width: 12px;\n height: 12px;\n background: radial-gradient(\n circle at 40% 40%,\n rgba(40, 40, 40, 1) 0%,\n rgba(0, 0, 0, 1) 100%\n );\n border-radius: 50%;\n box-shadow:\n inset 1px 1px 3px rgba(0, 0, 0, 0.8),\n inset -1px -1px 2px rgba(255, 255, 255, 0.1),\n 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n\n.controls {\n display: flex;\n gap: 30px;\n z-index: 10;\n position: relative;\n}\n\n.controls::before {\n content: \"\";\n position: absolute;\n width: 155px;\n height: 72px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: 36px;\n background: rgba(0, 0, 0, 0.08);\n filter: blur(4px);\n z-index: -1;\n}\n\n.controls::after {\n content: \"\";\n position: absolute;\n width: 170px;\n height: 90px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n ellipse at top,\n rgba(0, 0, 0, 0.4) 0%,\n rgba(0, 0, 0, 0.25) 25%,\n rgba(0, 0, 0, 0.15) 50%,\n rgba(0, 0, 0, 0.05) 75%,\n transparent 100%\n );\n border-radius: 85px 85px 0 0;\n filter: blur(25px);\n z-index: -1;\n}\n\n.btn {\n width: 140px;\n height: 60px;\n border-radius: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n box-shadow:\n -10px -10px 20px rgba(255, 255, 255, 1),\n 10px 10px 20px rgba(0, 0, 0, 0.25);\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.btn::before {\n content: \"\";\n position: absolute;\n inset: -3px;\n border-radius: 33px;\n padding: 3px;\n background: linear-gradient(\n 45deg,\n rgba(0, 230, 160, 0) 0%,\n rgba(0, 230, 160, 0.4) 25%,\n rgba(0, 230, 160, 1) 50%,\n rgba(0, 230, 160, 0.4) 75%,\n rgba(0, 230, 160, 0) 100%\n );\n background-size: 200% 200%;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n animation: rotate-gradient 3s linear infinite;\n pointer-events: none;\n}\n\n@keyframes rotate-gradient {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n.btn::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 20%;\n right: 20%;\n height: 25%;\n border-radius: 30px 30px 0 0;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.3) 0%,\n transparent 100%\n );\n pointer-events: none;\n}\n\n.btn span {\n font-size: 15px;\n font-weight: 900;\n letter-spacing: 5px;\n color: #00cc8e;\n text-shadow:\n 1px 1px 2px rgba(255, 255, 255, 0.8),\n -1px -1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 1;\n transition: all 0.3s ease;\n}\n\n.btn-text-stop {\n display: none;\n}\n\n.roll-toggle:checked ~ .controls .btn {\n background: linear-gradient(180deg, #ff3366 0%, #ee2255 100%);\n animation: pulse-neuro 0.8s ease-in-out infinite;\n}\n\n@keyframes pulse-neuro {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.02);\n }\n}\n\n.roll-toggle:checked ~ .controls .btn::before {\n background: linear-gradient(\n 45deg,\n rgba(255, 51, 102, 0) 0%,\n rgba(255, 51, 102, 0.4) 25%,\n rgba(255, 51, 102, 1) 50%,\n rgba(255, 51, 102, 0.4) 75%,\n rgba(255, 51, 102, 0) 100%\n );\n background-size: 200% 200%;\n animation: rotate-gradient 2s linear infinite;\n}\n\n.roll-toggle:checked ~ .controls .btn span {\n color: #fff;\n}\n\n.roll-toggle:checked ~ .controls .btn-text {\n display: none;\n}\n\n.roll-toggle:checked ~ .controls .btn-text-stop {\n display: block;\n}\n\n.btn:active {\n transform: scale(0.98);\n box-shadow:\n inset -4px -4px 12px rgba(0, 0, 0, 0.2),\n inset 4px 4px 12px rgba(255, 255, 255, 0.5);\n}\n"}

blue-fireant-54

👁 实时预览

📝 源代码