Better shapes animations
This commit is contained in:
parent
b0b62bc062
commit
d5dda0b462
@ -783,6 +783,7 @@ body#default
|
||||
#square,
|
||||
#triangle {
|
||||
position: absolute;
|
||||
transition: transform 2000ms ease-in-out;
|
||||
}
|
||||
|
||||
#semicircle {
|
||||
@ -792,6 +793,14 @@ body#default
|
||||
border-radius: 10dvw 10dvw 0 0;
|
||||
left: 52dvw;
|
||||
width: 20dvw;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(6deg) translateY(0.25dvh);
|
||||
|
||||
+ #square {
|
||||
transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#square {
|
||||
@ -799,6 +808,10 @@ body#default
|
||||
height: 12dvw;
|
||||
width: 12dvw;
|
||||
bottom: 0;
|
||||
|
||||
&:has(+ #circle:hover) {
|
||||
transform: translateX(-0.125dvw);
|
||||
}
|
||||
}
|
||||
|
||||
#circle {
|
||||
@ -808,6 +821,10 @@ body#default
|
||||
bottom: 5dvh;
|
||||
left: 4dvw;
|
||||
width: 20dvw;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
#rectangle {
|
||||
@ -816,6 +833,11 @@ body#default
|
||||
width: 36dvw;
|
||||
left: 2dvw;
|
||||
bottom: 0;
|
||||
transform-origin: 38%;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-6deg) translateY(-0.125dvh);
|
||||
}
|
||||
}
|
||||
|
||||
#triangle {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user