animación de avión

1,141 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

27 May 2025

Tarjeta de pago

22 November 2025

Animación de carga de CSS Spinner

19 May 2025

Relojes inteligentes de lujo que redefinen la elegancia y la tecnología

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>

CSS