animação de avião

539 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

21 July 2025

Entrada de upload de arquivo com ícone SVG

5 March 2025

Site do planejador de datas

20 September 2025

Modelo de formulário de login de girassol em HTML

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>

animação de avião

Recomendado

Entrada de upload de arquivo com ícone SVG

Site do planejador de datas

Modelo de formulário de login de girassol em HTML

HTML

CSS

JS

Recomendado

Entrada de upload de arquivo com ícone SVG

Site do planejador de datas

Modelo de formulário de login de girassol em HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS