پیشنمایش زنده
کد HTML
<div class="social-clock">
<div class="social-clock__list">
<button class="social-clock__button facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
></path>
</svg>
</button>
<button class="social-clock__button twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"
></path>
</svg>
</button>
<button class="social-clock__button instagram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
></path>
</svg>
</button>
<button class="social-clock__button reddit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"
></path>
</svg>
</button>
<button class="social-clock__button discord">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path
d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
></path>
</svg>
</button>
<button class="social-clock__button whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"
></path>
</svg>
</button>
<button class="social-clock__button github">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path>
</svg>
</button>
</div>
<button class="social-clock__trigger">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"
></path>
</svg>
</button>
</div>
کد CSS
/**********/
/* Config */
/**********/
.social-clock {
--count-buttons: 7;
--size-button: 4rem;
--size-clock: 16rem;
--size-padding: 0.5rem;
}
/*************/
/* Container */
/*************/
.social-clock {
--size: var(--size-clock);
border-radius: var(--size);
cursor: default;
height: var(--size);
pointer-events: none;
position: relative;
width: var(--size);
transition: all 0.5s linear;
}
.social-clock,
.social-clock__trigger {
align-items: center;
display: flex;
justify-content: center;
}
/***********/
/* Trigger */
/***********/
/* Trigger */
.social-clock__trigger {
--size: var(--size-button);
background: #000;
border: none;
border-radius: var(--size);
height: var(--size);
pointer-events: all;
width: var(--size);
z-index: 3;
}
/* Trigger - Icon */
.social-clock__trigger svg {
--size: calc(0.65 * var(--size-button));
fill: #fff;
height: var(--size);
width: var(--size);
padding-right: calc(0.05 * var(--size-button));
}
/***********/
/* Buttons */
/***********/
/* Wrapper */
.social-clock__list {
--size: calc(var(--size-button) + var(--size-padding));
border-radius: inherit;
height: var(--size);
left: calc(50% - var(--size) / 2);
pointer-events: all;
position: absolute;
top: calc(50% - var(--size) / 2);
width: var(--size);
transition:
all 0.3s ease-in-out,
transform 0.3s linear;
}
/* Wrapper - Interactions */
.social-clock:hover .social-clock__list {
--size: 100%;
transform: rotate(360deg);
}
/* Button */
.social-clock__button {
--angle: calc(var(--index, 0) * 360deg / var(--count-buttons));
--height: calc(100% - var(--size-padding) * 2);
--size: var(--size-button);
background: none;
border: none;
border-radius: var(--size);
box-sizing: content-box;
cursor: pointer;
height: var(--height);
left: calc(50% - var(--size) / 2);
pointer-events: none;
position: absolute;
top: calc(50% - var(--height) / 2);
transform: rotate(var(--angle));
width: var(--size);
}
/* Button - Background */
.social-clock__button::after,
.social-clock__button::before {
--size: var(--size-button);
border-radius: inherit;
box-sizing: border-box;
content: "";
left: calc(50% - var(--size) / 2);
position: absolute;
width: var(--size);
}
/* Button - Background - Icon */
.social-clock__button::before {
--fill-opacity: 0.5;
background: rgba(var(--color), var(--fill-opacity));
height: var(--size);
pointer-events: all;
top: 0;
transition: background 0.3s linear;
}
/* Button - Background - Interactions */
.social-clock:hover .social-clock__button::before {
background: rgba(0, 0, 0, var(--fill-opacity));
}
.social-clock__button::after {
--fill-opacity: 0.7;
--fill-size: 0;
--height: calc(50% + var(--size) / 2);
bottom: calc(100% - var(--height));
box-shadow: inset 0 var(--fill-size) 0 rgba(var(--color), var(--fill-opacity));
height: var(--height);
pointer-events: none;
transition: box-shadow 0.3s ease-in-out;
}
/* Button - Interactions */
.social-clock__button:hover::after {
--fill-size: calc(-0.5 * (var(--size-clock) + var(--size)));
pointer-events: all;
}
.social-clock__button:active::after {
--fill-opacity: 1;
}
/* Button - Icon */
.social-clock__button svg {
--padding: calc((var(--size-button) - var(--size)) / 2);
--size: calc(0.65 * var(--size-button));
fill: #fff;
height: var(--size);
left: var(--padding);
position: absolute;
top: var(--padding);
transform: rotate(calc(-1 * var(--angle)));
width: var(--size);
z-index: 2;
}
/* Button - Socials */
.social-clock__button.discord {
--color: 88, 101, 242;
}
.social-clock__button.facebook {
--color: 24, 119, 242;
}
.social-clock__button.github {
--color: 0, 0, 0;
}
.social-clock__button.instagram {
--color: 225, 48, 108;
}
.social-clock__button.line {
--color: 0, 195, 0;
}
.social-clock__button.linkedin {
--color: 10, 102, 194;
}
.social-clock__button.reddit {
--color: 255, 87, 0;
}
.social-clock__button.tiktok {
--color: 0, 0, 0;
}
.social-clock__button.twitch {
--color: 145, 70, 255;
}
.social-clock__button.twitter {
--color: 29, 161, 242;
}
.social-clock__button.whatsapp {
--color: 37, 211, 102;
}
.social-clock__button.youtube {
--color: 205, 32, 31;
}
/* Button - Order */
.social-clock__button:nth-child(1) {
--index: 0;
}
.social-clock__button:nth-child(2) {
--index: 1;
}
.social-clock__button:nth-child(3) {
--index: 2;
}
.social-clock__button:nth-child(4) {
--index: 3;
}
.social-clock__button:nth-child(5) {
--index: 4;
}
.social-clock__button:nth-child(6) {
--index: 5;
}
.social-clock__button:nth-child(7) {
--index: 6;
}
.social-clock__button:nth-child(8) {
--index: 7;
}
.social-clock__button:nth-child(9) {
--index: 8;
}
.social-clock__button:nth-child(10) {
--index: 9;
}