99AI/public/assets/index-404bb920.css
2024-01-17 09:22:28 +08:00

2 lines
3.8 KiB
CSS

@import"https://fonts.googleapis.com/css?family=Fredoka+One";.welcome{display:flex;justify-content:center;align-items:center;height:100vh;background-size:100% 100%}.store-container{line-height:0;margin:50px auto;width:50%}@media only screen and (max-width: 768px){.store-container{width:90%}}@media only screen and (min-width: 769px) and (max-width: 1200px){.store-container{width:80%}}@media only screen and (min-width: 1201px){.store-container{width:50%}}.stroke{stroke:#0170bb;stroke-width:5;stroke-linejoin:round;stroke-miterlimit:10}.round-end{stroke-linecap:round}#store{animation:fadeIn .8s ease-in}.border-animation{background-color:#fff;border-radius:10px;position:relative}.border-animation:after{content:"";background:linear-gradient(45deg,#ccc 48.9%,#0170bb 49%);background-size:300% 300%;border-radius:10px;position:absolute;top:-5px;left:-5px;height:calc(100% + 10px);width:calc(100% + 10px);z-index:-1;animation:borderGradient 8s linear both infinite}@keyframes borderGradient{0%,to{background-position:0% 100%}50%{background-position:100% 0%}}@keyframes fadeIn{to{opacity:1}}#browser{transform:translateY(-100%);animation:moveDown 1.5s cubic-bezier(.77,-.5,.3,1.5) forwards}@keyframes moveDown{0%{transform:translateY(-100%)}to{transform:translate(0)}}#toldo{animation:fadeIn 1s 1.4s ease-in forwards}.grass{animation:fadeIn .5s 1.6s ease-in forwards}#window{animation:fadeIn .5s 1.8s ease-in forwards}#door{animation:fadeIn .5s 2s ease-in forwards}#sign{transform-origin:837px 597px;animation:pendulum 1.5s 2s ease-in-out alternate}.trees{animation:fadeIn .5s 2.2s ease-in forwards}#toldo,.grass,#window,#door,.trees,.cat,.cat-shadow,.box,.parachute,.tshirt,.cap,.ball,#text,#button,.sky-circle,.sky-circle2,.sky-circle3{opacity:0}@keyframes pendulum{20%{transform:rotate(60deg)}40%{transform:rotate(-40deg)}60%{transform:rotate(20deg)}80%{transform:rotate(-5deg)}}.cat{transform-origin:1145px 620px}.cat-shadow{transform-origin:1115px 625px}#store:hover .cat{animation:catHi 3s 3s cubic-bezier(.7,-.5,.3,1.4)}#store:hover .cat-shadow{animation:catShadow 4s 2s cubic-bezier(.7,-.5,.3,1.4) alternate}@keyframes catHi{0%,to{opacity:0;transform:scale(.8)}10%,60%{transform:scale(1);opacity:1}}@keyframes catShadow{0%,to{transform:translate(40px,-35px) scale(.3)}10%,60%{opacity:1;transform:translate(-5px,10px) scale(.5)}60%{opacity:0}}.box,.parachute{transform-origin:430px 100px;animation:moveBox 14s 4s linear forwards infinite}.parachute{animation:parachute 14s 4s linear forwards infinite}@keyframes moveBox{0%{opacity:0;transform:translateY(-150px) rotate(20deg)}15%{opacity:1;transform:translateY(100px) rotate(-15deg)}25%{transform:translateY(250px) rotate(10deg)}30%{transform:translateY(350px) rotate(-5deg)}35%{opacity:1;transform:translateY(570px) rotate(0)}45%,to{opacity:0;transform:translateY(570px)}}@keyframes parachute{0%{transform:translateY(-150px) rotate(20deg) scale(.8);opacity:0}15%{transform:translateY(100px) rotate(-15deg) scale(1);opacity:1}25%{transform:translateY(250px) rotate(10deg)}30%{transform:translateY(350px) rotate(-5deg)}33%{transform:translateY(460px) rotate(0) scale(.9);opacity:1}45%,to{transform:translateY(480px);opacity:0}}.tshirt{animation:fadeInOut 42s 10s ease-in forwards infinite}.cap{animation:fadeInOut 42s 24s ease-in forwards infinite}.ball{animation:fadeInOut 42s 38s ease-in forwards infinite}#text,#button{animation:fadeIn 1s 5s ease-in forwards}@keyframes fadeInOut{5%,12%{opacity:1}20%{opacity:0}}.cloud{animation:clouds 25s linear backwards infinite}.cloud2{animation:clouds 20s 25s linear backwards infinite}.plane{animation:clouds 20s linear backwards infinite;will-change:transform}@keyframes clouds{0%{transform:translate(-150%)}to{transform:translate(150%)}}.sky-circle{animation:fadeInOut 10s 5s ease-in infinite}.sky-circle2{animation:fadeInOut 12s 30s ease-in infinite}.sky-circle3{animation:fadeInOut 8s 40s ease-in infinite}.btn{cursor:pointer}