Masa Depan Kalkulator ui menggunakan html css dan javascript.-tutorial js-php.cn

Masa Depan Kalkulator ui menggunakan html css dan javascript.

Mary-Kate Olsen

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

asal

752 orang telah melayarinya

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator Kaca Neon</title>
  <gaya>
   *{
    saiz kotak: kotak sempadan;
    margin: 0;
    padding: 0;
   }
   badan{
    font-family: "Poppins",sans-serif;
    latar belakang: kecerunan linear(135deg, #000428, #004e92);
    ketinggian: 100vh;
    paparan: flex;
    justify-content: pusat;
    align-item: tengah;
   }
   .kalkulator{
    latar belakang: rgba(255, 255, 255, 0.1);
      bayang-kotak: 0 8px 32px rgba(0, 0, 0, 0.37);
      backdrop-filter: blur(10px);
      jejari sempadan: 20px;
      padding: 20px;
      lebar: 350px;
      lebar maksimum: 90%;

   }

   .paparan {
      latar belakang: rgba(255, 255, 255, 0.2);
      bayang kotak: inset 0 4px 12px rgba(255, 255, 255, 0.5);
      warna: #fff;
      saiz fon: 2.5rem;
      text-align: kanan;
      padding: 20px 10px;
      jejari sempadan: 10px;
      jidar bawah: 20px;
    }
    .butang {
      paparan: grid;
      grid-template-columns: repeat(4, 1fr);
      jurang: 15px;
    }
    butang {
      latar belakang: rgba(255, 255, 255, 0.1);
      sempadan: tiada;
      bayang-kotak: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) inset;
      warna: #fff;
      saiz fon: 1.5rem;
      padding: 20px;
      jejari sempadan: 12px;
      peralihan: mengubah 0.3s, kotak-bayang 0.3s;
      kursor: penunjuk;
    }

    butang:aktif {
      transform: skala (0.95);
      bayang-kotak: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) inset;
    }
    button.operator {
      latar belakang: rgba(255, 255, 255, 0.2);
      warna: #00ffff;
      bayang-kotak: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) inset;
    }

    button.operator:active {
      bayang kotak: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) inset;
    }


















  </style>
</head>
<badan>
  <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Masa Depan Kalkulator ui menggunakan html css dan javascript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!