Animation CSS d'un vaisseau spatial extraterrestre avec des étoiles

494 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Animation CSS d'un vaisseau spatial extraterrestre avec des étoiles

Recommandé

19 March 2025

Cases à cocher sabre laser Star Wars en CSS3 pur

23 August 2025

Guide des marques automobiles mondiales (turc)

20 March 2024

Modèle de page de destination HTML avec animations

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); }

Recommandé

Cases à cocher sabre laser Star Wars en CSS3 pur

Guide des marques automobiles mondiales (turc)

Modèle de page de destination HTML avec animations

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS