Animación CSS de nave espacial extraterrestre con estrellas

1337 byby.createsite

Abrir en el editor Video Publica tu código

Animación CSS de nave espacial extraterrestre con estrellas

Recomendado

13 July 2024

Plantilla de formulario de inicio de sesión más sencilla

14 March 2025

Esfera CSS 3D falsa con textura

13 April 2024

Tarjeta CSS sencilla

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

Plantilla de formulario de inicio de sesión más sencilla

Esfera CSS 3D falsa con textura

Tarjeta CSS sencilla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS