lancer une fusée

167 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 December 2024

Une page d'accueil créée avec des annuaires

29 December 2024

Une page d'accueil alternative

5 January 2025

Une page d'accueil sur la lavande

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 créée avec des annuaires

Une page d'accueil alternative

Une page d'accueil sur la lavande

HTML

CSS

JS

Recommandé

Une page d'accueil créée avec des annuaires

Une page d'accueil alternative

Une page d'accueil sur la lavande

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS