{"html":"

\n\n

ROLEX

OYSTER PERPETUAL

DATEJUST

\n\n

\n SUPERLATIVE CHRONOMETER
OFFICIALLY CERTIFIED\n

\n\n

\n\n","css":".container {\n --bg: #020617;\n --steel: #cbd5e1;\n --steel-light: #f8fafc;\n --steel-dark: #475569;\n --dial-color: #0f172a;\n --gold: #d4af37;\n --lume: #fcfcfc;\n --rolex-green: #006039;\n\n --watch-size: 380px;\n --dial-size: 280px;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n\n margin: 0;\n min-height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg);\n background-image: radial-gradient(\n circle at 15% 15%,\n #1e293b 0%,\n transparent 40%\n ),\n radial-gradient(circle at 85% 85%, #020617 0%, transparent 40%);\n font-family: \"Inter\", sans-serif;\n overflow: hidden;\n}\n\n.watch-container {\n position: relative;\n width: var(--watch-size);\n height: var(--watch-size);\n perspective: 2500px;\n}\n\n.strap {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 170px;\n height: 220px;\n background: linear-gradient(90deg, #334155 0%, #94a3b8 50%, #334155 100%);\n border-radius: 4px;\n z-index: 1;\n box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);\n}\n.strap.top {\n top: -160px;\n clip-path: polygon(0% 100%, 100% 100%, 85% 0%, 15% 0%);\n}\n.strap.bottom {\n bottom: -160px;\n clip-path: polygon(15% 100%, 85% 100%, 100% 0%, 0% 0%);\n}\n\n.watch-case {\n position: relative;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 30% 30%,\n var(--steel-light) 0%,\n var(--steel) 60%,\n var(--steel-dark) 100%\n );\n border-radius: 50%;\n z-index: 10;\n box-shadow:\n 0 70px 120px rgba(0, 0, 0, 0.8),\n inset 0 2px 2px rgba(255, 255, 255, 0.9),\n inset 0 -5px 25px rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #94a3b8;\n}\n\n.fluted-bezel {\n position: absolute;\n inset: 6px;\n border-radius: 50%;\n background: repeating-conic-gradient(\n from 0.5deg,\n #f8fafc 0deg 1deg,\n #94a3b8 1.5deg 2.5deg,\n #475569 3deg 4deg\n );\n z-index: 11;\n box-shadow:\n inset 0 0 15px rgba(0, 0, 0, 0.6),\n 0 5px 12px rgba(0, 0, 0, 0.5);\n}\n\n.rehaut {\n position: absolute;\n inset: 24px;\n background: radial-gradient(circle, #f8fafc 0%, #cbd5e1 100%);\n border-radius: 50%;\n z-index: 12;\n box-shadow:\n inset 0 15px 30px rgba(0, 0, 0, 0.5),\n inset 0 -5px 10px rgba(255, 255, 255, 0.6);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.main-crown {\n position: absolute;\n right: -14px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 52px;\n background: linear-gradient(to bottom, #475569, #f8fafc, #475569);\n border-radius: 6px;\n border: 1.5px solid #1e293b;\n z-index: 5;\n box-shadow: 6px 0 15px rgba(0, 0, 0, 0.4);\n}\n.main-crown::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.2) 0,\n rgba(0, 0, 0, 0.2) 1px,\n transparent 1px,\n transparent 3px\n );\n border-radius: 4px;\n}\n\n.dial {\n width: var(--dial-size);\n height: var(--dial-size);\n background: radial-gradient(circle at center, #1e293b 0%, #080c14 100%);\n border-radius: 50%;\n position: relative;\n z-index: 20;\n box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);\n border: 4px solid #000;\n overflow: hidden;\n}\n\n.sunburst {\n position: absolute;\n inset: -100%;\n background: conic-gradient(\n from 0deg,\n transparent 0%,\n rgba(255, 255, 255, 0.02) 20%,\n transparent 40%,\n rgba(255, 255, 255, 0.02) 60%,\n transparent 80%,\n transparent 100%\n );\n animation: rotateSun 80s linear infinite;\n pointer-events: none;\n}\n@keyframes rotateSun {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.marker {\n position: absolute;\n background: var(--lume);\n left: 50%;\n top: 10px;\n transform-origin: 50% 130px;\n border: 2px solid #94a3b8;\n box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);\n z-index: 25;\n}\n.m-round {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transform: translateX(-50%);\n}\n.m-baton {\n width: 10px;\n height: 20px;\n border-radius: 2px;\n transform: translateX(-50%);\n}\n.m-12 {\n width: 24px;\n height: 24px;\n background: var(--lume);\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n border: none;\n top: 12px;\n}\n\n.ticks {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.tick {\n position: absolute;\n width: 1px;\n height: 6px;\n background: rgba(255, 255, 255, 0.3);\n left: 50%;\n top: 0;\n transform-origin: 50% 140px;\n}\n\n.date-aperture {\n position: absolute;\n right: 38px;\n top: 50%;\n transform: translateY(-50%);\n width: 34px;\n height: 24px;\n background: #fff;\n color: #000;\n font-family: \"JetBrains Mono\", monospace;\n font-weight: 800;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 30;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n\n.cyclops-lens {\n position: absolute;\n right: 28px;\n top: 50%;\n transform: translateY(-50%);\n width: 58px;\n height: 44px;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 50%\n );\n border-radius: 10px;\n z-index: 100;\n backdrop-filter: blur(1px);\n box-shadow:\n 0 15px 25px rgba(0, 0, 0, 0.5),\n inset 0 0 12px rgba(56, 189, 248, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.15);\n pointer-events: none;\n}\n\n.hand {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform-origin: bottom center;\n background: #fff;\n border: 1.2px solid #1e293b;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);\n z-index: 50;\n}\n\n.hour-hand {\n width: 10px;\n height: 85px;\n border-radius: 4px;\n background: linear-gradient(to right, #fff 50%, #e2e8f0 50%);\n animation: moveTime 43200s linear infinite;\n animation-delay: -20340s;\n}\n\n.mercedes-star {\n position: absolute;\n top: 15px;\n left: -6px;\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n border: 1.5px solid #1e293b;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.mercedes-star::before {\n content: \"\";\n width: 100%;\n height: 1px;\n background: #1e293b;\n position: absolute;\n transform: rotate(0deg);\n}\n.mercedes-star::after {\n content: \"\";\n width: 100%;\n height: 1px;\n background: #1e293b;\n position: absolute;\n transform: rotate(120deg);\n}\n.mercedes-star-3 {\n width: 100%;\n height: 1px;\n background: #1e293b;\n position: absolute;\n transform: rotate(240deg);\n}\n\n.minute-hand {\n width: 7px;\n height: 125px;\n border-radius: 3px;\n background: linear-gradient(to right, #fff 50%, #e2e8f0 50%);\n animation: moveTime 3600s linear infinite;\n animation-delay: -2340s;\n z-index: 55;\n}\n\n.second-hand-sweep {\n width: 1.5px;\n height: 135px;\n background: #fff;\n border: none;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n animation: moveTime 60s linear infinite;\n z-index: 60;\n}\n.second-hand-sweep::after {\n content: \"\";\n position: absolute;\n top: 105px;\n left: -4px;\n width: 10px;\n height: 10px;\n background: #fff;\n border-radius: 50%;\n border: 1px solid #1e293b;\n}\n\n.pin-assembly {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background: radial-gradient(circle, #fff 0%, #cbd5e1 100%);\n border-radius: 50%;\n z-index: 100;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);\n border: 1px solid #475569;\n}\n\n@keyframes moveTime {\n from {\n transform: translateX(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) rotate(360deg);\n }\n}\n\n.dial-labels {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 70px;\n z-index: 22;\n}\n.brand-name {\n font-size: 16px;\n font-weight: 800;\n color: #fff;\n letter-spacing: 2.5px;\n margin: 0;\n}\n.sub-brand {\n font-size: 8px;\n font-weight: 600;\n color: var(--text-dim);\n letter-spacing: 1.5px;\n margin: 2px 0;\n}\n\n.certification-text {\n position: absolute;\n bottom: 70px;\n width: 100%;\n text-align: center;\n font-size: 6px;\n color: rgba(255, 255, 255, 0.3);\n letter-spacing: 1.8px;\n font-weight: 700;\n text-transform: uppercase;\n line-height: 1.8;\n z-index: 22;\n}\n\n.crystal-edge {\n position: absolute;\n inset: 28px;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.05);\n box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);\n z-index: 90;\n pointer-events: none;\n}\n"}

helpless-mole-52

👁 实时预览

📝 源代码