lancer une fusée

1,154 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 March 2025

Page de destination pour une entreprise de vélos

28 December 2024

Une page d'accueil matricielle créée avec des index

15 April 2026

Pokémon Lune Émeraude Extrême Aléatoire

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>

CSS