L'avenir de l'interface utilisateur de la calculatrice utilisant HTML CSS et Javascript.-js tutoriel-php.cn

L'avenir de l'interface utilisateur de la calculatrice utilisant HTML CSS et Javascript.

Mary-Kate Olsen

Libérer： 2024-12-14 16:56:15

original

792 Les gens l'ont consulté

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculatrice en verre néon</title>
  <style>
   *{
    dimensionnement de la boîte : bordure-boîte ;
    marge : 0 ;
    remplissage : 0 ;
   }
   corps{
    famille de polices : "Poppins", sans-serif ;
    arrière-plan : dégradé linéaire (135 degrés, #000428, #004e92) ;
    hauteur : 100vh ;
    affichage : flexible ;
    justifier-contenu : centre ;
    aligner les éléments : centre ;
   }
   .calculatrice{
    arrière-plan : rgba(255, 255, 255, 0,1) ;
      ombre de la boîte : 0 8px 32px rgba(0, 0, 0, 0,37) ;
      filtre de toile de fond : flou (10 px );
      rayon de bordure : 20 px ;
      remplissage : 20 px ;
      largeur : 350 px ;
      largeur maximale : 90 % ;

   }

   .afficher {
      arrière-plan : rgba(255, 255, 255, 0,2) ;
      box-shadow : encart 0 4px 12px rgba(255, 255, 255, 0.5);
      couleur : #fff ;
      taille de police : 2,5rem ;
      aligner le texte : à droite ;
      remplissage : 20px 10px ;
      rayon de bordure : 10 px ;
      marge inférieure : 20 px ;
    }
    .boutons {
      affichage : grille ;
      grille-modèle-colonnes : répéter (4, 1fr);
      écart : 15 px ;
    }
    bouton {
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      bordure : aucune ;
      box-shadow : 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) encart ;
      couleur : #fff ;
      taille de police : 1,5rem ;
      remplissage : 20 px ;
      rayon de bordure : 12 px ;
      transition : transformation 0,3 s, ombre de boîte 0,3 s ;
      curseur : pointeur ;
    }

    bouton : actif {
      transformation : échelle (0,95) ;
      box-shadow : 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) encart ;
    }
    bouton.opérateur {
      arrière-plan : rgba(255, 255, 255, 0,2) ;
      couleur : #00ffff ;
      box-shadow : 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) encart ;
    }

    bouton.opérateur:actif {
      box-shadow : 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) encart ;
    }


















  </style>
&Lt;/tête>
<corps>
  <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!