glitch-countdown/dist/main.css
2023-10-30 14:06:08 +01:00

273 lines
No EOL
5 KiB
CSS

@font-face {
font-family: "SourceCodePro";
src: url('fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "SourceCodePro";
src: url('fonts/SourceCodePro-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
* {
font-family: "SourceCodePro", sans-serif;
}
body {
background-color: black;
}
header h1,
header h2 {
display: inline-block;
font-size: 5vw;
color: white;
margin: 0;
}
header h1 {}
header h2 {
font-style: italic;
color: grey;
animation: glitchTitle 1s linear infinite;
}
header h2:before, header h2:after {
content: attr(data-text);
position: absolute;
left: 0;
}
header h2:before {
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
header h2:after {
z-index: -1;
animation: glitchBottom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
#countdown {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85vw;
height: 30vw;
}
#countdown .part {
display: inline-block;
position: relative;
padding-top: 3vw;
}
#countdown * {
font-size: 9vw;
color: white;
}
#countdown .separator {
font-size: 12vw;
opacity: 1;
transition: opacity 0.1s;
}
#countdown.blink .separator {
opacity: 0;
}
#countdown input {
width: 11.2vw;
text-align: center;
height: 9.6vw;
background: transparent;
border: solid white;
transition: border 0.2s;
font-variant-numeric: tabular-nums;
box-sizing: border-box;
}
#countdown.counting input {
border: black;
}
#countdown #days input {
width: 17vw;
}
#countdown button {
position: relative;
display: block;
background-color: #222;
color: white;
margin-top: 4.5vw;
width: 100%;
border-radius: 0.45vw;
border: solid 1px grey;
transition: background-color 0.2s, border 0.2s;
}
#countdown button:hover {
background-color: black;
border: 1px white solid;
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
animation: glitch 725ms infinite;
}
#countdown button .layer {
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
display: none;
}
#countdown button:hover .layer {
display: inline;
}
#countdown button .layer:first-of-type {
animation: glitch 500ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-0.04em, -0.03em);
opacity: 0.75;
}
#countdown button .layer:last-of-type {
animation: glitch 375ms infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(0.04em, 0.03em);
opacity: 0.75;
}
#countdown input:disabled {
background: transparent;
}
#countdown .up,
#countdown .down {
position: absolute;
line-height: 9vw;
width: 3.5vw;
text-align: center;
transition: opacity 0.2s;
opacity: 1;
left: calc(50% - 1.5vw);
transform: rotate(90deg);
cursor: pointer;
}
#countdown .up {
top: calc(-2.5vw - 0.6vw);
}
#countdown .down {
top: calc(10vw + 0.6vw);
}
#countdown.counting .up,
#countdown.counting .down {
opacity: 0;
}
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
}
15% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00;
}
16% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00;
}
49% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00;
}
50% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00;
}
99% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00;
}
100% {
text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
-0.04em -0.025em 0 #fffc00;
}
}
@keyframes glitchTitle {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
@keyframes glitchTop {
2%,
64% {
transform: translate(2px, -2px);
}
4%,
60% {
transform: translate(-2px, 2px);
}
62% {
transform: translate(13px, -1px) skew(-13deg);
}
}
@keyframes glitchBottom {
2%,
64% {
transform: translate(-2px, 0);
}
4%,
60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}