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"> <a href="/computer-beantragen">
<h3>Computer bekommen</h3> <h3>Computer bekommen</h3>
<svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175"> <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> <g>
<path d="M188 63h-28a2 2 0 1 0 0 5h28a2 2 0 1 0 0-5"/> <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"/> <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; flex-direction: row;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
bottom: layout.$huge-gap; margin-top: #{-1 * layout.$huge-gap};
} }
&:not(:first-of-type) { &:not(:first-of-type) {
@ -104,6 +104,10 @@
.emphasis { .emphasis {
transition: motion.$gentle transform; transition: motion.$gentle transform;
&.sun {
transform-origin: 50% 50%;
}
&.heart-left { &.heart-left {
transform-origin: top 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 { .heart-left {
$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5) $final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
rotate(-25deg); rotate(-25deg);