more ani
This commit is contained in:
12
src/App.css
12
src/App.css
@@ -617,7 +617,7 @@
|
||||
|
||||
.save-leaf {
|
||||
position: absolute;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.65rem;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
animation: save-leaf-float 1.9s ease-out forwards;
|
||||
@@ -629,10 +629,10 @@
|
||||
transform: translateY(0) translateX(0) rotate(0deg) scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
12% { opacity: 1; transform: translateY(-18px) translateX(calc(var(--leaf-dx) * 0.1)) rotate(calc(var(--leaf-rot) * 0.1)) scale(1); }
|
||||
12% { opacity: 1; transform: translateY(-27px) translateX(calc(var(--leaf-dx) * 0.1)) rotate(calc(var(--leaf-rot) * 0.1)) scale(1); }
|
||||
85% { opacity: 0.5; }
|
||||
100% {
|
||||
transform: translateY(-190px) translateX(var(--leaf-dx)) rotate(var(--leaf-rot)) scale(0.4);
|
||||
transform: translateY(-285px) translateX(var(--leaf-dx)) rotate(var(--leaf-rot)) scale(0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -644,13 +644,13 @@
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.25rem;
|
||||
min-height: 44px;
|
||||
padding: 0 1.875rem;
|
||||
min-height: 66px;
|
||||
border-radius: 100px;
|
||||
background: #f0fdf4;
|
||||
border: 1.5px solid #bbf7d0;
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1.3125rem;
|
||||
font-weight: 600;
|
||||
color: #15803d;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -19,14 +19,14 @@ const AFFIRMATIONS = [
|
||||
]
|
||||
|
||||
const SAVE_LEAVES = [
|
||||
{ left: -55, dx: -20, rot: -25, delay: 0.0, emoji: '🌱' },
|
||||
{ left: -30, dx: -8, rot: 15, delay: 0.08, emoji: '🌿' },
|
||||
{ left: -10, dx: -15, rot: -10, delay: 0.04, emoji: '🌱' },
|
||||
{ left: 5, dx: 12, rot: 20, delay: 0.12, emoji: '🍃' },
|
||||
{ left: 25, dx: 18, rot: -18, delay: 0.06, emoji: '🌿' },
|
||||
{ left: 45, dx: 25, rot: 12, delay: 0.18, emoji: '🌱' },
|
||||
{ left: -42, dx: -22, rot: 28, delay: 0.22, emoji: '🍃' },
|
||||
{ left: 18, dx: 10, rot: -22, delay: 0.28, emoji: '🌿' },
|
||||
{ left: -80, dx: -30, rot: -25, delay: 0.0, emoji: '🌱' },
|
||||
{ left: -45, dx: -12, rot: 15, delay: 0.08, emoji: '🌿' },
|
||||
{ left: -15, dx: -22, rot: -10, delay: 0.04, emoji: '🌱' },
|
||||
{ left: 8, dx: 18, rot: 20, delay: 0.12, emoji: '🍃' },
|
||||
{ left: 38, dx: 27, rot: -18, delay: 0.06, emoji: '🌿' },
|
||||
{ left: 68, dx: 38, rot: 12, delay: 0.18, emoji: '🌱' },
|
||||
{ left: -62, dx: -33, rot: 28, delay: 0.22, emoji: '🍃' },
|
||||
{ left: 25, dx: 15, rot: -22, delay: 0.28, emoji: '🌿' },
|
||||
]
|
||||
|
||||
export default function HomePage() {
|
||||
|
||||
Reference in New Issue
Block a user