animation d'avion

538 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 September 2024

Animation de la ligne de fréquence cardiaque

30 November 2024

Animations pilotées par défilement

13 September 2025

Animation de chargement CSS : Ellipse Loader

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>

Recommandé

Animation de la ligne de fréquence cardiaque

Animations pilotées par défilement

Animation de chargement CSS : Ellipse Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS