animación de avión

612 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

18 June 2025

Libro de brujas

24 May 2024

Animación de desplazamiento de paralaje

28 September 2025

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

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>

animación de avión

Recomendado

Libro de brujas

Animación de desplazamiento de paralaje

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

HTML

CSS

JS

Recomendado

Libro de brujas

Animación de desplazamiento de paralaje

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS