animation-2 #22
@ -120,6 +120,9 @@ IMAGES
|
||||
/* ---------------------------------------------------
|
||||
ANIMATION
|
||||
----------------------------------------------------*/
|
||||
|
||||
|
||||
/* --- 040 ------------------ */
|
||||
.a-040-010 circle {
|
||||
animation: show-hide-14 14s ease infinite;
|
||||
transform-origin: center;
|
||||
|
66
website/theme/static/images/gfx-index-animation.svg
Normal file
66
website/theme/static/images/gfx-index-animation.svg
Normal file
@ -0,0 +1,66 @@
|
||||
<svg class="db" width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<rect id="a-010-040" x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<rect id="a-010-020" x="320" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
<rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<rect id="a-010-060" x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||
|
||||
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
|
||||
|
||||
<circle id="my-circle" cx="32" cy="96" r="32" fill="#4B1202">
|
||||
<animate attributeName="opacity"
|
||||
dur="10s"
|
||||
values="1; 1; 0; 0; 1; 1"
|
||||
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
|
||||
repeatCount="indefinite"/>
|
||||
<animate attributeName="r"
|
||||
dur="10s"
|
||||
values="32; 32; 26; 26; 32; 32"
|
||||
keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
|
||||
repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
|
||||
<circle cx="160" cy="416" r="32" fill="#4B1202"/>
|
||||
<circle cx="480" cy="416" r="32" fill="#4B1202"/>
|
||||
<circle cx="672" cy="416" r="32" fill="#4B1202"/>
|
||||
<circle cx="224" cy="352" r="32" fill="#4B1202"/>
|
||||
<circle cx="416" cy="352" r="32" fill="#4B1202"/>
|
||||
|
||||
<circle id="a-010-050" cx="608" cy="352" r="32" fill="#4B1202"/>
|
||||
|
||||
<circle cx="96" cy="288" r="32" fill="#4B1202"/>
|
||||
<circle cx="160" cy="288" r="32" fill="#4B1202"/>
|
||||
<circle cx="416" cy="288" r="32" fill="#4B1202"/>
|
||||
<circle cx="352" cy="224" r="32" fill="#4B1202"/>
|
||||
<circle cx="672" cy="224" r="32" fill="#4B1202"/>
|
||||
<circle cx="224" cy="160" r="32" fill="#4B1202"/>
|
||||
|
||||
<circle id="a-010-030" cx="416" cy="160" r="32" fill="#4B1202"/>
|
||||
|
||||
<circle cx="672" cy="160" r="32" fill="#4B1202"/>
|
||||
<circle cx="160" cy="96" r="32" fill="#4B1202"/>
|
||||
<circle cx="288" cy="96" r="32" fill="#4B1202"/>
|
||||
<circle cx="544" cy="96" r="32" fill="#4B1202"/>
|
||||
<circle cx="672" cy="96" r="32" fill="#4B1202"/>
|
||||
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</svg>
|
After Width: | Height: | Size: 2.6 KiB |
@ -7,7 +7,9 @@
|
||||
|
||||
<div class="w-100 bgColorOrange">
|
||||
<div class="mw7 center">
|
||||
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
|
||||
|
||||
<img src="/theme/images/gfx-index-animation.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user