Animação de nave espacial alienígena em CSS com estrelas

496 ByBy.inc

Abrir no Editor Publique Seu Código

Animação de nave espacial alienígena em CSS com estrelas

Recomendado

29 June 2025

Power Gym: Modelo HTML de condicionamento físico, treinamento e aulas

22 September 2025

Trecho de animação de neurônio HTML

3 March 2025

Design de Orbe

HTML

<div class="container">
        
        <div class="trail"></div>
        
        
        <div class="particles">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>
        
        
        <div class="glow"></div>
        <div class="glow"></div>
        
        <div class="base">
            <div class="sphere">
                <div class="segment longitude-0"></div>
                <div class="segment longitude-15"></div>
                <div class="segment longitude-30"></div>
                <div class="segment longitude-45"></div>
                <div class="segment longitude-60"></div>
                <div class="segment longitude-75"></div>
                <div class="segment longitude-90"></div>
                <div class="segment longitude-105"></div>
                <div class="segment longitude-120"></div>
                <div class="segment longitude-135"></div>
                <div class="segment longitude-150"></div>
                <div class="segment longitude-165"></div>
                <div class="segment longitude-180"></div>
                <div class="segment latitude-0"></div>
                <div class="segment latitude-15"></div>
                <div class="segment latitude-30"></div>
                <div class="segment latitude-45"></div>
                <div class="segment latitude-60"></div>
                <div class="segment latitude-75"></div>
                <div class="segment latitude-90"></div>
                <div class="segment latitude-105"></div>
                <div class="segment latitude-120"></div>
                <div class="segment latitude-135"></div>
                <div class="segment latitude-150"></div>
                <div class="segment latitude-165"></div>
                <div class="segment diagonal-1"></div>
                <div class="segment diagonal-2"></div>
                <div class="segment diagonal-3"></div>
                <div class="segment diagonal-4"></div>
                <div class="segment diagonal-5"></div>
                <div class="segment diagonal-6"></div>
                <div class="segment diagonal-7"></div>
                <div class="segment diagonal-8"></div>
                <div class="segment diagonal-9"></div>
                <div class="segment diagonal-10"></div>
                <div class="segment diagonal-11"></div>
                <div class="segment diagonal-12"></div>
                <div class="segment diagonal-13"></div>
                <div class="segment diagonal-14"></div>
                <div class="segment diagonal-15"></div>
                <div class="segment diagonal-16"></div>
                <div class="segment diagonal-17"></div>
                <div class="segment diagonal-18"></div>
                <div class="segment diagonal-19"></div>
                <div class="segment diagonal-20"></div>
                <div class="segment diagonal-21"></div>
                <div class="segment diagonal-22"></div>
                <div class="segment diagonal-23"></div>
                <div class="segment diagonal-24"></div>
            </div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
            <div class="baseSegments"></div>
        </div>
    </div>
</body>

CSS

* {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: radial-gradient(ellipse at center, #0a0a2e 0%, #000 70%);
        }

/* Animações base */
        @keyframes floatBase {
            0% { transform: translateY(0px) scale(2); }
            50% { transform: translateY(-20px) scale(2); }
            100% { transform: translateY(0px) scale(2); }
        }

@keyframes alienAnimation {
            0% {
                transform: scale(0.02) translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
                opacity: 0.3;
                filter: blur(5px);
            }
            15% {
                transform: scale(0.1) translate3d(-200px, 150px, -100px) rotateY(45deg) rotateX(-15deg);
                opacity: 0.6;
                filter: blur(3px);
            }
            30% {
                transform: scale(0.3) translate3d(100px, -80px, -50px) rotateY(-30deg) rotateX(10deg);
                opacity: 0.8;
                filter: blur(2px);
            }
            45% {
                transform: scale(0.6) translate3d(-50px, 40px, 20px) rotateY(15deg) rotateX(-5deg);
                opacity: 0.9;
                filter: blur(1px);
            }
            60% {
                transform: scale(1) translate3d(30px, -20px, 50px) rotateY(-10deg) rotateX(3deg);
                opacity: 1;
                filter: blur(0.5px);
            }
            75% {
                transform: scale(1.4) translate3d(-15px, 10px, 30px) rotateY(5deg) rotateX(-2deg);
                opacity: 1;
                filter: blur(0px);
            }
            100% {
                transform: scale(2) translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
                opacity: 1;
                filter: blur(0px);
            }
        }

/* Container principal */
        .container {
            animation: alienAnimation 5s linear forwards, floatBase 2s linear infinite;
            animation-delay: 0s, 5s;
            position: relative;
        }

/* Rastro da nave */
        .trail {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

.trail::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(74, 144, 226, 0.4) 0%, transparent 70%);
            border-radius: 50%;
            animation: trailPulse 3s infinite ease-out;
        }

.trail::after {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: radial-gradient(circle, rgba(255, 165, 0, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            animation: trailPulse 4s infinite ease-out;
            animation-delay: 0.5s;
        }

@keyframes trailPulse {
            0% { transform: scale(0.8); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

/* Partículas orbitando */
        .particles {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
        }

.particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            filter: blur(1px);
            animation: orbit 8s linear infinite;
            box-shadow: 0 0 10px 2px rgba(74, 144, 226, 0.7);
        }

.particle:nth-child(1) {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            animation-delay: 0s;
            background: rgba(74, 144, 226, 0.9);
        }

.particle:nth-child(2) {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            animation-delay: -2s;
            background: rgba(255, 165, 0, 0.9);
        }

.particle:nth-child(3) {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            animation-delay: -4s;
            background: rgba(220, 20, 60, 0.9);
        }

.particle:nth-child(4) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            animation-delay: -6s;
            background: rgba(138, 43, 226, 0.9);
        }

@keyframes orbit {
            0% {
                transform: rotate(0deg) translateX(150px) rotate(0deg);
            }
            100% {
                transform: rotate(360deg) translateX(150px) rotate(-360deg);
            }
        }

/* Luzes e brilhos */
        .glow {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(74, 144, 226, 0.3) 0%, transparent 60%);
            filter: blur(10px);
            z-index: -1;
            animation: glowPulse 3s infinite alternate;
        }

.glow:nth-child(2) {
            background: radial-gradient(circle, rgba(255, 165, 0, 0.2) 0%, transparent 70%);
            filter: blur(15px);
            animation-delay: 0.5s;
        }

@keyframes glowPulse {
            0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
            100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
        }

/* Estrelas */
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 2s infinite alternate;
        }
        .star.small {
            width: 1px;
            height: 1px;
        }
        .star.medium {
            width: 2px;
            height: 2px;
        }
        .star.large {
            width: 3px;
            height: 3px;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
        }
        @keyframes twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

/* Posições das estrelas */
        .star:nth-child(1) { top: 15%; left: 10%; animation-delay: 0.2s; animation-duration: 2.5s; }
        .star:nth-child(2) { top: 25%; left: 25%; animation-delay: 1.1s; animation-duration: 1.8s; }
        .star:nth-child(3) { top: 8%; left: 40%; animation-delay: 0.7s; animation-duration: 3.2s; }
        .star:nth-child(4) { top: 35%; left: 60%; animation-delay: 1.8s; animation-duration: 2.1s; }
        .star:nth-child(5) { top: 55%; left: 15%; animation-delay: 0.4s; animation-duration: 2.8s; }
        .star:nth-child(6) { top: 70%; left: 35%; animation-delay: 1.5s; animation-duration: 1.6s; }
        .star:nth-child(7) { top: 45%; left: 80%; animation-delay: 0.9s; animation-duration: 2.4s; }
        .star:nth-child(8) { top: 80%; left: 70%; animation-delay: 1.2s; animation-duration: 3.1s; }
        .star:nth-child(9) { top: 20%; left: 85%; animation-delay: 0.6s; animation-duration: 1.9s; }
        .star:nth-child(10) { top: 90%; left: 20%; animation-delay: 1.7s; animation-duration: 2.6s; }

/* Base da nave */
        .base .baseSegments {
            position: absolute;
            width: 25px;
            height: 92px;
            left: 94px;
            top: 54px;
            transform-origin: 6px 100px;
            background: linear-gradient(135deg, 
                #ff4500 0%, 
                #ff6b35 15%, 
                #ffa500 30%, 
                #ffcc00 50%, 
                #ff8c00 70%, 
                #ff6347 85%, 
                #dc143c 100%);
            border-radius: 2px;
            box-shadow: inset 0 0 15px rgba(255, 165, 0, 0.6),
                        0 0 25px rgba(255, 140, 0, 0.4),
                        0 0 50px rgba(255, 69, 0, 0.3);
        }

/* Esfera principal */
        .sphere {
            width: 80px;
            height: 80px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
            opacity: 1;
            transform-style: preserve-3d;
            animation: rotateSegmentsReverse 4s linear infinite;
            z-index: 10;
            filter: drop-shadow(0 0 15px rgba(74, 144, 226, 0.7));
        }

.segment {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: none;
            backface-visibility: visible;
            opacity: 1;
        }

/* Classes de rotação longitude */
        .longitude-0 { transform: rotateY(0deg); }
        .longitude-15 { transform: rotateY(15deg); }
        .longitude-30 { transform: rotateY(30deg); }
        .longitude-45 { transform: rotateY(45deg); }
        .longitude-60 { transform: rotateY(60deg); }
        .longitude-75 { transform: rotateY(75deg); }
        .longitude-90 { transform: rotateY(90deg); }
        .longitude-105 { transform: rotateY(105deg); }
        .longitude-120 { transform: rotateY(120deg); }
        .longitude-135 { transform: rotateY(135deg); }
        .longitude-150 { transform: rotateY(150deg); }
        .longitude-165 { transform: rotateY(165deg); }
        .longitude-180 { transform: rotateY(180deg); }

/* Classes de rotação latitude */
        .latitude-0 { transform: rotateX(0deg); }
        .latitude-15 { transform: rotateX(15deg); }
        .latitude-30 { transform: rotateX(30deg); }
        .latitude-45 { transform: rotateX(45deg); }
        .latitude-60 { transform: rotateX(60deg); }
        .latitude-75 { transform: rotateX(75deg); }
        .latitude-90 { transform: rotateX(90deg); }
        .latitude-105 { transform: rotateX(105deg); }
        .latitude-120 { transform: rotateX(120deg); }
        .latitude-135 { transform: rotateX(135deg); }
        .latitude-150 { transform: rotateX(150deg); }
        .latitude-165 { transform: rotateX(165deg); }

/* Classes diagonais */
        .diagonal-1 { transform: rotateX(30deg) rotateY(30deg); }
        .diagonal-2 { transform: rotateX(30deg) rotateY(60deg); }
        .diagonal-3 { transform: rotateX(30deg) rotateY(90deg); }
        .diagonal-4 { transform: rotateX(30deg) rotateY(120deg); }
        .diagonal-5 { transform: rotateX(30deg) rotateY(150deg); }
        .diagonal-6 { transform: rotateX(30deg) rotateY(180deg); }
        .diagonal-7 { transform: rotateX(60deg) rotateY(30deg); }
        .diagonal-8 { transform: rotateX(60deg) rotateY(60deg); }
        .diagonal-9 { transform: rotateX(60deg) rotateY(90deg); }
        .diagonal-10 { transform: rotateX(60deg) rotateY(120deg); }
        .diagonal-11 { transform: rotateX(60deg) rotateY(150deg); }
        .diagonal-12 { transform: rotateX(60deg) rotateY(180deg); }
        .diagonal-13 { transform: rotateX(-30deg) rotateY(30deg); }
        .diagonal-14 { transform: rotateX(-30deg) rotateY(60deg); }
        .diagonal-15 { transform: rotateX(-30deg) rotateY(90deg); }
        .diagonal-16 { transform: rotateX(-30deg) rotateY(120deg); }
        .diagonal-17 { transform: rotateX(-30deg) rotateY(150deg); }
        .diagonal-18 { transform: rotateX(-30deg) rotateY(180deg); }
        .diagonal-19 { transform: rotateX(-60deg) rotateY(30deg); }
        .diagonal-20 { transform: rotateX(-60deg) rotateY(60deg); }
        .diagonal-21 { transform: rotateX(-60deg) rotateY(90deg); }
        .diagonal-22 { transform: rotateX(-60deg) rotateY(120deg); }
        .diagonal-23 { transform: rotateX(-60deg) rotateY(150deg); }
        .diagonal-24 { transform: rotateX(-60deg) rotateY(180deg); }

/* Cores dos segmentos */
        .segment {
            background: radial-gradient(circle at 30% 30%, 
                #4a90e2,
                #357abd,
                #2c5aa0);
            border: none;
        }

/* Base da nave */
        .base {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            z-index: 1;
            transform: rotateX(0deg) rotateY(0deg);
            margin: 50px auto;
            animation: rotateSegments 4s linear infinite;
        }

@keyframes rotateSegmentsReverse {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(-360deg); }
        }

@keyframes rotateSegments {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }

@keyframes sphereGlow {
            0% {
                box-shadow: 
                    inset -10px -10px 20px rgba(0, 0, 139, 0.5),
                    inset 10px 10px 20px rgba(135, 206, 250, 0.3),
                    0 0 30px rgba(30, 144, 255, 0.6),
                    0 0 60px rgba(0, 191, 255, 0.4),
                    0 0 100px rgba(0, 255, 255, 0.2);
            }
            100% {
                box-shadow: 
                    inset -15px -15px 30px rgba(0, 0, 139, 0.7),
                    inset 15px 15px 30px rgba(135, 206, 250, 0.5),
                    0 0 50px rgba(30, 144, 255, 0.8),
                    0 0 100px rgba(0, 191, 255, 0.6),
                    0 0 150px rgba(0, 255, 255, 0.4);
            }
        }

/* Posicionamento dos segmentos da base */
        .base .baseSegments:nth-child(1) { transform: rotateY(0deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(2) { transform: rotateY(12deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(3) { transform: rotateY(24deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(4) { transform: rotateY(36deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(5) { transform: rotateY(48deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(6) { transform: rotateY(60deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(7) { transform: rotateY(72deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(8) { transform: rotateY(84deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(9) { transform: rotateY(96deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(10) { transform: rotateY(108deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(11) { transform: rotateY(120deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(12) { transform: rotateY(132deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(13) { transform: rotateY(144deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(14) { transform: rotateY(156deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(15) { transform: rotateY(168deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(16) { transform: rotateY(180deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(17) { transform: rotateY(192deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(18) { transform: rotateY(204deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(19) { transform: rotateY(216deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(20) { transform: rotateY(228deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(21) { transform: rotateY(240deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(22) { transform: rotateY(252deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(23) { transform: rotateY(264deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(24) { transform: rotateY(276deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(25) { transform: rotateY(288deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(26) { transform: rotateY(300deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(27) { transform: rotateY(312deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(28) { transform: rotateY(324deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(29) { transform: rotateY(336deg) translateZ(120px) rotateX(60deg); }
        .base .baseSegments:nth-child(30) { transform: rotateY(348deg) translateZ(120px) rotateX(60deg); }
         .base .baseSegments:nth-child(31) { transform: rotateY(360deg) translateZ(120px) rotateX(60deg); }

Recomendado

Power Gym: Modelo HTML de condicionamento físico, treinamento e aulas

Trecho de animação de neurônio HTML

Design de Orbe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS