angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add animation to the new homepage icon

Browse source
This commit is contained in:
Yannik Rödel 2022-03-21 16:37:57 +01:00
parent ca2c2863c1
commit a5c1f44246
2 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/content/index.md
View file

@ -20,6 +20,11 @@ Wir schaffen Zugang in die digitale Welt
<a href="/computer-beantragen">
<h3>Computer bekommen</h3>
<svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175">
<linearGradient id="emphasis-gradient-sun" class="emphasis-gradient">
<stop offset="0%" />
<stop offset="100%" />
</linearGradient>
<circle class="emphasis sun" cx="100" cy="85" r="35" fill="url(#emphasis-gradient-sun)" />
<g>
<path d="M188 63h-28a2 2 0 1 0 0 5h28a2 2 0 1 0 0-5"/>
<path d="M188 76h-28a2 2 0 1 0 0 5h28a2 2 0 1 0 0-5"/>

25
src/styles/components/_actions.scss
View file

@ -76,7 +76,7 @@
flex-direction: row;
justify-content: space-between;
position: relative;
bottom: layout.$huge-gap;
margin-top: #{-1 * layout.$huge-gap};
}
&:not(:first-of-type) {
@ -104,6 +104,10 @@
.emphasis {
transition: motion.$gentle transform;
&.sun {
transform-origin: 50% 50%;
}
&.heart-left {
transform-origin: top left;
}
@ -161,6 +165,25 @@
}
}
.sun {
$final-transformation: translateX(20%) translateY(10%) scale(3.4);
@keyframes action-icon-sun {
0% {
transform: none;
}
50% {
transform: translateX(5%) translateY(10%) scale(1.7);
}
100% {
transform: $final-transformation;
}
}
transform: $final-transformation;
animation: motion.$gentle 0s 1 normal backwards running action-icon-sun;
}
.heart-left {
$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
rotate(-25deg);