<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>起飞咯！</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="external nofollow"
/>
<style>
*{box-sizing:border-box;}body{--hue:12;--star:#f7c655;--bg:#262626;--strap:#212121;--red:#ed685e;--orange:#ed975e;--lime:#e4ed5e;--green:#84ed5e;--turquoise:#5ee4ed;--purple:#685eed;--indigo:#975eed;--violet:#ed5eb4;--tail:hsl(var(--hue),27%,62%);--stroke:#1a1a1a;--muzzle:hsl(var(--hue),43%,89%);--dark:hsl(var(--hue),33%,67%);--light:hsl(var(--hue),65%,79%);--strap:#333;background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden;}svg{height:100vmin;display:none;}.stars path{fill:var(--star);}.kitty__light{fill:var(--light);}.kitty__dark{fill:var(--dark);}.kitty__dark-stroke{stroke:var(--dark);}.kitty__stroke{stroke:var(--stroke);}.kitty__fill{fill:var(--stroke);}.kitty__muzzle{fill:var(--muzzle);}.kitty__tail{stroke:var(--tail);}.rocket__strap{fill:var(--strap);}.rocket__body path:nth-of-type(1){fill:#a6a6a6;}.rocket__body path:nth-of-type(2){fill:#333;}.rocket__body path:nth-of-type(3){fill:#d9d9d9;}.rocket__body path:nth-of-type(4){fill:#4d4d4d;}.rocket__stream path:nth-of-type(1),.rocket__bubbles path:nth-of-type(1),.rocket__stream path:nth-of-type(8),.rocket__bubbles path:nth-of-type(8){fill:var(--red);}.rocket__stream path:nth-of-type(2),.rocket__bubbles path:nth-of-type(2),.rocket__stream path:nth-of-type(9),.rocket__bubbles path:nth-of-type(9){fill:var(--orange);}.rocket__stream path:nth-of-type(3),.rocket__bubbles path:nth-of-type(3),.rocket__stream path:nth-of-type(10),.rocket__bubbles path:nth-of-type(10){fill:var(--lime);}.rocket__stream path:nth-of-type(4),.rocket__bubbles path:nth-of-type(4),.rocket__stream path:nth-of-type(11),.rocket__bubbles path:nth-of-type(11){fill:var(--green);}.rocket__stream path:nth-of-type(5),.rocket__bubbles path:nth-of-type(5),.rocket__stream path:nth-of-type(12),.rocket__bubbles path:nth-of-type(12){fill:var(--turquoise);}.rocket__stream path:nth-of-type(6),.rocket__bubbles path:nth-of-type(6),.rocket__stream path:nth-of-type(13),.rocket__bubbles path:nth-of-type(13){fill:var(--purple);}.rocket__stream path:nth-of-type(7),.rocket__bubbles path:nth-of-type(7),.rocket__stream path:nth-of-type(14),.rocket__bubbles path:nth-of-type(14){fill:var(--indigo);}.rocket__stream path:nth-of-type(8),.rocket__bubbles path:nth-of-type(8),.rocket__stream path:nth-of-type(15),.rocket__bubbles path:nth-of-type(15){fill:var(--violet);}</style>
</head>
<body>
<svg class="scene"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 1258 1186"clip-rule="evenodd"fill-rule="evenodd"stroke-linecap="round"stroke-linejoin="round"><g class="rocket"><g class="rocket__stream"><path d="M745 608h6v263h-6z"/><path d="M761 608h6v263h-6z"/><path d="M755 608h6v263h-6z"/><path d="M749 608h6v263h-6z"/><path d="M778 608h6v263h-6z"/><path d="M772 608h6v263h-6z"/><path d="M767 608h6v263h-6z"/></g><g class="rocket__bubbles"><path d="M717 869a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M704 873a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M736 863a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M774 865a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M720 884a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M719 876a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M765 879a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M738 884a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M721 851a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M716 876a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M747 881a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M764 882a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M766 852a25 25 0 1150 0 25 25 0 01-50 0z"/><path d="M735 847a25 25 0 1150 0 25 25 0 01-50 0z"/></g><g class="rocket__body"><path d="M743 602h43v9h-43z"/><path d="M776 601h10v10h-10z"/><path d="M764 442c-17 0-31 15-31 33v129h63V475c0-18-14-33-32-33z"/><path d="M764 442c18 0 32 15 32 33v129h-8V475c0-16-12-30-27-32l3-1z"/></g></g><g class="kitty"><g class="kitty__tails"><path class="kitty__tail"d="M698 618c-2 16-9 38-6 53 3 12 14 22 15 35 1 16-6 32-8 46"fill="none"stroke-width="20"/><path class="kitty__tail"d="M701 619c2 16 9 38 5 53-2 12-13 21-14 34-2 17 6 33 7 47"fill="none"stroke-width="20"/></g><g class="kitty__leg kitty__leg--right"><path class="kitty__light"d="M670 588c8 0 15 7 15 15v93c0 8-7 15-15 15s-14-7-14-15v-93c0-8 6-15 14-15z"/><path class="kitty__dark"d="M677 590l2 7v94c0 8-6 14-14 14l-7-2c2 5 7 8 12 8 8 0 15-7 15-15v-93c0-6-3-10-8-13z"/></g><g class="kitty__leg kitty__leg--left"><path class="kitty__light"d="M730 591c8 0 14 6 14 14v94c0 8-6 14-14 14s-15-6-15-14v-94c0-8 7-14 15-14z"/><path class="kitty__dark"d="M737 593l2 6v94c0 8-7 15-15 15-3 0-5-1-7-3 2 5 7 8 13 8 8 0 14-6 14-14v-94c0-5-3-10-7-12z"/></g><g class="kitty__body"><path class="kitty__light"d="M699 446c27 0 49 22 49 48v97c0 27-22 48-49 48s-49-21-49-48v-97c0-26 22-48 49-48z"/><path class="kitty__dark"d="M699 639c27 0 49-22 49-48l1-98c-1-15-10-28-21-37 5 8 9 17 9 27v97c1 27-21 48-48 49-12 0-22-4-30-10 9 12 24 20 40 20z"/></g><path class="rocket__strap"d="M652 509l91-11c5-1 9 3 10 7v1c0 5-3 9-8 10l-91 11c-5 0-9-3-10-8v-1c0-5 3-9 8-9z"/><g class="kitty__arm kitty__arm--right"><path class="kitty__light"d="M734 468c8 2 13 10 11 18l-20 91c-2 8-10 13-18 11s-13-10-11-17l21-92c2-8 9-13 17-11z"/><path class="kitty__dark"d="M741 471v8l-21 91c-1 8-9 13-17 11l-7-4c2 5 6 10 11 11 8 2 16-3 18-11l21-92c1-5-1-10-5-14z"/></g><g class="kitty__arm kitty__arm--left"><path class="kitty__light"d="M659 475c8 2 13 10 11 18l-22 91c-2 8-10 13-18 11s-13-10-11-18l23-91c1-8 9-13 17-11z"/><path class="kitty__dark"d="M665 479l1 7-23 91c-1 8-9 13-17 11l-7-4c2 5 6 9 11 11 8 2 16-3 18-11l22-91c1-5-1-10-5-14z"/></g><g class="kitty__head"><g class="kitty__stroke"fill="none"stroke-width="5"><path d="M548 467c-18 10-38 13-54 26"/><path d="M560 485l-48 31"/><path d="M574 495c-9 7-14 19-17 30"/><path d="M745 351c7-13 31-22 43-30"/><path d="M757 374c11-8 24-19 38-12"/><path d="M760 390c10-6 38 4 47 9"/></g><path class="kitty__light"d="M652 326c4-107 90-53 73 8 48 34 64 104-5 155-94 71-188 9-181-68-37-57-22-143 46-67"/><path class="kitty__muzzle"d="M616 454c-7-14 5-34 28-46 22-11 46-9 53 5s-5 35-27 46c-23 12-47 9-54-5z"/><g class="kitty__eye kitty__eye--left"><path class="kitty__stroke kitty__fill"d="M565 444a7 7 0 1112-8 7 7 0 01-12 8z"stroke-width="5"/></g><g class="kitty__eye kitty__eye--right"><path class="kitty__stroke kitty__fill"d="M712 377a7 7 0 1112-7 7 7 0 01-12 7z"stroke-width="5"/></g><path class="kitty__light"d="M570 369c9-8 15-20 25-27 22-15 47-18 72-16"/><path class="kitty__dark-stroke"d="M690 287c-18-22-28 18-25 30v3"fill="none"stroke-width="4"/><path class="kitty__dark-stroke"d="M536 352c-6-8 2-21 11-15 6 5 12 9 17 15 1 2 7 10 8 9"fill="none"stroke-width="4"/><path class="kitty__stroke"d="M631 451c19 7 15-12 26-15 4-2 10 3 16 0 2-2 14-11 11-13"fill="none"stroke-width="4"/><path class="kitty__stroke"d="M644 426c-1-3 1-5 4-7 3-1 7-1 8 1s-1 5-4 7c-4 1-7 1-8-1z"stroke-width="2"/><path class="kitty__dark"d="M695 267c14 12 23 35 17 59 47 34 63 104-6 155-47 36-94 38-129 21 35 25 89 28 143-13 69-51 53-121 5-155 9-31-10-61-30-67z"/></g></g><g class="stars"><path d="M908 657l-10-9-13 4 5-12-8-11h13l8-10 4 13 13 4-11 7z"fill-rule="nonzero"/><path d="M1128 89l-10-8-13 3 5-12-8-11 13 1 8-11 4 13 13 4-11 8z"fill-rule="nonzero"/><path d="M296 287l-10-9-13 4 5-12-8-11h13l8-10 4 13 12 4-11 7z"fill-rule="nonzero"/><path d="M188 991l-10-8-13 4 5-13-8-11 13 1 8-11 4 13 13 4-11 8z"fill-rule="nonzero"/><path d="M1227 1137l-10-9-13 4 5-12-8-11h13l8-10 4 13 12 4-11 7z"fill-rule="nonzero"/></g></svg><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script><script>const{gsap:{set,to,timeline,utils:{random},},}=window;const TAILS=[...document.querySelectorAll('.kitty__tail')];const STARS=[...document.querySelectorAll('.stars path')];const BUBBLES=[...document.querySelectorAll('.rocket__bubbles path')];const EYES=[...document.querySelectorAll('.kitty__eye')];set('.scene',{display:'block'});set(TAILS[1],{display:'none'});to(TAILS[0],{duration:0.1,ease:'none',yoyo:true,repeat:-1,morphSVG:TAILS[1],});set('.stars path',{y:-1185,transformOrigin:'50% 50%',rotation:'random(0, 360)',scale:'random(0.2, 1.2)',});STARS.forEach((star)=>to(star,{repeat:-1,duration:'random(4, 10)',delay:()=>'random(-10, -5)',y:1185,ease:'none',}));set(BUBBLES,{scale:0,transformOrigin:'50% 50%'});BUBBLES.forEach((bubble)=>timeline({repeat:-1,yoyo:true}).to(bubble,{duration:0.5,scale:2.5,}).to(bubble,{duration:0.2,opacity:0,},'>-0.2').seek(Math.random()));set(EYES,{transformOrigin:'50% 50%',rotate:-25});const blink=()=>{const delay=random(2,5);to(EYES,{delay,duration:0.1,repeat:1,yoyo:true,scaleY:0,onComplete:()=>blink(),})};blink();to('.kitty__head',{repeat:-1,yoyo:true,rotate:2,duration:0.1,transformOrigin:'75% 75%',});to('.kitty__arm',{repeat:-1,yoyo:true,rotate:2,duration:0.1,transformOrigin:'75% 15%',});to('.kitty__leg--left',{repeat:-1,yoyo:true,rotate:2,duration:0.1,transformOrigin:'50% 5%',});to('.kitty__leg--right',{repeat:-1,yoyo:true,rotate:-2,duration:0.1,transformOrigin:'50% 5%',});const PARTY=timeline({paused:true,}).fromTo(document.body,{'--hue':0,},{'--hue':360,repeat:10,ease:'none',});const keys=[];const shouldWeParty=(e)=>{keys.push(e.key);if(keys.slice(keys.length-5,keys.length).join('').toLowerCase()==='party'){keys.length=0;PARTY.restart()}};window.addEventListener('keyup',shouldWeParty);</script>
</body>
</html>
