lanciare un razzo

764 byby.createsite

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 May 2025

Un codice di jrj332790

27 December 2024

Una home page creata con directory

28 May 2025

Un codice di emmanuelbossro2004

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>

lanciare un razzo

Consigliato

Un codice di jrj332790

Una home page creata con directory

Un codice di emmanuelbossro2004

HTML

CSS

JS

Consigliato

Un codice di jrj332790

Una home page creata con directory

Un codice di emmanuelbossro2004

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS