suchen

Heim >Web-Frontend >js-Tutorial >Zukunft der Rechner-Benutzeroberfläche mit HTML-CSS und Javascript.

Zukunft der Rechner-Benutzeroberfläche mit HTML-CSS und Javascript.

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-14 16:56:15801Durchsuche

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neonglas-Rechner</title>
  <Stil>
   *{
    Boxgröße: border-box;
    Rand: 0;
    Polsterung: 0;
   }
   Körper{
    Schriftfamilie: „Poppins“, serifenlos;
    Hintergrund: linear-gradient(135deg, #000428, #004e92);
    Höhe: 100 Vh;
    Anzeige: Flex;
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
   }
   .Kalkulator{
    Hintergrund: rgba(255, 255, 255, 0,1);
      Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0,37);
      Hintergrundfilter: Unschärfe (10 Pixel);
      Randradius: 20px;
      Polsterung: 20px;
      Breite: 350px;
      maximale Breite: 90 %;

   }

   .Anzeige {
      Hintergrund: rgba(255, 255, 255, 0,2);
      box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5);
      Farbe: #fff;
      Schriftgröße: 2,5rem;
      Textausrichtung: rechts;
      Polsterung: 20px 10px;
      Randradius: 10px;
      Rand unten: 20px;
    }
    .buttons {
      Anzeige: Raster;
      Rastervorlagenspalten: wiederholen(4, 1fr);
      Lücke: 15px;
    }
    Taste {
      Hintergrund: rgba(255, 255, 255, 0,1);
      Grenze: keine;
      box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) Einschub;
      Farbe: #fff;
      Schriftgröße: 1,5rem;
      Polsterung: 20px;
      Randradius: 12px;
      Übergang: Transformation 0,3 s, Box-Shadow 0,3 s;
      Cursor: Zeiger;
    }

    button:aktiv {
      transform: Skala(0,95);
      box-shadow: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) Einschub;
    }
    button.operator {
      Hintergrund: rgba(255, 255, 255, 0,2);
      Farbe: #00ffff;
      box-shadow: 0 4px 15px rgba(255, 165, 0, 0,5), 0 0 10px rgba(255, 165, 0, 0,7) Einschub;
    }

    button.operator:active {
      box-shadow: 0 4px 25px rgba(255, 165, 0, 0,7), 0 0 15px rgba(255, 165, 0, 1) Einschub;
    }


















  </style>
</head>
<Körper>
  <div>

Das obige ist der detaillierte Inhalt vonZukunft der Rechner-Benutzeroberfläche mit HTML-CSS und Javascript.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Filter using operator pointer display margin padding border viewport background transform transition flex ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche Prototyping- und Schließungsmethoden gibt es, um benutzerdefinierte Objekte in JavaScript zu erstellen?Nächster Artikel：Welche Prototyping- und Schließungsmethoden gibt es, um benutzerdefinierte Objekte in JavaScript zu erstellen?

In Verbindung stehende Artikel

Mehr sehen