{"html":"

\n \n

\n","css":".content__item {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n pointer-events: none;\n}\n\n.button {\n pointer-events: auto;\n cursor: pointer;\n background: #e7e7e7;\n border: none;\n padding: 1.5rem 3rem;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n position: relative;\n display: inline-block;\n}\n\n.button::before,\n.button::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.marquee {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n overflow: hidden;\n pointer-events: none;\n}\n\n.marquee__inner {\n width: fit-content;\n display: flex;\n position: relative;\n --offset: 1rem;\n --move-initial: calc(-25% + var(--offset));\n --move-final: calc(-50% + var(--offset));\n transform: translate3d(var(--move-initial), 0, 0);\n animation: marquee 1s linear infinite;\n animation-play-state: paused;\n opacity: 0;\n}\n\n.button--atlas:hover .marquee__inner {\n animation-play-state: running;\n opacity: 1;\n transition-duration: 0.4s;\n}\n\n.marquee span {\n text-align: center;\n white-space: nowrap;\n font-style: italic;\n padding: 1.5rem 0.5rem;\n}\n\n@keyframes marquee {\n 0% {\n transform: translate3d(var(--move-initial), 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--move-final), 0, 0);\n }\n}\n\n.button--kari {\n font-family: freight-display-pro, serif;\n font-weight: 900;\n font-size: 1.25rem;\n border-radius: 50%;\n border: 2px solid #000;\n}\n\n.button--kari > span {\n display: inline-block;\n transition: opacity 0.1s;\n}\n\n.button--kari:hover > span {\n opacity: 0;\n}\n\n.button--kari .marquee {\n transform: rotate(-2.75deg);\n}\n\n.button--kari:hover .marquee__inner {\n animation-play-state: running;\n opacity: 1;\n transition-duration: 0.6s;\n}\n"}

yellow-snake-72

👁 实时预览

📝 源代码