<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML> < HEAD> < TITLE> </ TITLE> < METANAME = " Generator" CONTENT = " EditPlus" > < METANAME = " Author" CONTENT = " " > < METANAME = " Keywords" CONTENT = " " > < METANAME = " Description" CONTENT = " " > < style>
* {
box-sizing : border-box;
font-family : 'Mukta Malar' , sans-serif;
font-weight : 400;
}
body {
height : 100vh;
overflow : hidden;
margin : 0;
padding : 0;
background : #8DC7E1;
}
.stars {
height : 80vh;
}
.stars .moon {
position : absolute;
opacity : 0;
width : 40px;
height : 40px;
bottom : 10vh;
right : 0;
left : 0;
margin : auto;
}
.stars .moon svg {
height : 40px;
width : 40px;
}
.stars .moon .face {
opacity : 0;
}
.land {
background : #5CB072;
width : 100%;
height : 20vh;
}
.countdown {
width : 200px;
height : 200px;
text-align : center;
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
margin : auto;
z-index : 100;
}
.countdown .count {
position : absolute;
font-size : 200px;
left : 0;
right : 0;
top : 0;
bottom : 0;
text-align : center;
margin : auto;
line-height : 200px;
color : white;
text-shadow : 0px 5px 13px black;
opacity : 0;
}
.rocket {
position : absolute;
bottom : calc ( 20vh - 34px) ;
left : 0;
right : 0;
margin : auto;
width : 162px;
}
.rocket .rocketbooster {
opacity : 0;
}
.rocket .rocketellipse {
opacity : 0;
}
</ style> </ HEAD> < BODY> < divclass = " universe" > < divclass = " stars" > < divclass = " moon" > < svgxmlns = " http://www.w3.org/2000/svg" width = " 406" height = " 406" viewBox = " 0 0 406 406" > < gfill = " none" > < circlecx = " 202.999" cy = " 203.06" r = " 202.94" fill = " #EAEAEA" /> < pathfill = " #000" d = " M325.692,41.407 C356.281,76.939 374.777,123.178 374.777,173.741 C374.777,285.823 283.917,376.683 171.835,376.683 C125.727,376.683 83.219,361.297 49.142,335.392 C86.36,378.623 141.48,406 202.999,406 C315.081,406 405.941,315.14 405.941,203.058 C405.941,137.084 374.452,78.473 325.692,41.407 Z" opacity = " .1" /> < pathfill = " #000" d = " M101.128 243.652C66.625 243.652 36.297 261.517 18.883 288.499 47.538 350.142 106.227 394.988 176.157 404.23 190.381 387.244 198.948 365.36 198.948 341.472 198.947 287.448 155.152 243.652 101.128 243.652zM244.601 4.392C238.31 13.918 234.639 25.325 234.639 37.595 234.639 70.921 261.655 97.936 294.98 97.936 319.268 97.936 340.191 83.579 349.76 62.895 321.936 33.77 285.529 12.919 244.601 4.392z" opacity = " .1" /> < circlecx = " 257.559" cy = " 251.79" r = " 36.713" fill = " #000" opacity = " .1" /> < pathfill = " #000" d = " M74.091 46.311C46.907 68.693 25.657 98.014 13.025 131.558 21.901 138.437 33.035 142.543 45.134 142.543 74.115 142.543 97.608 119.049 97.608 90.068 97.609 71.793 88.261 55.707 74.091 46.311zM371.039 271.468C333.377 271.468 302.846 301.999 302.846 339.661 302.846 352.242 306.267 364.019 312.209 374.136 348.696 350.795 377.209 316.097 392.79 275.033 385.958 272.733 378.648 271.468 371.039 271.468z" opacity = " .1" /> < gclass = " face" fill = " #3F4C58" transform = " translate(117 55)" > < pathd = " M7.507 25.328C3.364 25.328.007 21.97.007 17.828L.007 8.431C.007 4.289 3.364.931 7.507.931 11.65.931 15.007 4.289 15.007 8.431L15.007 17.828C15.007 21.97 11.649 25.328 7.507 25.328zM164.491 25.328C160.348 25.328 156.991 21.97 156.991 17.828L156.991 8.431C156.991 4.289 160.348.931 164.491.931 168.634.931 171.991 4.289 171.991 8.431L171.991 17.828C171.991 21.97 168.634 25.328 164.491 25.328z" /> < circlecx = " 85.999" cy = " 28.25" r = " 19.82" /> </ g> </ g> </ svg> </ div> </ div> < divclass = " land" > </ div> </ div> < divclass = " countdown" > < divclass = " count" > </ div> < divclass = " count" > </ div> < divclass = " count" > </ div> </ div> < divclass = " rocket" > < svgxmlns = " http://www.w3.org/2000/svg" width = " 162" height = " 298" viewBox = " 0 0 162 298" > < defs> < linearGradientid = " rocket-a" x1 = " 50%" x2 = " 50%" y1 = " 0%" y2 = " 100%" > < stopoffset = " 0%" stop-color = " #FE2727" /> < stopoffset = " 100%" stop-color = " #D8D8D8" stop-opacity = " 0" /> </ linearGradient> </ defs> < gfill = " none" fill-rule = " evenodd" > < pathclass = " rocketbooster" fill = " #FEDBAB" fill-rule = " nonzero" d = " M81.0233175,214.375008 C94.2639694,214.365193 105.001624,225.102848 104.992035,238.343273 C104.983785,249.472657 88.6444491,288.027597 85.2814913,295.033724 C84.5124568,296.761344 82.7848493,297.817806 80.9616873,297.819157 C79.1385253,297.820509 77.4124822,296.766607 76.6460082,295.040125 C73.2936602,288.03875 57.0114671,249.507993 57.0194909,238.378835 C57.0293057,225.138635 67.7831178,214.384823 81.0233175,214.375008 Z" transform = " transform: matrix(1, 0, 0, 1, 0, -40)" /> < gtransform = " translate(15.864 29.28)" > < pathfill = " #000" d = " M124.894789,182.272892 L102.01962,146.566225 C105.19184,115.84339 107.198813,89.5063086 107.198813,76.5602476 C107.198813,49.729727 96.3126053,30.5100752 87.1800356,19.111052 C77.2749614,6.7481901 67.4064214,0.761638882 66.9910861,0.512999247 C65.8493947,-0.170999749 64.4226409,-0.170999749 63.2809496,0.512999247 C62.8656142,0.761638882 52.9970742,6.7481901 43.092,19.111052 C33.9603917,30.5100752 23.074184,49.729727 23.074184,76.5602476 C23.074184,89.5067886 25.081638,115.84387 28.2533769,146.566705 L5.37388131,182.280092 C1.85843323,187.795764 0,194.167275 0,200.705825 L0,241.680005 C0,243.201603 0.958059347,244.559041 2.39346588,245.07024 C2.79005341,245.21184 3.19962018,245.28 3.60486053,245.28 C4.66579228,245.28 5.69788131,244.811521 6.39587537,243.959522 L35.780368,208.098775 C37.819549,214.133806 43.5419466,218.400039 50.1113591,218.400039 L61.5311573,218.400039 L61.5311573,241.680005 C61.5311573,243.668162 63.1453887,245.28 65.1364985,245.28 C67.1276083,245.28 68.7418398,243.668162 68.7418398,241.680005 L68.7418398,218.400039 L80.161638,218.400039 C86.7315312,218.400039 92.4534481,214.133806 94.4931098,208.098775 L123.877122,243.959522 C124.575596,244.811521 125.607205,245.28 126.668136,245.28 C127.073377,245.28 127.482944,245.21136 127.879531,245.07024 C129.314457,244.559041 130.272997,243.201123 130.272997,241.680005 L130.272997,200.705825 C130.272997,194.167755 128.415045,187.796244 124.894789,182.272892 Z" /> < pathfill = " #FFF" fill-rule = " nonzero" d = " M7.21068249,200.705825 C7.21068249,195.539113 8.67925816,190.5044 11.4524866,186.153207 L29.4690979,158.030048 C30.9016202,171.197869 32.5177745,184.932089 34.2565104,198.588069 L7.21068249,231.59474 L7.21068249,200.705825 Z" /> < pathfill = " #FFF" d = " M123.062315 231.59474L96.0164866 198.587589C97.7557033 184.931609 99.3713769 171.197389 100.803899 158.029568L118.815703 186.145527C121.593739 190.5044 123.061834 195.539113 123.061834 200.705345L123.061834 231.59474 123.062315 231.59474zM68.7418398 211.20005L68.7418398 149.520141C68.7418398 147.531983 67.1276083 145.920146 65.1364985 145.920146 63.1453887 145.920146 61.5311573 147.531983 61.5311573 149.520141L61.5311573 211.20005 50.1113591 211.20005C46.1507715 211.20005 42.7761721 208.232214 42.2622908 204.29718 39.746724 185.029528 37.4594955 165.409077 35.573181 147.281904 32.3216439 115.97491 30.2848665 89.4664687 30.2848665 76.5602476 30.2848665 62.6148281 33.3484451 49.6783671 39.4063798 37.9203043L43.5861721 30.7203149C45.1100297 28.3721584 46.7603145 26.0753617 48.543276 23.834245 55.2155608 15.4496173 61.9686053 10.1739451 65.1355371 7.93234836 69.068724 10.7225843 78.5430801 18.2268932 86.6219288 30.7203149L90.7916261 37.9203043C96.0684036 48.1726093 99.9881306 61.0164304 99.9881306 76.5602476 99.9881306 89.4659887 97.9513531 115.97587 94.741638 146.881104 92.8139822 165.405717 90.5267537 185.027608 88.0107062 204.29718 87.4968249 208.232694 84.1227062 211.20005 80.1621187 211.20005L68.7418398 211.20005z" /> < pathfill = " #000" fill-rule = " nonzero" d = " M65.1364985,53.76 C50.4252641,53.76 38.4569733,65.71056 38.4569733,80.4 C38.4569733,95.08944 50.4252641,107.04 65.1364985,107.04 C79.8477329,107.04 91.8160237,95.08944 91.8160237,80.4 C91.8160237,65.71056 79.8477329,53.76 65.1364985,53.76 Z M65.1364985,99.84 C54.4012344,99.84 45.6676558,91.11936 45.6676558,80.4 C45.6676558,69.68064 54.4012344,60.96 65.1364985,60.96 C75.8717626,60.96 84.6053412,69.68064 84.6053412,80.4 C84.6053412,91.11936 75.8717626,99.84 65.1364985,99.84 Z" /> < pathfill = " #000" d = " M65.1364985,69.12 C63.1453887,69.12 61.5311573,70.73184 61.5311573,72.72 C61.5311573,74.70816 63.1453887,76.32 65.1364985,76.32 C67.3895964,76.32 69.2225519,78.15024 69.2225519,80.4 C69.2225519,82.38816 70.8367834,84 72.8278932,84 C74.819003,84 76.4332344,82.38816 76.4332344,80.4 C76.4332344,74.18016 71.3655668,69.12 65.1364985,69.12 Z" /> < rectwidth = " 53.359" height = " 7.2" x = " 38.5" y = " 30.7" fill = " #000" rx = " .96" /> </ g> < ellipseclass = " rocketellipse" cx = " 81" cy = " 137.28" fill = " url(#rocket-a)" rx = " 81" ry = " 137.28" /> </ g> </ svg> </ div> < scripttype = " text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js" > </ script> < scripttype = " text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script> < script>
TweenMax. to ( ".rocketellipse" , 4 , { opacity : 1 , ease : Power2. easeIn, delay : 5 } ) ;
TweenMax. to ( ".rocketellipse" , 1 , { opacity : 0 , ease : Power2. easeIn, delay : 12 } ) ;
TweenMax. to ( ".rocketbooster" , 1 , { opacity : 1 , ease : Power4. easeIn, delay : 3 } ) ;
TweenMax. to ( ".rocketbooster" , 5 , { y : 0 , ease : Power1. easeIn, delay : 3 } ) ;
TweenMax. to ( ".rocketbooster" , 1 , { opacity : 0 , y : - 60 , ease : Power1. easeIn, delay : 12 } ) ;
TweenMax. to ( "body" , 10 , { backgroundColor : "#192226" , ease : Power2. easeIn, delay : 3 } ) ;
TweenMax. to ( ".land" , 2 , { y : 200 , ease : Power2. easeIn, delay : 5 } ) ;
TweenMax. to ( ".rocket" , 5 , { bottom : '30vh' , ease : Power1. easeInOut, delay : 3 } ) ;
TweenMax. to ( ".rocket" , 3 , { scale : 0.5 , bottom : 30 , ease : Power1. easeInOut, delay : 11 } ) ;
TweenMax. to ( ".moon" , 3 , { opacity : 1 , scale : 3 , bottom : 60 , ease : Power1. easeInOut, delay : 10 } ) ;
TweenMax. to ( ".face" , 1 , { opacity : 1 , bottom : 60 , ease : Power1. easeInOut, delay : 13 } ) ;
var count = jQuery ( ".count" ) ;
TweenMax. staggerTo ( count, 1 , { autoAlpha : 1 , scale : 1.5 , ease : Power2. easeInOut, yoyo : true } , 1 ) ;
TweenMax. staggerTo ( count, 1 , { autoAlpha : 0 , scale : 1.5 , delay : 0.8 , ease : Power2. easeInOut, yoyo : true } , 1 ) ;
</ script> </ BODY> </ HTML>
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
