SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧 update sidebar

Browse Source
This commit is contained in:
landaiqing
2024-12-06 00:16:23 +08:00
parent 2a1bb215ac
commit dbdfd835bd
54 changed files with 1544 additions and 1525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue Normal file
View File

@@ -0,0 +1,459 @@
<script setup lang="ts">
import anime from 'animejs/lib/anime.es.js';
const planesCard = anime.timeline({
direction: 'forwards',
loop: true
});
planesCard.add({
targets: '#card2 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 0
}).add({
targets: '#plane1',
opacity: {
value: [0, 1],
duration: 100,
delay: 84
},
translateX: {
value: ['-199', '+888']
},
translateY: {
value: ['-36', '+404']
},
rotate: {
value: -12
},
scale: {
value: 0,
duration: 200,
delay: 300
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 541,
offset: 250
}).add({
targets: '#card1',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708
}).add({
targets: '#card3_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 625,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708,
translateY: ['-=257']
}).add({
targets: '#card3_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 780
}).add({
targets: '#card3 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 989
}).add({
targets: '#plane2',
opacity: {
value: [0, 1],
duration: 167,
delay: 84
},
scaleX: {
value: -1,
duration: 0
},
translateX: {
value: [-1620, -180]
},
translateY: {
value: [-78, 320]
},
rotate: {
value: -12,
duration: 500,
delay: 100
},
scale: {
value: 0,
duration: 250,
delay: 285
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 600,
offset: 1380
}).add({
targets: '#card2',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875
}).add({
targets: '#card4_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 1793,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875,
translateY: ['-=257']
}).add({
targets: '#card4_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 1957
});
</script>
<template>
<svg viewBox="0 0 2579 1132" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hello@zajno.com</title>
<defs>
<linearGradient x1="118.314446%" y1="48.8841826%" x2="-30.2984871%" y2="51.1919321%" id="linearGradient-1">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#839FFC" stop-opacity="0.9563" offset="5.509039%"></stop>
<stop stop-color="#849FFC" stop-opacity="0.9533" offset="5.884359%"></stop>
<stop stop-color="#8AA4FC" stop-opacity="0.8154" offset="23.03%"></stop>
<stop stop-color="#9CB1FD" stop-opacity="0.6239" offset="46.86%"></stop>
<stop stop-color="#BAC7FD" stop-opacity="0.4019" offset="74.47%"></stop>
<stop stop-color="#D3DAFE" stop-opacity="0.2445" offset="94.06%"></stop>
<stop stop-color="#F0F0FF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0334507%" y1="-143.800704%" x2="50.0334507%" y2="63.3151408%" id="linearGradient-2">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FFDE46" stop-opacity="0.1416" offset="15.24%"></stop>
<stop stop-color="#FFA764" stop-opacity="0.4337" offset="46.69%"></stop>
<stop stop-color="#FF916F" stop-opacity="0.5396" offset="58.08%"></stop>
<stop stop-color="#FF5782" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.8485923%" y1="72.7804172%" x2="49.8485923%" y2="-43.2541461%" id="linearGradient-3">
<stop stop-color="#F7CF83" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0154912%" y1="-52.011784%" x2="50.0154912%" y2="71.9581815%" id="linearGradient-4">
<stop stop-color="#FDFDFE" offset="0%"></stop>
<stop stop-color="#86DD87" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0074976%" y1="99.049164%" x2="50.0074976%" y2="-16.925746%" id="linearGradient-5">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FF57B0" offset="100%"></stop>
</linearGradient>
<rect id="path-6" x="0" y="0" width="615" height="851"></rect>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-44.8815257%" id="linearGradient-8">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-57.9189338%" id="linearGradient-9">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0078125%" y1="-14.3794118%" x2="50.0078125%" y2="84.3210478%" id="linearGradient-10">
<stop stop-color="#0025FF" offset="0%"></stop>
<stop stop-color="#00FFD7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="92.6689445%" y1="127.3586%" x2="11.4142528%" y2="14.4674737%" id="linearGradient-11">
<stop stop-color="#0025FF" offset="3.619557%"></stop>
<stop stop-color="#0025FF" stop-opacity="0.8587" offset="16.82%"></stop>
<stop stop-color="#0025FF" stop-opacity="0" offset="97.01%"></stop>
</linearGradient>
<linearGradient x1="114.073989%" y1="198.165562%" x2="-10.8913485%" y2="-38.4110424%" id="linearGradient-12">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#C9D3FE" offset="62.89%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="140.812842%" y1="110.913212%" x2="45.1242839%" y2="33.8259447%" id="linearGradient-13">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="101.805599%" y1="153.92944%" x2="40.0355701%" y2="46.5605817%" id="linearGradient-14">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
</defs>
<g id="planes" transform="translate(-6.000000, -47.000000)">
<g id="bg" transform="translate(1013.000000, 123.000000)" fill-rule="nonzero">
<g id="board-header">
<path
d="M615.5,94.5 L0.8,94.5 L0.8,12.8 C0.8,5.9 6.4,0.3 13.3,0.3 L603,0.3 C609.9,0.3 615.5,5.9 615.5,12.8 L615.5,94.5 Z"
id="header-bg" fill="url(#linearGradient-1)"></path>
<g id="buttons" transform="translate(38.000000, 33.000000)">
<circle id="Oval" fill="url(#linearGradient-2)" cx="14.7" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-3)" cx="63.2" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-4)" cx="111.6" cy="14.3" r="14.2"></circle>
</g>
</g>
<path
d="M603.586617,1065 L12.5121604,1065 C5.60544785,1065 -5.68434189e-14,1059.4 -5.68434189e-14,1052.5 L-5.68434189e-14,120 L616,120 L615.99868,1052.6 C616.098777,1059.4 610.493329,1065 603.586617,1065 Z"
id="board-bg" fill="url(#linearGradient-5)"></path>
</g>
<g id="cards-wrap" transform="translate(1013.000000, 243.000000)" mask="url(#mask-7)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<g id="Rectangle"></g>
<g id="cards" style="transform: translateY(-248.817px);">
<g id="card1" style="opacity: 0.0318414;">
<g transform="translate(38.000000, 97.000000)">
<g id="card1_bg">
<g id="Group" opacity="0.15">
<g></g>
</g>
<g id="Group"></g>
<path
d="M519.7,159.304348 L20.2,159.304348 C9.1,159.304348 0,150.360248 0,139.229814 L0,20.7701863 C0,9.73913043 9,0.695652174 20.2,0.695652174 L519.7,0.695652174 C530.8,0.695652174 539.9,9.63975155 539.9,20.7701863 L539.9,139.229814 C539.9,150.360248 530.8,159.304348 519.7,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card1_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card1_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
<g id="card1-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card1_icon">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card2" style="opacity: 1;">
<g transform="translate(38.000000, 354.000000)">
<g id="card2_bg">
<path
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card2_bg-white"
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card2-icon-wrap" transform="translate(42.000000, 24.844720)">
<g id="card2_icon">
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="54.757764"
rx="54.4" ry="54.0621118"></ellipse>
<g id="Group" transform="translate(5.000000, 17.888199)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.1118012 C77.9,25.5403727 70.8,25.4409938 67,30.1118012 L45.8,55.9503106 L28.2,43.2298137 C24.6,40.6459627 19.6,40.9440994 16.3,43.9254658 L-5.68434189e-14,58.8322981 C8.5,77.8136646 27.6,91.0310559 49.8,91.0310559 C73.7,91.0310559 94,75.7267081 101.3,54.4596273 L81.6,30.1118012 Z"></path>
<ellipse id="Oval" cx="37.7" cy="7.85093168" rx="7.5" ry="7.45341615"></ellipse>
</g>
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.757764" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
<g id="card2_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
</g>
</g>
</g>
<g id="card3">
<g transform="translate(38.000000, 611.000000)">
<g id="card3_bg">
<path
d="M519.796259,159.701863 L20.2037414,159.701863 C9.1016855,159.701863 0,150.735348 0,139.577017 L0,20.8204985 C0,9.76179579 9.00166698,0.695652174 20.2037414,0.695652174 L519.796259,0.695652174 C530.898315,0.695652174 540,9.66216784 540,20.8204985 L540,139.577017 C540,150.735348 530.898315,159.701863 519.796259,159.701863 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card3_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(1);"></path>
</g>
<g id="card3_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0.170117);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
</g>
<g id="card3-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card3_icon" transform="scale(0)"
style="transform: translateX(-2.21467px) translateY(-2.21467px) scale(1.06328);">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card4">
<g transform="translate(38.000000, 868.000000)">
<g id="card4_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card4_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(0);"></path>
</g>
<g id="card4-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card4_icon" transform="scale(0)" style="transform: translateX(35px) translateY(35px) scale(0);">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card4_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
<g id="card5">
<g transform="translate(38.000000, 1125.000000)">
<g id="card5_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card5_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card5-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card5_icon" transform="scale(0)">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card5_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
</g>
</g>
<g id="plane2-wrap" transform="translate(320.000000, 30.00000)">
<g id="plane2" fill-rule="nonzero"
style="opacity: 0; transform: scaleX(-1) translateX(-1620px) translateY(-78px) rotate(0deg) scale(1);">
<path
d="M832.927808,725.921924 L342.327808,31.8219235 C250.027808,-98.7780765 -111.072192,339.321924 46.3278083,403.821924 L832.927808,725.921924 Z"
fill="url(#linearGradient-11)" opacity="0.0458220109"
transform="translate(420.019183, 366.784851) rotate(1.000000) translate(-420.019183, -366.784851) "></path>
<polygon fill="url(#linearGradient-12)" points="832.3 734.9 680.2 679.8 697.9 616"></polygon>
<polygon fill="url(#linearGradient-13)" points="832.3 734.9 697.9 616 738.8 591.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="832.3 734.9 624.1 660.4 671.7 631.8"></polygon>
</g>
</g>
z
<g id="plane1-wrap" transform="translate(-320.000000, -30.00000)">
<g id="plane1" fill-rule="nonzero"
style="opacity: 1; transform: translateX(888px) translateY(404px) rotate(-12deg) scale(0);">
<path d="M826.3,718.9 L335.7,24.8 C243.4,-105.8 -117.7,332.3 39.7,396.8 L826.3,718.9 Z"
fill="url(#linearGradient-11)" opacity="0.0536345109"></path>
<polygon fill="url(#linearGradient-12)" points="826.3 718.9 674.2 663.8 691.9 600"></polygon>
<polygon fill="url(#linearGradient-13)" points="826.3 718.9 691.9 600 732.8 575.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="826.3 718.9 618.1 644.4 665.7 615.8"></polygon>
</g>
</g>
</g>
</svg>
</template>
<style scoped lang="scss" src="./index.scss">
</style>

24
src/components/AnimatedSvgIllustration/index.scss Normal file
View File

@@ -0,0 +1,24 @@
svg {
width: 100%;
height: auto;
}
#card1_bg-white, #card2_bg-white, #card3_bg-white, #card4_bg-white {
transform-origin: 2% 8%;
transform-style: preserve-3D;
}
#card3_bg-white,
#card4_bg-white,
#card5_bg-white {
transform: scale(0);
}
#plane1 {
transform-origin: 620px 580px;
}
#plane2 {
transform: scaleX(-1) translate(-1500px, -150px);
transform-origin: 500px 650px;
}

148
src/components/BackgroundAnimation/BackgroundAnimation.vue Normal file
View File

@@ -0,0 +1,148 @@
<script setup lang="ts">
</script>
<template>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</template>
<style scoped lang="scss">
.area {
background: var(--landing-background-color-main);
//background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
</style>

2
src/components/BoxDog/index.scss
View File

@@ -1,4 +1,4 @@
.container {
.container {
position: relative;
top: 50%;
left: 50%;

2
src/components/Clouds/index.scss
View File

@@ -1,6 +1,6 @@
.card-content {
z-index: 10;
width: 80%;
width: 800px;
position: absolute;
top: 50%;
left: 50%;

217
src/components/Folder/Folder.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<div class="folder-wrapper" @click="handleClick">
<div class="download" style="--scale-pages: 1; --scale-folder: 1;">
<svg class="folder-back" viewBox="0 0 48 48">
<path d="
M 3.50 7.50
C 3.50 5.29 5.28 3.50 7.49 3.50
C 13.17 3.50 23.18 3.50 26.00 3.50
C 30.00 3.50 28.00 6.00 32.00 6.00
C 34.21 6.00 37.87 6.00 40.71 6.00
C 42.93 6.00 44.73 7.82 44.71 10.04
L 44.54 25.04
C 44.52 27.24 42.74 29.00 40.54 29.00
H 7.50
C 5.29 29.00 3.50 27.21 3.50 25.00
V 7.50
Z
" fill="#32AF75"></path>
</svg>
<div class="page-1"></div>
<div class="page-2"></div>
<svg class="folder-front" viewBox="0 0 48 48">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#47DB99;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#2EA16D;stop-opacity:1"></stop>
</linearGradient>
</defs>
<path d="
M 2.36 24.31
C 2.17 23.09 3.11 22.00 4.34 22.00
H 40.90
C 41.80 22.00 42.33 23.00 41.83 23.75
L 41.40 24.40
C 41.16 24.76 41.16 25.24 41.40 25.60
V 25.60
C 41.73 26.10 42.40 26.23 42.90 25.90
L 43.50 25.50
V 25.50
C 44.75 24.88 46.17 25.93 45.94 27.31
L 43.57 41.17
C 43.24 43.09 41.57 44.50 39.63 44.50
H 8.93
C 6.95 44.50 5.28 43.06 4.97 41.11
L 2.36 24.31
Z
" fill="url(#gradient)"></path>
</svg>
</div>
</div>
</template>
<script setup lang="ts">
import {gsap} from 'gsap';
import {onMounted, ref} from 'vue';
const download = ref<Element | null>(null);
const folderFront = ref<Element | null>(null);
const playspeed = 1;
const keyframes = [
/* 0 */0.00, //s
/* 1 */0.20, //s
/* 2 */0.27, //s
/* 3 */0.35, //s
/* 4 */0.55, //s
/* 5 */2.00 //s
];
const timespan = (start, end) => ({
delay: keyframes[start] * (1 / playspeed),
duration: (keyframes[end] - keyframes[start]) * (1 / playspeed)
});
const handleClick = () => {
const page = document.createElement('div');
page.classList.add('page-2');
if (download.value) {
download.value.insertBefore(page, folderFront.value);
}
/* Page */
// Fall
gsap.fromTo(page, {
'--ratio-page-2-offset': 1,
'--ratio-page-2-height': 1
},
{
'--ratio-page-2-offset': 0.5,
...timespan(0, 2),
onComplete: () => {
page.remove();
}
});
// Fade in
gsap.fromTo(page, {
'--opacity-page-2': 0
},
{
'--opacity-page-2': 1,
...timespan(0, 1)
});
// Height
gsap.to(page, {
'--ratio-page-2-height': 0.5,
...timespan(2, 3)
});
/* Pages */
// Scale
gsap.fromTo(download.value, {
'--scale-pages': 1
},
{
'--scale-pages': 0.8,
...timespan(3, 4)
});
gsap.to(download.value, {
'--scale-pages': 1,
ease: 'elastic',
...timespan(4, 5)
});
/* Folder */
// Scale
gsap.fromTo(download.value, {
'--scale-folder': 1
},
{
'--scale-folder': 1.12,
...timespan(3, 4)
});
gsap.to(download.value, {
'--scale-folder': 1,
ease: 'elastic',
...timespan(4, 5)
});
};
onMounted(() => {
download.value = document.querySelector('.download');
folderFront.value = document.querySelector('.folder-front');
});
</script>
<style lang="scss">
.folder-wrapper {
width: var(--size);
height: var(--size);
//display: flex;
//justify-content: center;
//align-items: center;
}
.download,
.folder-back,
.page-1,
.page-2,
.folder-front {
position: absolute;
cursor: pointer;
}
.download {
width: var(--size);
height: var(--size);
cursor: pointer;
filter: drop-shadow(rgba(0, 0, 0, 0.09) 4px 8px 12px) drop-shadow(rgba(0, 0, 0, 0.06) 2px 4px 6px) drop-shadow(rgba(0, 0, 0, 0.03) 1px 2px 3px);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.folder-back {
width: var(--size-folder-back);
height: var(--size-folder-back);
transform-origin: 50% 100%;
transform: translate(0%, 0%) scaleY(var(--scale-folder));
}
.page-1 {
width: calc(var(--size-page-1) * var(--ratio-page-1));
height: calc(var(--size-page-1) / var(--ratio-page-1));
border-radius: 8px;
background-color: #F2EEF7;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform-origin: 50% 90%;
transform: translate(50%, 30%) translateY(calc((1 - var(--scale-pages)) * -65%)) scale(var(--scale-pages));
}
.page-2 {
width: calc(var(--size-page-2) * var(--ratio-page-2));
height: calc((var(--size-page-2) * var(--ratio-page-2-height)) / var(--ratio-page-2));
border-radius: 10px;
background-color: #FFFEFF;
opacity: var(--opacity-page-2);
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform: translate(25%, 110%) translateY(17%) translateY(calc((1 - var(--scale-pages)) * -85%)) translateY(calc(var(--size) * -1.2 * var(--ratio-page-2-offset))) translateY(calc((1 - var(--ratio-page-2-height)) * -65%)) scale(var(--scale-pages));
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzMzNDEyMzc1MTMzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijg5ODgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMzM4LjU4NTYgMjYyLjE5NTJsLTI4OC4zNTg0IDUwNi44OGMtMjkuMzg4OCA1MS42MDk2IDcuOTM2IDExNS43NjMyIDY3LjMyOCAxMTUuNzYzMkg2OTQuMjcyYzU5LjM5MiAwIDk2LjcxNjgtNjQuMTAyNCA2Ny4zMjgtMTE1Ljc2MzJsLTI4OC4zNTg0LTUwNi44OGMtMjkuNjk2LTUyLjIyNC0xMDQuOTYtNTIuMjI0LTEzNC42NTYgMHoiIGZpbGw9IiM0QkUyQUMiIHAtaWQ9Ijg5ODkiPjwvcGF0aD48cGF0aCBkPSJNNzQ4Ljk1MzYgNTQ3LjEyMzJsLTE1My45MDcyIDI3MC41NDA4Yy0xNy4wNDk2IDI5Ljk1MiA0LjYwOCA2Ny4xNzQ0IDM5LjA2NTYgNjcuMTc0NGgzMDcuODE0NGMzNC40NTc2IDAgNTYuMTE1Mi0zNy4yMjI0IDM5LjA2NTYtNjcuMTc0NGwtMTUzLjkwNzItMjcwLjU0MDhjLTE3LjI1NDQtMzAuMzEwNC02MC45MjgtMzAuMzEwNC03OC4xMzEyIDB6IiBmaWxsPSIjNEJFMkFDIiBwLWlkPSI4OTkwIj48L3BhdGg+PHBhdGggZD0iTTc1OS45MTA0IDc2Ni4xNTY4bC02Ny43ODg4LTExOS4xOTM2LTk2LjEwMjQgMTY4Ljk2Yy0xNy40MDggMzAuNjE3NiA0LjM1MiA2OC44NjQgMzkuMTY4IDY4Ljg2NGg1Ny4yNDE2YzYwLjAwNjQgMC4wNTEyIDk3LjQ4NDgtNjUuODk0NCA2Ny40ODE2LTExOC42MzA0eiIgZmlsbD0iIzA2Q0M3NiIgcC1pZD0iODk5MSI+PC9wYXRoPjxwYXRoIGQ9Ik03MDcuNTMyOCAyOTQuNzU4NGE4Mi41ODU2IDgxLjM1NjggOTAgMSAwIDE2Mi43MTM2IDAgODIuNTg1NiA4MS4zNTY4IDkwIDEgMC0xNjIuNzEzNiAwWiIgZmlsbD0iIzRCRTJBQyIgcC1pZD0iODk5MiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMTcuNzAyNCA3NzEuOTQyNGMtNi43NTg0IDAtMTMuNTY4LTEuNjg5Ni0xOS44NjU2LTUuMTcxMi0xOS43NjMyLTExLjAwOC0yNi44OC0zNS45NDI0LTE1Ljg3Mi01NS43MDU2bDk1LjU5MDQtMTcxLjcyNDhjMTEuMDA4LTE5Ljc2MzIgMzUuOTQyNC0yNi44OCA1NS43MDU2LTE1Ljg3MiAxOS43NjMyIDExLjAwOCAyNi44OCAzNS45NDI0IDE1Ljg3MiA1NS43MDU2bC05NS41OTA0IDE3MS43MjQ4YTQwLjkyOTI4IDQwLjkyOTI4IDAgMCAxLTM1Ljg0IDIxLjA0MzJ6IiBmaWxsPSIjRkZGRkZGIiBwLWlkPSI4OTkzIj48L3BhdGg+PC9zdmc+'); /* 设置背景图片 */
background-size: cover; /* 确保图片覆盖整个div */
background-repeat: no-repeat; /* 防止图片重复 */
}
.folder-front {
width: var(--size-folder-front);
height: var(--size-folder-front);
transform-origin: 50% 100%;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform: translate(0%, 0%) scaleY(calc(var(--scale-folder) * var(--scale-folder)));
}
</style>

214
src/components/StarButton/StarButton.vue Normal file
View File

@@ -0,0 +1,214 @@
<script setup lang="ts">
</script>
<template>
<button>Button
<div class="star-1">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-2">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-3">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-4">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-5">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-6">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
</button>
</template>
<style scoped lang="scss">
button {
position: relative;
padding: 12px 35px;
background: #FFFFFF;
font-size: 17px;
font-weight: 500;
color: #000000;
border: 3px solid #0e3a3a;
border-radius: 8px;
box-shadow: 0 0 0 #fec1958c;
transition: all .3s ease-in-out;
}
.star-1 {
position: absolute;
top: 20%;
left: 20%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}
.star-2 {
position: absolute;
top: 45%;
left: 45%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-3 {
position: absolute;
top: 40%;
left: 40%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-4 {
position: absolute;
top: 20%;
left: 40%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-5 {
position: absolute;
top: 25%;
left: 45%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-6 {
position: absolute;
top: 5%;
left: 50%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .8s ease;
}
button:hover {
background: #0e3a3a;
color: #FFFFFF;
box-shadow: 0 0 25px #0e3a3a;
border: 3px solid #FFF;
}
button:hover .star-1 {
position: absolute;
top: -80%;
left: -30%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-2 {
position: absolute;
top: -25%;
left: 10%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-3 {
position: absolute;
top: 55%;
left: 25%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-4 {
position: absolute;
top: 30%;
left: 80%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-5 {
position: absolute;
top: 25%;
left: 115%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-6 {
position: absolute;
top: 5%;
left: 60%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
.fil0 {
fill: #FFFDEF
}
</style>