{"html":"\n","css":"/**********/\n/* Config */\n/**********/\n\n.social-clock {\n --count-buttons: 7;\n --size-button: 4rem;\n --size-clock: 16rem;\n --size-padding: 0.5rem;\n}\n\n/*************/\n/* Container */\n/*************/\n\n.social-clock {\n --size: var(--size-clock);\n\n border-radius: var(--size);\n cursor: default;\n height: var(--size);\n pointer-events: none;\n position: relative;\n width: var(--size);\n transition: all 0.5s linear;\n}\n.social-clock,\n.social-clock__trigger {\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n/***********/\n/* Trigger */\n/***********/\n\n/* Trigger */\n.social-clock__trigger {\n --size: var(--size-button);\n\n background: #000;\n border: none;\n border-radius: var(--size);\n height: var(--size);\n pointer-events: all;\n width: var(--size);\n z-index: 3;\n}\n/* Trigger - Icon */\n.social-clock__trigger svg {\n --size: calc(0.65 * var(--size-button));\n\n fill: #fff;\n height: var(--size);\n width: var(--size);\n padding-right: calc(0.05 * var(--size-button));\n}\n\n/***********/\n/* Buttons */\n/***********/\n\n/* Wrapper */\n.social-clock__list {\n --size: calc(var(--size-button) + var(--size-padding));\n\n border-radius: inherit;\n height: var(--size);\n left: calc(50% - var(--size) / 2);\n pointer-events: all;\n position: absolute;\n top: calc(50% - var(--size) / 2);\n width: var(--size);\n transition:\n all 0.3s ease-in-out,\n transform 0.3s linear;\n}\n/* Wrapper - Interactions */\n.social-clock:hover .social-clock__list {\n --size: 100%;\n\n transform: rotate(360deg);\n}\n\n/* Button */\n.social-clock__button {\n --angle: calc(var(--index, 0) * 360deg / var(--count-buttons));\n --height: calc(100% - var(--size-padding) * 2);\n --size: var(--size-button);\n\n background: none;\n border: none;\n border-radius: var(--size);\n box-sizing: content-box;\n cursor: pointer;\n height: var(--height);\n left: calc(50% - var(--size) / 2);\n pointer-events: none;\n position: absolute;\n top: calc(50% - var(--height) / 2);\n transform: rotate(var(--angle));\n width: var(--size);\n}\n/* Button - Background */\n.social-clock__button::after,\n.social-clock__button::before {\n --size: var(--size-button);\n\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n left: calc(50% - var(--size) / 2);\n position: absolute;\n width: var(--size);\n}\n/* Button - Background - Icon */\n.social-clock__button::before {\n --fill-opacity: 0.5;\n\n background: rgba(var(--color), var(--fill-opacity));\n height: var(--size);\n pointer-events: all;\n top: 0;\n transition: background 0.3s linear;\n}\n/* Button - Background - Interactions */\n.social-clock:hover .social-clock__button::before {\n background: rgba(0, 0, 0, var(--fill-opacity));\n}\n.social-clock__button::after {\n --fill-opacity: 0.7;\n --fill-size: 0;\n --height: calc(50% + var(--size) / 2);\n\n bottom: calc(100% - var(--height));\n box-shadow: inset 0 var(--fill-size) 0 rgba(var(--color), var(--fill-opacity));\n height: var(--height);\n pointer-events: none;\n transition: box-shadow 0.3s ease-in-out;\n}\n/* Button - Interactions */\n.social-clock__button:hover::after {\n --fill-size: calc(-0.5 * (var(--size-clock) + var(--size)));\n\n pointer-events: all;\n}\n.social-clock__button:active::after {\n --fill-opacity: 1;\n}\n\n/* Button - Icon */\n.social-clock__button svg {\n --padding: calc((var(--size-button) - var(--size)) / 2);\n --size: calc(0.65 * var(--size-button));\n\n fill: #fff;\n height: var(--size);\n left: var(--padding);\n position: absolute;\n top: var(--padding);\n transform: rotate(calc(-1 * var(--angle)));\n width: var(--size);\n z-index: 2;\n}\n/* Button - Socials */\n.social-clock__button.discord {\n --color: 88, 101, 242;\n}\n.social-clock__button.facebook {\n --color: 24, 119, 242;\n}\n.social-clock__button.github {\n --color: 0, 0, 0;\n}\n.social-clock__button.instagram {\n --color: 225, 48, 108;\n}\n.social-clock__button.line {\n --color: 0, 195, 0;\n}\n.social-clock__button.linkedin {\n --color: 10, 102, 194;\n}\n.social-clock__button.reddit {\n --color: 255, 87, 0;\n}\n.social-clock__button.tiktok {\n --color: 0, 0, 0;\n}\n.social-clock__button.twitch {\n --color: 145, 70, 255;\n}\n.social-clock__button.twitter {\n --color: 29, 161, 242;\n}\n.social-clock__button.whatsapp {\n --color: 37, 211, 102;\n}\n.social-clock__button.youtube {\n --color: 205, 32, 31;\n}\n\n/* Button - Order */\n.social-clock__button:nth-child(1) {\n --index: 0;\n}\n.social-clock__button:nth-child(2) {\n --index: 1;\n}\n.social-clock__button:nth-child(3) {\n --index: 2;\n}\n.social-clock__button:nth-child(4) {\n --index: 3;\n}\n.social-clock__button:nth-child(5) {\n --index: 4;\n}\n.social-clock__button:nth-child(6) {\n --index: 5;\n}\n.social-clock__button:nth-child(7) {\n --index: 6;\n}\n.social-clock__button:nth-child(8) {\n --index: 7;\n}\n.social-clock__button:nth-child(9) {\n --index: 8;\n}\n.social-clock__button:nth-child(10) {\n --index: 9;\n}\n"}

brave-vampirebat-94

👁 实时预览

📝 源代码