lancer une fusée

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 January 2025

Une page d'accueil parfaite conçue avec Leon matrex

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>

lancer une fusée

Recommandé

Une page d'accueil bizarre

Senarig une page d'accueil

Une page d'accueil parfaite conçue avec Leon matrex

HTML

CSS

JS

Recommandé

Une page d'accueil bizarre

Senarig une page d'accueil

Une page d'accueil parfaite conçue avec Leon matrex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS