使用 html css 和 javascript 的計算器 ui 的未來。

  
  
  <title>霓虹燈玻璃計算器</title>
  
   *{
    框大小：邊框框；
    保證金：0；
    填充：0；
   }
   身體{
    字體系列：“Poppins”，無襯線字體；
    背景：線性漸層（135deg，#000428，#004e92）；
    高度：100vh；
    顯示：柔性；
    調整內容：居中；
    對齊項目：居中；
   }
   。計算機{
    背景：rgba(255, 255, 255, 0.1);
      盒子陰影：0 8px 32px rgba(0, 0, 0, 0.37);
      背景過濾器：模糊（10px）；
      邊框半徑：20px；
      內邊距：20px；
      寬度：350px；
      最大寬度：90%；

   }

   。展示 {
      背景：rgba(255, 255, 255, 0.2);
      框陰影：圖 0 4px 12px rgba(255, 255, 255, 0.5);
      顏色：#fff；
      字體大小：2.5rem；
      文字對齊：右對齊；
      內邊距：20px 10px；
      邊框半徑：10px；
      下邊距：20px；
    }
    .按鈕{
      顯示：網格；
      網格模板列：重複（4，1fr）；
      間隙：15px；
    }
    按鈕 {
      背景：rgba(255, 255, 255, 0.1);
      邊框：無；
      框陰影: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) 圖解;
      顏色：#fff；
      字體大小：1.5rem；
      內邊距：20px；
      邊框半徑：12px；
      過渡：變換0.3s，box-shadow 0.3s；
      遊標：指針；
    }

    按鈕：活動{
      變換：縮放（0.95）；
      框陰影: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) 圖解;
    }
    按鈕.操作符{
      背景：rgba(255, 255, 255, 0.2);
      顏色：#00ffff；
      框陰影: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) 圖解;
    }

    按鈕.operator:active {
      框陰影: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) 圖解;
    }


















  風格>
頭>

  <div>




          </div>

            
        

以上是使用 html css 和 javascript 的計算器 ui 的未來。的詳細內容。更多資訊請關注PHP中文網其他相關文章！