Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
@keyframes clock-hand-spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#clockContainer {
position: fixed;
top: 100px;
left: 16px;
width: 48px;
height: 48px;
border: 1px solid var(--color-primary1);
background: white;
border-radius: 25px;
z-index: 650000;
overflow: hidden;
transition: all 300ms;
}
#clockInnerContainer {
display: flex;
width: 192px;
height: 48px;
align-items: center;
}
#clockAnalogContainer {
width: 50px;
height: 50px;
border-radius: 50%;
margin: -2px;
position: relative;
border: 1px solid var(--color-primary1);
transition: all 300ms;
}
#clockAnalogHour {
width: 2px;
border-radius: 2px;
background: black;
height: 35%;
position: absolute;
top: 25%;
left: calc(50% - 1px);
transform-origin: 50% 71.4%;
animation: clock-hand-spin 43200s infinite linear;
}
#clockAnalogMinute {
width: 2px;
border-radius: 2px;
background: black;
height: 45%;
position: absolute;
top: 15%;
left: calc(50% - 1px);
transform-origin: 50% 77.8%;
animation: clock-hand-spin 3600s infinite linear;
}
#clockAnalogSecond {
width: 2px;
background: var(--color-primary1);
-webkit-mask-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75%);
mask-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75%);
height: 50%;
position: absolute;
top: 10%;
left: calc(50% - 1px);
transform-origin: 50% 80%;
animation: clock-hand-spin 60s infinite linear;
}
#clockDigitalContainer {
flex: 1;
font-variant-numeric: tabular-nums;
font-weight: 500;
font-size: 1.5rem;
text-align: center;
}
#clockContainer:hover {
width: 192px;
border-radius: 4px;
}
#clockContainer:hover #clockAnalogContainer {
width: 38px;
height: 38px;
margin: 4px;
}
@media screen and (max-width: 750px) {
#clockContainer {
top: 75px;
}
}
