lancer une fusée

938 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

26 March 2025

Page de destination pour une entreprise de vélos

16 November 2024

Comment créer une barre latérale de grille en CSS

2 February 2026

Intégrer une page externe dans une iframe

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lançar Foguete</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: black;
            background-image: url('https://byby-inc.github.io/estrelas.svg');
            background-repeat: no-repeat;
            background-size: 100vw 100vh;
            background-position: 50% 0%;
            display: flex;
            justify-content: center;
            align-self: center;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: Arial, Helvetica, sans-serif;            
        }
        /* ::before do container para esconder o fogo, antes do foguete ser lançado, e aproveitar o translate
        do foguete para parecer que o fogo esta crescendo,(background igual a imagem de fundo e z-index na frente
        para desfarçar e parecer que o fogo esta desligado) */
        .container::before {
            content: '';
            position: absolute;
            bottom: 75px; 
            left: 132px; 
            width: 36px;
            height: 36px;
            background: linear-gradient(to top, #006aa3 ,#003a54);
            clip-path: polygon(50% 0, 100% 100%, 0 100%); 
            transform: rotateX(180deg); 
            border-radius: 5px; 
            z-index: 2;
            animation: hideBase 2s linear forwards;
        }
        /* chão para manter o foguete feito com css apenas */
        .ground{
            background: radial-gradient(circle, black 1px, transparent 1px),#808080;
            background-size: 10px 10px;
            width: 100%;
            height: 95px;
            position: absolute;
            bottom: 0;
            border: none;
            outline: none;
            z-index: 3;
            left: 0;
            transform: translateY(var(--scroll-offset, 0px));
        }
        /* container do foguete */
        .container{
            scale: 0.6;
            width: 300px;
            height: 300px;
            position: absolute;
            bottom: -2%;
            left: 40%;
            transform: translateY(var(--scroll-offset, 0px));
        }
        /* foguete com animacao */
        .rocket{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            animation: animacaoRocket 8s linear forwards, floatRocket 1s ease-in-out infinite 8s;
        }
        /* texto para mostrar depois do foguete ter sido lançado */
        .text {
            position: absolute;
            bottom: 160%;
            left: 49%;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            opacity: 1;
        }
        /* animacao para esconde o before do foguete depois de ter sido lancado (opcional) */
        @keyframes hideBase {
            to {
                visibility: hidden;
            }
        }
       /* animacao do foguete mantendo o angulo da imagem -45 e dando curva junto com translate */
        @keyframes animacaoRocket {
            0% {
                transform: rotateZ(-45deg) translate(0, 0);
            }
            20% {
                transform: rotateZ(-45deg) translate(0, 0);
            }
            30% {
                transform: rotateZ(-40deg) translate(150px, -150px);
            }
            40% {
                transform: rotateZ(-35deg) translate(250px, -250px);
            }
            50% {
                transform: rotateZ(-30deg) translate(400px, -400px);
                --scroll-offset: 0px;
            }
            60% {
                transform: rotateZ(-30deg) translate(600px, -600px);
                --scroll-offset: -600px;
            }
            70% {
                transform: rotateZ(-30deg) translate(750px, -750px);
                --scroll-offset: -750px;
            }
            100% {
                transform: rotateZ(-30deg) translate(800px, -800px);
                --scroll-offset: -800px;
            }

}
        /* animacao do foguete flutuando */
        @keyframes floatRocket {
            0%, 100% {
                transform: rotateZ(-30deg) translate(800px, -800px);
            }
            50% {
                transform: rotateZ(-30deg) translate(810px, -810px);
            }
        }

/* animação para seguir o foguete */
        .ground, .container,.text {
            animation: elementFollow 8s linear forwards;
        }

@keyframes elementFollow {
            0%, 49.9% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(0);
            }
            60% {
                transform: translateY(800px);
            }
            70% {
                transform: translateY(850px);
            }
            80%, 100% {
                transform: translateY(900px);
            }
        }
    </style>
</head>
<body class="transition">
    
    <div class="container">
        <img src="https://byby-inc.github.io/rocket.svg" alt="foguete" class="rocket">
    </div>    
    <div class="ground"></div>
    <div class="text">Lançar Foguete</div>
</body>
</html>

Recommandé

Page de destination pour une entreprise de vélos

Comment créer une barre latérale de grille en CSS

Intégrer une page externe dans une iframe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS