mirror of
https://github.com/aljazceru/landscape-template.git
synced 2025-12-27 19:24:18 +01:00
78 lines
1.6 KiB
CSS
78 lines
1.6 KiB
CSS
.vote_button {
|
|
--scale: 0;
|
|
transition: background-color 1s;
|
|
background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%));
|
|
}
|
|
|
|
.vote_counter {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 110%;
|
|
color: hsl(25, 100%, 50%);
|
|
font-weight: bold;
|
|
font-size: 21px;
|
|
will-change: transform;
|
|
opacity: min(calc(var(--scale) * 1), 1);
|
|
transform: translate(-50%, max(calc(-1px * var(--scale) / 10), -30px))
|
|
scale(calc(1 + min(var(--scale) / 150, 2)));
|
|
text-shadow: 0 0 4px hsl(25, 100%, 50%);
|
|
}
|
|
|
|
.spark {
|
|
position: absolute;
|
|
bottom: 46%;
|
|
left: calc(var(--offsetX) * 1%);
|
|
transform: scale(var(--scale));
|
|
opacity: 0;
|
|
will-change: transform;
|
|
|
|
animation-name: fly-spark-1;
|
|
animation-duration: calc(var(--animationSpeed) * 1s);
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
filter: drop-shadow(0 0 4px);
|
|
}
|
|
|
|
@keyframes fly_spark_1 {
|
|
0% {
|
|
transform: translate(0, 0) scale(var(--scale));
|
|
opacity: 1;
|
|
}
|
|
|
|
33% {
|
|
transform: translate(12px, -70px) scale(var(--scale));
|
|
}
|
|
|
|
66% {
|
|
transform: translate(0, -140px) scale(var(--scale));
|
|
opacity: 0.6;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(6px, -200px) scale(var(--scale));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fly_spark_2 {
|
|
0% {
|
|
transform: translate(0, 0) scale(var(--scale));
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-10px, -80px) scale(var(--scale));
|
|
}
|
|
|
|
80% {
|
|
transform: translate(-4px, -140px) scale(var(--scale));
|
|
opacity: 0.6;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-6px, -160px) scale(var(--scale));
|
|
opacity: 0;
|
|
}
|
|
}
|