使用 html css 和 javascript 的计算器 ui 的未来。-js教程-PHP中文网

使用 html css 和 javascript 的计算器 ui 的未来。

Mary-Kate Olsen

发布： 2024-12-14 16:56:15

原创

752 人浏览过

Future of Calculator ui using html css and javascript.

<html lang="zh-cn">
<头>
  
  
  <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中文网其他相关文章！