cari

Rumah >hujung hadapan web >tutorial js >Masa Depan Kalkulator ui menggunakan html css dan javascript.

Masa Depan Kalkulator ui menggunakan html css dan javascript.

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-14 16:56:15753semak imbas

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>

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!

JavaScript css html Filter using operator pointer display margin padding border viewport background transform transition flex ui
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Apakah Cara Prototaip dan Penutupan untuk Mencipta Objek Tersuai dalam JavaScript?Artikel seterusnya：Apakah Cara Prototaip dan Penutupan untuk Mencipta Objek Tersuai dalam JavaScript?

Artikel berkaitan

Lihat lagi