HTML5火箭发射升空 | 神舟飞船发射动画

输入发射密码：123456，换个头像试试穿上宇航服遨游太空的感觉。可用于太空旅游类营销网站。

svg, rocket

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2761
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*  ==========================================================================
    START ANIMATION
    ========================================================================== */

console.clear();

var tl = new TimelineMax();

TweenMax.set(['.outer-circle', '.inner-circle'], {
    transformOrigin: 'center center'
});
TweenMax.fromTo('.preload-text', 0.6, {
    alpha: 0
}, {
    alpha: 1,
    ease: Linear.none,
    yoyo: true,
    repeat: -1,
    delay: 0.9
});

function loaderIn() {

var tl = new TimelineMax({
        delay: 0.4
    });

tl.set('.loader', {
            autoAlpha: 1,
            immediateRender: false
        })
        .set('.preload-text-wrap', {
            autoAlpha: 0,
            immediateRender: false
        })
        .from('.outer-circle', 0.8, {
            scale: 0,
            ease: Elastic.easeOut.config(0.25, 0.3)
        })
        .from('.inner-circle', 0.8, {
            scale: 0,
            ease: Elastic.easeOut.config(0.25, 0.3)
        }, "-=0.7")
        .from('.stars', 0.8, {
            alpha: 0,
            ease: Linear.none
        }, "-=0.7")
        .from('.frame', 0.5, {
            y: 120,
            ease: Back.easeOut
        }, "-=0.7")
        .from('.platform', 0.4, {
            y: 120,
            ease: Back.easeOut
        }, "-=0.6")
        .from('.rocket', 0.4, {
            y: 120,
            ease: Back.easeOut
        }, "-=0.5")
        .from('.ladder', 0.6, {
            x: -26,
            ease: Cubic.easeInOut
        }, "-=0.2")
        .to('.preload-text-wrap', 0.5, {
            autoAlpha: 1
        }, "-=0.5");

return tl;
}

function loaderOut() {
    var tl = new TimelineMax();

tl.to('.preload-text-wrap', 0.6, {
            alpha: 0,
            ease: Linear.none
        })
        .to('.preload-text-wrap', 0.6, {
            y: 20,
            ease: Circ.easeIn
        }, "-=0.6")
        .to('.platform', 0.5, {
            y: 120,
            ease: Circ.easeIn
        }, "-=0.5")
        .to('.frame', 0.5, {
            y: 120,
            ease: Circ.easeIn
        }, "-=0.4")
        .to('.rocket', 0.5, {
            y: 120,
            ease: Circ.easeIn
        }, "-=0.4")
        .to('.stars', 0.8, {
            alpha: 0,
            ease: Linear.none
        }, "-=0.7")
        .to('.inner-circle', 0.8, {
            scale: 0,
            ease: Elastic.easeIn.config(0.25, 0.3),
            onComplete: function() {}
        }, "-=0.5")
        .to('.outer-circle', 0.8, {
            scale: 0 /*attr: { r: 24 }*/ ,
            ease: Elastic.easeIn.config(0.25, 0.3)
        }, "-=0.7")
        .set('.loader', {
            autoAlpha: 0,
            immediateRender: false
        })

return tl;
}

function codeIn() {

TweenMax.set('.clouds', {
        y: 5,
        autoAlpha: 0
    });
    TweenMax.staggerTo('.cloud', 0.4, {
        cycle: {
            delay: function(i) {
                return i / 10;
            }
        },
        scale: 1.2,
        yoyo: true,
        repeat: -1,
        transformOrigin: 'center'
    });
    TweenMax.to('.thrust-1', 0.02, {
        scale: 1.1,
        yoyo: true,
        repeat: -1
    })

var tl = new TimelineMax();

tl.set('.code-wrapper', {
            autoAlpha: 1,
            immediateRender: false
        })
        .set('.background', {
            autoAlpha: 1,
            immediateRender: false
        })
        .set('.rocket-launchpad-1', {
            autoAlpha: 1,
            x: -4,
            y: 157,
            immediateRender: false
        })
        .set('.thrust-1', {
            autoAlpha: 0
        })
        .set('.code-inner', {
            y: 0
        }) // reset positions from codeOut
        .set('.launchpad-1', {
            y: 0
        }) // reset positions from codeOut
        .set('.rocket-1', {
            y: 0,
            x: 0,
            rotation: 0
        })
        .set('.clouds', {
            y: 5
        })
        .set('.code-btn', {
            backgroundColor: '#d81f44'
        })
        .set('.error', {
            autoAlpha: 0
        })
        .set('.code-btn-icons', {
            autoAlpha: 0
        })
        .from('.code-base', 0.5, {
            width: '55px',
            x: 108,
            ease: Elastic.easeOut.config(0.5, 0.3),
            transformOrigin: 'center'
        })
        .from('.logo', 0.5, {
            autoAlpha: 0,
            y: 80,
            ease: Elastic.easeOut.config(0.4, 0.3)
        }, "-=0.6")
        .set('.code-btn', {
            autoAlpha: 1,
            immediateRender: false
        }, "-=0.3")
        .from('.code-btn', 0.5, {
            width: '50px',
            ease: Elastic.easeOut.config(0.5, 0.3)
        }, "-=0.3")
        .to('.code-btn-txt', 0.5, {
            autoAlpha: 1,
            immediateRender: false
        }, "-=0.5")
        .to('.code-input', 0.4, {
            opacity: 1,
            ease: Linear.none
        }, "-=0.45")
        .from('.code-title', 0.5, {
            autoAlpha: 0,
            scale: 0,
            y: 40,
            ease: Elastic.easeOut.config(0.4, 0.3)
        }, "-=0.6")
        .from('.code-intro', 0.5, {
            autoAlpha: 0,
            scale: 0,
            y: 40,
            ease: Elastic.easeOut.config(0.4, 0.3)
        }, "-=0.5")
        .fromTo('.stars-1', 1, {
            autoAlpha: 0
        }, {
            autoAlpha: 0.4,
            ease: Linear.none
        })
        .set('.moon', {
            autoAlpha: 0,
            y: -50,
            immediateRender: false
        })
        .from('.moon', 1, {
            autoAlpha: 0,
            ease: Linear.none
        })
        .fromTo('.rocket-launchpad-1', 1.5, {
            y: 157
        }, {
            y: 38,
            ease: Circ.easeOut
        }, "-=1")
        .set('.thrust-1', {
            autoAlpha: 1,
            x: -0.5,
            immediateRender: false
        })
        .to('.clouds', 0.8, {
            autoAlpha: 1,
            ease: Linear.none
        })

return tl;
}

function codeOut() {

var tl = new TimelineMax();

tl.to('.rocket-1', 1.5, {
            y: -550,
            x: -50,
            rotation: -10,
            ease: Power4.easeIn
        }, "-=0.0")
        .to('.code-form', 1.0, {
            y: 300,
            opacity: 0,
            ease: Power4.easeIn
        }, "-=1.0")
        .to('.code-content', 0.5, {
            autoAlpha: 0,
            ease: Linear.none
        }, "-=1.0")
        .to('.launchpad-1', 1.3, {
            y: 140,
            ease: Power4.easeIn
        }, "-=1.5")
        .to('.clouds', 1.3, {
            y: 140,
            ease: Power4.easeIn,
            onCompelete: function() {
                tl.add(uploadIn(), "-=1.5");
            }
        }, "-=1.5")
        .set('.code-wrapper', {
            autoAlpha: 0
        })

return tl;

}

function uploadIn() {

var upTL = new TimelineMax({
        delay: 0.5
    });

upTL.set('.ring-group', {
            scale: 0,
            transformOrigin: '50% 50%'
        })
        .set('.suit', {
            scale: 0,
            y: 0,
            autoAlpha: 1,
            immediateRender: false
        })
        .set('.suit-left', {
            rotation: 35,
            transformOrigin: '125px 80px'
        })
        .set('.suit-right', {
            rotation: -35,
            transformOrigin: '32px 80px'
        })
        .to('.ring-group', 2, {
            autoAlpha: 1,
            scale: 1,
            rotation: 720,
            ease: Power4.easeInOut
        })
        .to('.suit', 1.0, {
            scale: 1,
            y: 0,
            autoAlpha: 1,
            ease: Elastic.easeOut.config(0.6, 0.3)
        }, "-=1.0")
        .to('.suit-left', 0.5, {
            rotation: -10,
            ease: Sine.easeInOut,
            yoyo: true
        }, "-=1.0")
        .to('.suit-right', 0.5, {
            rotation: 10,
            ease: Sine.easeInOut,
            yoyo: true
        }, "-=1.0")
        .set('.upload-btn', {
            autoAlpha: 1,
            immediateRender: false
        }, "-=0.8")
        .from('.upload-btn', 0.5, {
            width: '55px',
            ease: Elastic.easeOut.config(0.5, 0.3),
            transformOrigin: 'center'
        }, "-=0.8")
        .from('.upload-btn-text', 0.5, {
            autoAlpha: 0
        }, "-=0.7")
        .from('.upload-base', 0.3, {
            autoAlpha: 0,
            ease: Linear.none
        }, "-=0.75")
        .to('.suit-left', 0.2, {
            rotation: 0,
            ease: Sine.easeInOut,
            yoyo: true
        })
        .to('.suit-left', 0.2, {
            rotation: -20,
            ease: Sine.easeInOut,
            yoyo: true,
            repeat: 2
        })
        .to('.suit-left', 0.3, {
            rotation: -10,
            ease: Sine.easeInOut
        })
        .from('.upload-intro', 0.7, {
            autoAlpha: 0,
            ease: Linear.none
        }, "-=1.4")
        .from('.use-default', 0.7, {
            autoAlpha: 0,
            ease: Linear.none
        }, "-=1.2")

return upTL;

}

/* Add entry frame timelines to main Timeline
   ========================================================================== */

tl.add(loaderIn())
    .add(loaderOut(), "+=2")
    .add(codeIn(), "-=0.2")

/* code check button animations
   ========================================================================== */

$(".code-btn").click(function(e) {
    TweenMax.set(['.tick', '.cross'], {
        alpha: 0
    });
    e.preventDefault();
    var tl = new TimelineMax();

if ($('.code-input').val().toLowerCase() == '123456') {
        tl.add(validEntry());
    } else {
        tl.add(invalidEntry());
    }

});

/* validation animations
   ========================================================================== */

function invalidEntry() {

var errorTxt = "This code has already been used";
    $('.error').text(errorTxt);

var errorTL = new TimelineMax();
    errorTL.fromTo('.error', 0.5, {
        autoAlpha: 0
    }, {
        autoAlpha: 1,
        ease: Linear.none
    })

return errorTL;

}

/*  ==========================================================================
    SLIDER
    ========================================================================== */

var $slider = $('#slider'),
    sliderValue = {
        value: 0
    };

$slider.slider({
    range: false,
    min: 0,
    max: 100,
    step: .1,
    start: function() {
        tl.pause();
    },
    slide: function(event, ui) {
        tl.progress(ui.value / 100);
    },
    stop: function() {
        tl.play();
    }
});

tl.eventCallback("onUpdate", function() {
    sliderValue.value = tl.progress() * 100;
    $slider.slider(sliderValue);
});

编译

CSS

/* ==========================================================================
   Variables
   ========================================================================== */

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
html,
body {
    height: 100%;
}
body {
    position: relative;
    background-color: #08222e;
    font-family: "din-condensed-web";
}
.use-code {
    color: white;
    text-align: center;
    margin-top: -40px;
}
#slider {
    width: 300px;
    position: relative;
    margin: 30px auto;
}
.logo {
    position: absolute;
    top: 5px;
    left: calc(50% - 32px);
    z-index: 100;
    width: 80px;
    height: auto;
    visibility: hidden;
}
.card-wrapper {
    width: 600px;
    height: 558px;
    position: absolute;
    top: calc(50% - 350px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.card {
    position: absolute;
    left: calc(50% - 160px);
    top: calc(50% - 264px);
    width: 320px;
    height: 528px;
    background-color: #08222e;
    background-image: -webkit-radial-gradient(circle 260px at 160px 90px, #00a9ea 0%, #08222e 90%);
    background-image: radial-gradient(circle 260px at 160px 90px, #00a9ea 0%, #08222e 90%);
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 2px 3.464px 55.3px 14.7px rgba(0, 0, 0, 0.26);
}
/* ==========================================================================
   Loader
   ========================================================================== */

.loader {
    position: absolute;
    z-index: 2;
    width: 136px;
    left: calc(50% - 68px);
    top: calc(50% - 100px);
    visibility: hidden;
}
.preload-text-wrap {
    position: absolute;
    top: 330px;
    width: 100%;
    visibility: hidden;
}
.preload-text {
    text-transform: uppercase;
    color: white;
    font-size: 15px;
    margin: 0;
    text-align: center;
}
/* ==========================================================================
   iOS Form Styling
   ========================================================================== */

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
    -webkit-appearance: none;
    border-radius: 0;
    font-family: "din-condensed-web";
}
/* ==========================================================================
   Code View
   ========================================================================== */

.code-wrapper {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}
.code-inner {
    position: relative;
    color: white;
    text-align: center;
}
.code-content {
    position: absolute;
    top: 160px;
    width: 100%;
}
.code-title {
    font-size: 24px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    visibility: hidden;
}
.code-intro {
    font-size: 18px;
    margin: 0;
    visibility: hidden;
}
.code-form {
    position: absolute;
    top: 231px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    height: 105px;
    width: 270px;
    margin: 0 auto;
}
.code-input {
    position: absolute;
    top: 4px;
    left: 30px;
    width: 125px;
    height: 47px;
    z-index: 1;
    background-color: transparent;
    border: none;
    color: white;
    text-transform: uppercase;
    line-height: 47px;
    font-size: 24px;
    outline: none;
    opacity: 0;
}
.code-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 107px;
    height: 47px;
    border: none;
    background-color: #d81f44;
    border-radius: 24px;
    color: white;
    font-family: "din-condensed-web";
    text-transform: uppercase;
    font-size: 18px;
    line-height: 47px;
    outline: none;
    opacity: 0;
}
.code-btn-txt {
    opacity: 0;
}
.code-btn-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    visibility: hidden;
}
.button-icon {
    width: 28px;
}
.tick {
    opacity: 0;
}
.code-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 55px;
    border-radius: 28px;
    background-color: #061a26;
    z-index: 0;
}
.error {
    position: absolute;
    top: 55px;
    left: 50%;
    width: 90%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-transform: uppercase;
    color: #d81f44;
    visibility: hidden;
}
/* ==========================================================================
   Suit
   ========================================================================== */

.suit {
    position: absolute;
    z-index: 1;
    width: 401px;
    height: 384px;
    top: 74px;
    left: calc(50% + 5px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
}
.suit-body {
    position: absolute;
    top: 0;
    left: 83px;
    width: 227px;
    height: 384px;
    z-index: 2;
}
.suit-left {
    position: absolute;
    left: 0;
    top: 130px;
    width: 157px;
    height: 109px;
    z-index: 1;
}
.suit-right {
    position: absolute;
    top: 125px;
    right: 0;
    width: 157px;
    height: 109px;
    z-index: 1;
}
.suit-face {
    position: absolute;
    top: 33px;
    left: 134px;
    width: 125px;
    height: 142px;
    z-index: 1;
}
.ring-group {
    visibility: hidden;
}
/* ==========================================================================
   Button
   ========================================================================== */

.btn {
    width: 270px;
    height: 55px;
    border: none;
    border-radius: 28px;
    background-color: white;
    text-align: center;
    font-family: "din-condensed-web";
    color: #d81f44;
    font-size: 18px;
    text-transform: uppercase;
}
.btn-text {
    line-height: 54px;
}
/* ==========================================================================
   Upload View
   ========================================================================== */

.upload {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 320px;
    text-align: center;
    height: 185px;
    font-size: 18px;
}
.upload-intro {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    padding: 0 25px;
    color: #789aa9;
    visibility: hidden;
}
.upload-btn {
    position: relative;
    z-index: 1;
    margin: -10px auto 0;
    visibility: hidden;
}
.upload-btn-text {
    visibility: hidden;
}
.upload-base {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, #09222d 0%, #061a26 100%);
    background: linear-gradient(to bottom, #09222d 0%, #061a26 100%);
    visibility: hidden;
}
.panel-inner {
    width: 100%;
    height: 100%;
}
.use-default {
    position: relative;
    z-index: 1;
    visibility: hidden;
}
/* ==========================================================================
   Links
   ========================================================================== */

.link {
    position: absolute;
    bottom: 15px;
    display: block;
    width: 100%;
    height: 40px;
    padding-top: 9px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
}
.arrow {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
    width: 16px;
    height: 17px;
}
/* ==========================================================================
   Main background
   ========================================================================== */

.background,
.stars-1,
.planet,
.moon,
.comet,
.ufo,
.saturn,
.rocket-launchpad-1,
.clouds {
    visibility: hidden;
}

HTML

<g class="rocket">
                                <path class="thruster" d="M92,101.84c0-.15-1-3.73-1-3.73-.67.49-2.56.86-4.8.89s-4.14-.29-4.82-.76c0,0-.84,3.65-.84,3.81s0,0,0,0h0c.09,1.18,2.64,2.08,5.75,2s5.62-1.05,5.67-2.24h0S92,101.86,92,101.84Z" fill="#a3b8c1" fill-rule="evenodd" />
                                <g class="fin-left">
                                    <path d="M77.19,75.42h0a20.71,20.71,0,0,0-8.1,20.11l3,17.67h1V100.64a9.55,9.55,0,0,1,6.93-9.17h0Z" fill="#a3b8c1" fill-rule="evenodd" />
                                </g>
                                <g class="fin-right">
                                    <path d="M94.79,75.48h0a20.71,20.71,0,0,1,8,20.16l-3.1,17.65h-1l.07-12.57a9.54,9.54,0,0,0-6.87-9.21h0Z" fill="#a3b8c1" fill-rule="evenodd" />
                                </g>
                                <path class="cockpit" d="M90.72,93.64c4.14-3.23,9.69-29,7.58-42.66A34.4,34.4,0,0,0,94.15,39L78,39A34.41,34.41,0,0,0,73.83,50.9c-2.2,13.68,3.26,39.67,7.38,42.75a14.64,14.64,0,0,0,5,.81A11.71,11.71,0,0,0,90.72,93.64Z" fill="#e8edef" fill-rule="evenodd"
                                />
                                <path class="fuel-tank" d="M98.08,68.3A25.68,25.68,0,0,1,86.39,71c-5.68,0-10.79-1.59-12.43-2.62C75.3,80,78.5,91.55,81.17,93.62c0,0-.8,3.47-.79,3.62s0-.12,0-.1V97h0c.09,1,2.64,2.19,5.75,2.13S91.74,98,91.79,97h0s0,0,0,0-.92-3.52-.92-3.52C93.53,91,96.72,79.68,98.08,68.3Z"
                                fill="#c01d3f" fill-rule="evenodd" />
                                <path class="check-base" d="M95.45,71.32c-.72.24-1.53.48-2.42.68-.74.17-1.52.32-2.36.44s-1.52.19-2.33.24c-.57,0-1.15.06-1.75.07H86c-.78,0-1.56,0-2.32-.11s-1.58-.15-2.33-.27S79.75,72.12,79,72s-1.69-.4-2.41-.62a18,18,0,0,1-2.37-.88q.14,1.07.31,2.14t.35,2.16q.19,1.1.4,2.18t.45,2.21a16,16,0,0,0,2.13.89c.64.22,1.35.43,2.12.62s1.33.3,2,.42,1.31.2,2,.26,1.3.1,2,.11h.49c.51,0,1,0,1.47,0,.69,0,1.36-.11,2-.2s1.4-.23,2-.38a20.37,20.37,0,0,0,2.11-.61,15,15,0,0,0,2.13-.93q.25-1.12.48-2.28t.43-2.25q.2-1.1.37-2.22t.33-2.2A19.23,19.23,0,0,1,95.45,71.32Z"
                                fill="#dce5e9" />
                                <g class="check">
                                    <path d="M83.85,77q0,1.11.09,2.17c.68.06,1.37.1,2.07.11V77.11C85.28,77.1,84.56,77.06,83.85,77Z" fill="#313a42" />
                                    <path d="M79.44,76.3q.12,1.11.26,2.18c.67.16,1.39.31,2.14.43q-.09-1.07-.17-2.18C80.89,76.61,80.14,76.46,79.44,76.3Z" fill="#313a42" />
                                    <path d="M95.17,73.53q.15-1.09.28-2.2c-.72.24-1.53.48-2.42.68q-.1,1.11-.22,2.2A24.47,24.47,0,0,0,95.17,73.53Z" fill="#313a42" />
                                    <path d="M88.17,77.05q0,1.11-.1,2.18c.73,0,1.43-.12,2.09-.21q.1-1.08.19-2.19C89.66,76.93,88.93,77,88.17,77.05Z" fill="#313a42" />
                                    <path d="M90.52,74.64q.08-1.08.15-2.19c-.74.11-1.52.19-2.33.24q0,1.1-.08,2.18C89,74.82,89.8,74.74,90.52,74.64Z" fill="#313a42" />
                                    <path d="M81.51,74.56q.07,1.1.16,2.17c.7.11,1.43.2,2.18.27q0-1.07-.08-2.17C83,74.76,82.24,74.67,81.51,74.56Z" fill="#313a42" />
                                    <path d="M86.57,74.94H86q0,1.1,0,2.17h.53c.56,0,1.1,0,1.63-.06q0-1.08.09-2.18C87.71,74.91,87.15,74.93,86.57,74.94Z" fill="#313a42" />
                                    <path d="M76.86,73.5q.14,1.09.3,2.17c.68.22,1.45.44,2.29.63q-.12-1.07-.23-2.17C78.35,73.93,77.56,73.72,76.86,73.5Z" fill="#313a42" />
                                    <path d="M81.51,74.56q-.07-1.08-.14-2.17c-.83-.12-1.62-.27-2.37-.43q.1,1.09.21,2.17C79.93,74.29,80.7,74.43,81.51,74.56Z" fill="#313a42" />
                                    <path d="M86,74.93q0-1.08,0-2.17c-.78,0-1.56,0-2.32-.11q0,1.1.07,2.17C84.51,74.89,85.26,74.93,86,74.93Z" fill="#313a42" />
                                    <path d="M90.52,74.64q-.08,1.11-.17,2.19c.79-.11,1.53-.26,2.22-.42q.13-1.09.25-2.2C92.1,74.37,91.33,74.52,90.52,74.64Z" fill="#313a42" />
                                    <path d="M92.56,76.41q-.13,1.12-.27,2.21a21.67,21.67,0,0,0,2.2-.64q.19-1.1.36-2.23A23,23,0,0,1,92.56,76.41Z" fill="#313a42" />
                                    <path d="M90.16,79q-.1,1.12-.21,2.19c.72-.1,1.4-.23,2-.38q.16-1.08.31-2.22C91.63,78.77,90.92,78.91,90.16,79Z" fill="#313a42" />
                                    <path d="M94.85,75.74a16.64,16.64,0,0,0,2.28-1q.2-1.1.37-2.22a17.82,17.82,0,0,1-2.33,1Q95,74.65,94.85,75.74Z" fill="#313a42" />
                                    <path d="M86.52,79.29H86v2.17h.49c.51,0,1,0,1.47,0q.05-1.06.11-2.18C87.57,79.27,87.05,79.28,86.52,79.29Z" fill="#313a42" />
                                    <path d="M94.49,78q-.19,1.14-.4,2.25a15,15,0,0,0,2.13-.93q.25-1.12.48-2.28A15.68,15.68,0,0,1,94.49,78Z" fill="#313a42" />
                                    <path d="M76.59,71.34a18,18,0,0,1-2.37-.88q.14,1.07.31,2.14a17,17,0,0,0,2.33.9Q76.72,72.42,76.59,71.34Z" fill="#313a42" />
                                    <path d="M81.84,78.91q.09,1.11.19,2.18c.64.11,1.31.2,2,.26q0-1.06-.1-2.18C83.22,79.11,82.52,79,81.84,78.91Z" fill="#313a42" />
                                    <path d="M74.88,74.76q.19,1.1.4,2.18a16,16,0,0,0,2.21.9q-.17-1.07-.34-2.18A16.31,16.31,0,0,1,74.88,74.76Z" fill="#313a42" />
                                    <path d="M77.49,77.84q.18,1.12.38,2.2c.64.22,1.35.43,2.12.62q-.15-1.07-.29-2.19C78.9,78.28,78.15,78.07,77.49,77.84Z" fill="#313a42" />
                                </g>
                                <path class="nose" d="M93,37.19a39.18,39.18,0,0,0-6.9-7.8,39.17,39.17,0,0,0-6.94,7.75C82.46,38.75,90.21,38.88,93,37.19Z" fill="#c01d3f" fill-rule="evenodd" />
                                <path class="top-rivets-base" d="M95.09,40.32A35,35,0,0,0,93.16,37C90.62,38.73,82.52,38.71,79,37a35,35,0,0,0-1.95,3.26C81,42.82,91.38,42.92,95.09,40.32Z" fill="#a3b8c1" fill-rule="evenodd" />
                                <g class="top-rivets">
                                    <circle cx="79.97" cy="39.48" r="0.97" transform="translate(39.23 118.82) rotate(-89.1)" fill="#748591" />
                                    <circle cx="80.05" cy="39.32" r="0.97" transform="translate(39.47 118.74) rotate(-89.1)" fill="#a3b8c1" />
                                    <circle cx="79.94" cy="38.88" r="0.37" transform="translate(39.8 118.2) rotate(-89.1)" fill="#fff" />
                                    <circle cx="83.99" cy="40.1" r="0.97" transform="matrix(0.51, -0.86, 0.86, 0.51, 6.45, 91.57)" fill="#748591" />
                                    <circle cx="84.14" cy="39.99" r="0.97" transform="translate(6.61 91.65) rotate(-59.1)" fill="#a3b8c1" />
                                    <circle cx="84.26" cy="39.56" r="0.37" transform="translate(7.04 91.55) rotate(-59.1)" fill="#fff" />
                                    <circle cx="88.05" cy="40.19" r="0.97" transform="translate(46.48 127.6) rotate(-89.1)" fill="#748591" />
                                    <circle cx="88.13" cy="40.03" r="0.97" transform="translate(46.72 127.52) rotate(-89.1)" fill="#a3b8c1" />
                                    <circle cx="88.02" cy="39.59" r="0.37" transform="translate(47.05 126.98) rotate(-89.1)" fill="#fff" />
                                    <circle cx="92.05" cy="39.67" r="0.97" transform="translate(50.93 131.09) rotate(-89.1)" fill="#748591" />
                                    <circle cx="92.13" cy="39.51" r="0.97" transform="translate(51.17 131) rotate(-89.1)" fill="#a3b8c1" />
                                    <circle cx="92.02" cy="39.07" r="0.37" transform="translate(51.5 130.46) rotate(-89.1)" fill="#fff" />
                                </g>
                                <path d="M91.31,99.19,91,98.12a5.09,5.09,0,0,1-1.92.64,12.43,12.43,0,0,1-2.8.36V95.27a15.38,15.38,0,0,0,4.86-.75l-.28-1h0v0a14.16,14.16,0,0,1-4.59.71L86.12,29.4a39.22,39.22,0,0,0-6.89,7.69L79,37a35,35,0,0,0-1.95,3.26l.18.11A34.58,34.58,0,0,0,73.83,50.9c-.78,4.82-.6,11.16.13,17.5h0v0l.05.44L74,69l0,.38,0,.14.06.48v0l.07.5,0,.12.05.38,0,.14.06.4v.1l.07.5v.06l.07.43,0,.13.06.38,0,.12.16,1,0,.11.07.39,0,.13.07.42v.06l.09.5v0l.08.44,0,.11.08.39,0,.09v0a20.67,20.67,0,0,0-2.09,2.3A39.36,39.36,0,0,0,78.53,92a9.55,9.55,0,0,1,1.14-.46,6.46,6.46,0,0,0,1.5,2l0,.2v0l-.05.22,0,.11v.07l0,.07,0,.09v.15c-.22,1-.53,2.34-.57,2.63a1.67,1.67,0,0,0,1,1.17c-.14.6-.81,3.57-.81,3.7s0,0,0,0v0h0c.09,1,2.64,2.14,5.75,2.09V100.2A13.66,13.66,0,0,0,91.31,99.19Z"
                                fill-rule="evenodd" opacity="0.25" />
                                <path class="fin-shadow" d="M92.21,91.62a9.59,9.59,0,0,1,1.05.43,36.66,36.66,0,0,0,5.39-12.8,20.68,20.68,0,0,0-2-2.17C95.44,83.27,93.8,88.68,92.21,91.62Z" fill="#00485b" fill-rule="evenodd" opacity="0.12" />
                                <g class="window">
                                    <g opacity="0.24">
                                        <path d="M86.22,47.18a9.93,9.93,0,1,1-10,9.9,9.93,9.93,0,0,1,10-9.9Z" fill-rule="evenodd" />
                                    </g>
                                    <path d="M86.33,47.29a9.82,9.82,0,1,1-9.84,9.79,9.82,9.82,0,0,1,9.84-9.79Z" fill="#a3b8c1" fill-rule="evenodd" />
                                    <circle class="window-base" cx="86.3" cy="57.1" r="6.83" transform="translate(28.95 143.24) rotate(-89.83)" fill="#052e4c" />
                                    <g class="rivets">
                                        <circle cx="81.44" cy="64.15" r="0.83" transform="translate(-17.85 93.99) rotate(-54.95)" fill="#748591" />
                                        <circle cx="91.11" cy="50.37" r="0.83" transform="translate(-2.45 96.03) rotate(-54.95)" fill="#748591" />
                                        <circle cx="85.53" cy="65.65" r="0.83" transform="translate(12.62 145.07) rotate(-84.95)" fill="#748591" />
                                        <circle cx="87.02" cy="48.88" r="0.83" transform="translate(30.67 131.25) rotate(-84.95)" fill="#748591" />
                                        <circle cx="89.83" cy="64.89" r="0.83" transform="translate(-18.99 43.95) rotate(-24.95)" fill="#748591" />
                                        <circle cx="82.72" cy="49.63" r="0.83" transform="translate(-13.21 39.53) rotate(-24.95)" fill="#748591" />
                                        <circle cx="93.17" cy="62.09" r="0.83" transform="translate(-11.17 102.71) rotate(-54.95)" fill="#748591" />
                                        <circle cx="79.38" cy="52.43" r="0.83" transform="translate(-9.12 87.31) rotate(-54.95)" fill="#748591" />
                                        <circle cx="94.66" cy="58" r="0.83" transform="translate(28.56 147.19) rotate(-84.95)" fill="#748591" />
                                        <circle cx="77.89" cy="56.52" r="0.83" transform="translate(14.74 129.14) rotate(-84.95)" fill="#748591" />
                                        <circle cx="93.91" cy="53.71" r="0.83" transform="translate(-13.89 44.63) rotate(-24.95)" fill="#748591" />
                                        <circle cx="78.64" cy="60.81" r="0.83" transform="translate(-18.31 38.85) rotate(-24.95)" fill="#748591" />
                                        <circle cx="81.52" cy="64.01" r="0.83" transform="translate(-17.7 93.99) rotate(-54.95)" fill="#a3b8c1" />
                                        <circle cx="91.19" cy="50.23" r="0.83" transform="translate(-2.3 96.04) rotate(-54.95)" fill="#a3b8c1" />
                                        <circle cx="85.61" cy="65.51" r="0.83" transform="translate(12.83 145.02) rotate(-84.95)" fill="#a3b8c1" />
                                        <circle cx="87.09" cy="48.74" r="0.83" transform="matrix(0.09, -1, 1, 0.09, 30.88, 131.21)" fill="#a3b8c1" />
                                        <circle cx="89.9" cy="64.76" r="0.83" transform="translate(-18.93 43.97) rotate(-24.95)" fill="#a3b8c1" />
                                        <circle cx="82.8" cy="49.49" r="0.83" transform="translate(-13.15 39.55) rotate(-24.95)" fill="#a3b8c1" />
                                        <circle cx="93.24" cy="61.96" r="0.83" transform="translate(-11.02 102.71) rotate(-54.95)" fill="#a3b8c1" />
                                        <circle cx="79.46" cy="52.29" r="0.83" transform="translate(-8.98 87.32) rotate(-54.95)" fill="#a3b8c1" />
                                        <circle cx="94.74" cy="57.86" r="0.83" transform="translate(28.76 147.14) rotate(-84.95)" fill="#a3b8c1" />
                                        <circle cx="77.97" cy="56.38" r="0.83" transform="translate(14.94 129.09) rotate(-84.95)" fill="#a3b8c1" />
                                        <circle cx="93.98" cy="53.57" r="0.83" transform="translate(-13.83 44.65) rotate(-24.95)" fill="#a3b8c1" />
                                        <circle cx="78.72" cy="60.67" r="0.83" transform="translate(-18.25 38.87) rotate(-24.95)" fill="#a3b8c1" />
                                        <circle cx="81.44" cy="63.66" r="0.32" transform="translate(-17.45 93.78) rotate(-54.95)" fill="#fff" />
                                        <circle cx="91.13" cy="49.85" r="0.32" transform="translate(-2.02 95.83) rotate(-54.95)" fill="#fff" />
                                        <circle cx="85.54" cy="65.16" r="0.32" transform="translate(13.11 144.64) rotate(-84.95)" fill="#fff" />
                                        <circle cx="87.03" cy="48.36" r="0.32" transform="translate(31.2 130.79) rotate(-84.95)" fill="#fff" />
                                        <circle cx="89.84" cy="64.4" r="0.32" transform="translate(-18.78 43.91) rotate(-24.95)" fill="#fff" />
                                        <circle cx="82.73" cy="49.11" r="0.32" transform="translate(-13 39.48) rotate(-24.95)" fill="#fff" />
                                        <circle cx="93.19" cy="61.6" r="0.32" transform="translate(-10.76 102.52) rotate(-54.95)" fill="#fff" />
                                        <circle cx="79.38" cy="51.92" r="0.32" transform="translate(-8.71 87.09) rotate(-54.95)" fill="#fff" />
                                        <circle cx="94.69" cy="57.5" r="0.32" transform="translate(29.08 146.76) rotate(-84.95)" fill="#fff" />
                                        <circle cx="77.88" cy="56.02" r="0.32" transform="translate(15.23 128.67) rotate(-84.95)" fill="#fff" />
                                        <circle cx="93.93" cy="53.2" r="0.32" transform="translate(-13.68 44.59) rotate(-24.95)" fill="#fff" />
                                        <circle cx="78.64" cy="60.32" r="0.32" transform="translate(-18.11 38.81) rotate(-24.95)" fill="#fff" />
                                    </g>
                                </g>
                                <path class="nose-shine" d="M86.19,30.05a12.87,12.87,0,0,1,1.18,4.34c.06,1.66,1,3.28,2.39,2.87,1.77-.53.27-2.83.27-2.83A43.21,43.21,0,0,0,86.19,30.05Z" fill="#fff" opacity="0.3" />
                                <g class="window-shine" opacity="0.8">
                                    <path d="M83.93,51.51a6,6,0,0,0-1.7,1.09,7.91,7.91,0,0,0,1.31,2.19A9.71,9.71,0,0,0,87,57.1a6.79,6.79,0,0,1,4,3.78l.24-.31a6,6,0,0,0,.87-1.81,8.76,8.76,0,0,0-4.3-3.46A7.85,7.85,0,0,1,85,53.45,6.53,6.53,0,0,1,83.93,51.51Z" fill="#07638c" fill-rule="evenodd"
                                    />
                                    <path d="M90.13,61.78a8.73,8.73,0,0,0-4.36-3.56A7.85,7.85,0,0,1,83,56.38a8.55,8.55,0,0,1-1.45-3l-.18.24a6,6,0,0,0-1,2.31,7.31,7.31,0,0,0,1.14,1.8A9.71,9.71,0,0,0,84.94,60a6.87,6.87,0,0,1,3.47,2.74A6,6,0,0,0,90.13,61.78Z" fill="#07638c" fill-rule="evenodd"
                                    />
                                </g>
                                <g class="right-shine">
                                    <path d="M99.27,81.36a25.74,25.74,0,0,1,2.62,14.95l-.39,3.23.63-3.58A20.71,20.71,0,0,0,99.27,81.36Z" fill="#e8edef" fill-rule="evenodd" />
                                </g>
                                <g class="left-shine">
                                    <path d="M72.47,81.36a25.74,25.74,0,0,0-2.62,14.95l.39,3.23L69.61,96A20.71,20.71,0,0,1,72.47,81.36Z" fill="#e8edef" fill-rule="evenodd" />
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
        </svg>

<div class="preload-text-wrap">
            <p class="preload-text">Preparing to launch</p>
        </div>

<div class="code-inner">
                <div class="code-content">
                    <h1 class="code-title">Got your code?</h1>
                    <p class="code-intro">Enter it here to launch your rocket!</p>
                </div>
                <form class="code-form" action="">
                    <input class="code-input" type="text" placeholder="CODE" />
                    <button class="code-btn">
                        <span class="code-btn-txt">Submit</span>
                        <div class="code-btn-icons">
                            <svg class="button-icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 28 28">
                                <path class="tick" d="M26.75,7.5l-15,15L3.25,14" transform="translate(-1 -1)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="6" />
                                
                            </svg>
                        </div>
                    </button>
                    <div class="code-base"></div>
                    <p class="error"></p>
                </form>
            </div>

</div>

</svg>

<button class="btn upload-btn">
                    <span class="btn-text upload-btn-text">Upload your profile image</span>
                </button>
                <p class="upload-intro">Choose one of your images for your Eddie Rocket’s astronaut profile.</p>
                <a href="#" class="link use-default">Or use the default image
					<svg class="arrow" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 34">
						<title>Arrow</title>
						<path d="M31,16.88A2.54,2.54,0,0,0,30.25,15L17,1.77A2.64,2.64,0,0,0,15.12,1a2.59,2.59,0,0,0-1.83.77L11.76,3.3a2.56,2.56,0,0,0,0,3.67l6,6H3.38A2.44,2.44,0,0,0,1,15.57v2.61a2.44,2.44,0,0,0,2.38,2.61H17.73l-6,6a2.61,2.61,0,0,0,0,3.71L13.29,32a2.66,2.66,0,0,0,1.83.75A2.71,2.71,0,0,0,17,32L30.25,18.73A2.62,2.62,0,0,0,31,16.88Z" fill="#fff"/>
					</svg>
				</a>
            </div>
            <div class="upload-base"></div>
        </div>

</div>

</div>

输入发射密码：123456，换个头像试试穿上宇航服遨游太空的感觉。可用于太空旅游类营销网站。

svg, rocket

编辑器支持Emmet

快捷键

输入发射密码：123456，换个头像试试穿上宇航服遨游太空的感觉。 可用于太空旅游类营销网站。

svg, rocket

HTML5 GSAP 纸飞机动画

HTML5数字艺术 - 炫彩辐射线变换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

输入发射密码：123456，换个头像试试穿上宇航服遨游太空的感觉。可用于太空旅游类营销网站。