Zukunft der Rechner-Benutzeroberfläche mit HTML-CSS und Javascript.-js-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-14 16:56:15

Original

754 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!