offen.software/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg animation fold2

Browse Source
This commit is contained in:
Hendrik Niefeld 2024-01-17 20:30:42 +01:00
parent 1fe290837e
commit 3964217cf4
2 changed files with 236 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
website/theme/static/css/styles.css
View File

@ -120,13 +120,175 @@ IMAGES
/* ---------------------------------------------------
ANIMATION
----------------------------------------------------*/
.circle-orange {
animation: hideshow 2s ease infinite;
.a-040-010 circle {
animation: show-hide-14 14s ease infinite;
transform-origin: center;
}
@keyframes hideshow {
0% { opacity: 1; }
40% { opacity: 1; }
50% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
.a-040-010 rect {
opacity: 0;
animation: hide-show-14 14s ease infinite;
transform-origin: center;
}
/* ---------- */
.a-040-030 circle {
animation: show-hide-10 10s ease infinite;
transform-origin: center;
}
/* ---------- */
.a-040-070 circle {
animation: show-hide-16 16s ease infinite;
transform-origin: center;
}
.a-040-070 rect {
opacity: 0;
animation: hide-show-16 16s ease infinite;
transform-origin: center;
}
/* ---------- */
.a-040-090 rect {
animation: show-hide-10 10s ease infinite;
transform-origin: center;
}
/* ---------- */
.a-040-120 rect {
animation: show-hide-20 20s ease infinite;
transform-origin: center;
}
/* --- KEYFRAMES --- */
/* --- 10 ------------------ */
@keyframes show-hide-10 {
0% {
opacity: 1;
transform: scale(1);
}
22% {
opacity: 1;
transform: scale(1);
}
26% {
opacity: 0;
transform: scale(0.8);
}
46% {
opacity: 0;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1);
}
}
/* --- 14 ------------------ */
@keyframes show-hide-14 {
0% {
opacity: 1;
transform: scale(1);
}
46% {
opacity: 1;
transform: scale(1);
}
48% {
opacity: 0;
transform: scale(0.8);
}
98% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-show-14 {
0% {
opacity: 0;
transform: scale(0.8);
}
48% {
opacity: 0;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 1;
transform: scale(1);
}
98% {
opacity: 0;
transform: scale(0.8);
}
}
/* --- 16 ------------------ */
@keyframes show-hide-16 {
0% {
opacity: 1;
transform: scale(1);
}
56% {
opacity: 1;
transform: scale(1);
}
58% {
opacity: 0;
transform: scale(0.8);
}
98% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-show-16 {
0% {
opacity: 0;
transform: scale(0.8);
}
58% {
opacity: 0;
transform: scale(0.8);
}
60% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 1;
transform: scale(1);
}
98% {
opacity: 0;
transform: scale(0.8);
}
}
/* --- 20 ------------------ */
@keyframes show-hide-20 {
0% {
opacity: 1;
transform: scale(1);
}
74% {
opacity: 1;
transform: scale(1);
}
76% {
opacity: 0;
transform: scale(0.8);
}
86% {
opacity: 0;
transform: scale(0.8);
}
88% {
opacity: 1;
transform: scale(1);
}
}

81
website/theme/templates/index.html
View File

@ -79,9 +79,10 @@
<div class="flex flex-wrap justify-center">
<div class="db self-start pl5 pa0-l">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-orange" cx="32" cy="32" r="32" fill="#E9500A"/>
<div class="self-start pl5 pa0-l">
<svg class="a-040-010 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</svg>
</div>
@ -105,11 +106,23 @@
</p>
</div>
</div>
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
<div class="ml5 ma0-l">
<svg class="s-040-020 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
</svg>
</div>
</div>
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
<div class="self-end pr5 pa0-l">
<svg class="a-040-030 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
</svg>
</div>
<div class="self-end pr5 pa0-l">
<svg class="s-040-040 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</svg>
</div>
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
<div class="mw6-m center-m">
@ -128,7 +141,12 @@
</div>
</div>
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
<div class="self-start pl5 pa0-l">
<svg class="s-040-050 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
</svg>
</div>
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
<div class="mw6-m center-m">
@ -150,8 +168,19 @@
</div>
</div>
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
<div class="self-start pl5 pa0-l">
<svg class="s-040-060 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
</svg>
</div>
<div class="self-end pr5 pa0-l">
<svg class="a-040-070 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</svg>
</div>
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
@ -173,11 +202,24 @@
</p>
</div>
</div>
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
<div class="mr5 ma0-l">
<svg class="s-040-080 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
</svg>
</div>
</div>
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
<div class="self-start pr5 pa0-l">
<svg class="a-040-090 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</svg>
</div>
<div class="self-start pl5 pa0-l">
<svg class="s-040-100 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
</svg>
</div>
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
<div class="mw6-m center-m">
@ -199,11 +241,20 @@
</div>
</div>
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
<div class="self-end pr5 pa0-l">
<svg class="s-040-110 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
</svg>
</div>
<div class="self-start pr5 pa0-l">
<svg class="a-040-120 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="2" fill="#E9500A"/>
</svg>
</div>
</div>
</div>
</div>