aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-17 05:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: vote button shake effect, radial fill

Browse Source
This commit is contained in:
MTG2000
2022-05-17 12:23:17 +03:00
parent ba8916fb14
commit cb39e71b3b
2 changed files with 98 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/Components/VoteButton/styles.module.css
View File

@@ -1,9 +1,56 @@
.vote_button {
--scale: 0;
--increments: 0;
--offset: 0;
--bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
/* transition: background-color 1s; */
/* background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%)); */
}
.btn_content.clicked_1 {
animation: shake_1 0.2s 1 ease-out;
}
/* Same animation, two classes so that the animation restarts between clicks */
.btn_content.clicked_2 {
animation: shake_2 0.2s 1 ease-out;
}
@keyframes shake_1 {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg));
}
66% {
transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg));
}
100% {
transform: rotate(0deg);
}
}
@keyframes shake_2 {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg));
}
66% {
transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg));
}
100% {
transform: rotate(0deg);
}
}
.vote_counter {
position: absolute;
left: 50%;
@@ -17,14 +64,11 @@
}
.color_overlay {
--increments: 0;
--offset: 0;
--bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
position: absolute;
border-radius: inherit;
inset: 0;
overflow: hidden;
transition: all 0.1s;
}
.color_overlay::before {
@@ -52,6 +96,22 @@
transform: translateY(calc(-1 * var(--offset)));
}
@property --offset {
syntax: "<number>"; /* <- defined as type number for the transition to work */
initial-value: 0%;
inherits: false;
}
.color_overlay__radial::before {
top: 0;
right: 0;
background: radial-gradient(
circle at center,
var(--bg-color) var(--offset),
transparent calc(var(--offset) * 1.1)
);
}
@keyframes fly_value {
0% {
transform: translate(-50%, 0) scale(0.5);