HTML CSS と JavaScript を使用した電卓 UI の将来。-jsチュートリアル-php.cn

HTML CSS と JavaScript を使用した電卓 UI の将来。

Mary-Kate Olsen

リリース： 2024-12-14 16:56:15

オリジナル

753 人が閲覧しました

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="ja">

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>ネオンガラス電卓</title>
  
   *{
    ボックスのサイズ設定: ボーダーボックス;
    マージン: 0;
    パディング: 0;
   }
   体{
    フォントファミリー: "ポピンズ"、サンセリフ;
    背景: 線形グラデーション(135度、#000428、#004e92);
    高さ: 100vh;
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
   }
   。電卓{
    背景: rgba(255, 255, 255, 0.1);
      ボックスシャドウ: 0 8px 32px rgba(0, 0, 0, 0.37);
      背景フィルター: ぼかし(10px);
      境界半径: 20px;
      パディング: 20px;
      幅: 350ピクセル;
      最大幅: 90%;

   }

   。画面 {
      背景: rgba(255, 255, 255, 0.2);
      ボックスシャドウ: インセット 0 4px 12px rgba(255, 255, 255, 0.5);
      色: #fff;
      フォントサイズ: 2.5rem;
      テキスト整列: 右;
      パディング: 20px 10px;
      境界半径: 10px;
      マージン-ボトム: 20px;
    }
    .ボタン {
      表示: グリッド;
      グリッド テンプレート列:repeat(4, 1fr);
      ギャップ: 15px;
    }
    ボタン {
      背景: rgba(255, 255, 255, 0.1);
      境界線: なし。
      box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4)、0 0 10px rgba(0, 255, 255, 0.7) インセット;
      色: #fff;
      フォントサイズ: 1.5rem;
      パディング: 20px;
      境界半径: 12px;
      トランジション: トランスフォーム 0.3 秒、ボックスシャドウ 0.3 秒。
      カーソル: ポインタ;
    }

    ボタン:アクティブ {
      変換: スケール(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) インセット;
    }

    button.operator:active {
      ボックスシャドウ: 0 4px 25px rgba(255, 165, 0, 0.7)、0 0 15px rgba(255, 165, 0, 1) インセット;
    }


















  </スタイル>
</head>

  <div>




          </div>

ログイン後にコピー

以上がHTML CSS と JavaScript を使用した電卓 UI の将来。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。