animation d'avion

731 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 November 2025

Animation d'un sapin de Noël au format SVG avec JavaScript

24 May 2024

Animation de défilement de parallaxe

22 September 2025

Extrait d'animation HTML Neuron

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Uçuş Yolu ve Gündüz/Gece Teması</title>
  <style>
    :root {
      --sky-color-day: #87ceeb;
      --sky-color-night: #0b1d3a;
      --sun: #ffd700;
      --moon: #f0f8ff;
      --stars: #fff;
    }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: sans-serif;
    }

.scene {
      width: 100%;
      height: 100vh;
      background: var(--sky-color-day);
      transition: background 2s ease-in-out;
      position: relative;
    }

body.dark .scene {
      background: var(--sky-color-night);
    }

.plane {
      width: 60px;
      height: 40px;
      background: gray;
      position: absolute;
      top: 50%;
      left: -60px;
      transform: translateY(-50%);
      border-radius: 10px;
      animation: fly 8s linear infinite;
      z-index: 2;
    }

.plane::after {
      content: '';
      position: absolute;
      top: 50%;
      left: -100vw;
      width: 100vw;
      height: 3px;
      background: linear-gradient(to right, rgba(255,255,255,0.5), transparent);
      transform: translateY(-50%);
      animation: fly-trail 8s linear infinite;
    }

@keyframes fly {
      0% {
        left: -60px;
      }
      100% {
        left: 100vw;
      }
    }

@keyframes fly-trail {
      0% {
        left: -100vw;
      }
      100% {
        left: 100vw;
      }
    }

.sun, .moon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: absolute;
      top: 10%;
      left: 80%;
      background: var(--sun);
      transition: background 2s ease-in-out, opacity 2s ease;
      z-index: 1;
    }

.moon {
      background: transparent;
    }

body.dark .sun {
      background: transparent;
    }

body.dark .moon {
      background: var(--moon);
    }

.stars {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-image: radial-gradient(var(--stars) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: 0;
      transition: opacity 2s;
      z-index: 0;
    }

body.dark .stars {
      opacity: 0.8;
    }

#toggleTheme {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 3;
      padding: 10px 20px;
      font-size: 16px;
      background: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

#toggleTheme:hover {
      background: #eee;
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="stars"></div>
    <div class="sun"></div>
    <div class="moon"></div>
    <div class="plane"></div>
    <button id="toggleTheme">Gece/Gündüz</button>
  </div>

animation d'avion

Recommandé

Animation d'un sapin de Noël au format SVG avec JavaScript

Animation de défilement de parallaxe

Extrait d'animation HTML Neuron

HTML

CSS

JS

Recommandé

Animation d'un sapin de Noël au format SVG avec JavaScript

Animation de défilement de parallaxe

Extrait d'animation HTML Neuron

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS