Jeu de correspondance de cartes en html css et javascript suivez-nous sur instagram : https://www.instagram.com/webstreet

Jeu de correspondance de cartes en html css et javascript suivez-nous sur instagram : https://www.instagram.com/webstreet_code/

Linda Hamilton

Libérer： 2024-11-26 03:00:10

original

701 Les gens l'ont consulté

Cards matching game using html css and javascript follow us on instagram: https://www.instagram.com/webstreet_code/

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jeu de correspondance de cartes</title>
  <style>
    corps {
      famille de polices : Arial, sans empattement ;
      arrière-plan : dégradé linéaire (-45deg, #1a2a6c, #b21f1f, #fdbb2d, #0f2027) ;
      taille de l'arrière-plan : 400 % 400 % ;
      animation : gradientBG 8s facilite l'infini ;
      couleur : #fff ;
      affichage : flexible ;
      direction flexible : colonne ;
      aligner les éléments : centre ;
      justifier-contenu : centre ;
      hauteur : 100vh ;
      marge : 0 ;
    }

    @keyframes dégradéBG {
      0 % {position d'arrière-plan : 0 % 50 % ; }
      50 % { position d'arrière-plan : 100 % 50 % ; }
      100 % { position d'arrière-plan : 0 % 50 % ; }
    }

    h1 {
      taille de police : 2rem ;
      marge inférieure : 20 px ;
    }

    .grille {
      affichage : grille ;
      grille-modèle-colonnes : répéter (4, 100 px );
      écart de grille : 15 px ;
    }

    .carte {
      largeur : 80 px ;
      hauteur : 80px ;
      perspective : 1000px ;
    }

    .card-inner {
      position : relative ;
      largeur : 100 % ;
      hauteur : 100 % ;
      transition : transformation 0,6 s, ombre de boîte 0,3 s ;
      style de transformation : préserver-3d ;
      curseur : pointeur ;
    }

    .card-inner: survoler {
      box-shadow : 0 4px 20px rgba(255, 255, 255, 0,5);
      transformation : échelle (1.1);
    }

    .card-inner.fliped {
      transformation : rotationY (180 deg );
    }

    .card-front,
    .dos de carte {
      position : absolue ;
      largeur : 100 % ;
      hauteur : 100 % ;
      visibilité arrière : cachée ;
      rayon de bordure : 10 px ;
    }

    .card-front {
      arrière-plan : #444 ;
      affichage : flexible ;
      aligner les éléments : centre ;
      justifier-contenu : centre ;
      bordure : 2px solide #fff ;
      box-shadow : 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card-front span {
      taille de police : 2rem ;
      couleur : #fff ;
    }

    .dos de carte {
      arrière-plan : #fff ;
      transformation : rotationY (180 deg );
      affichage : flexible ;
      aligner les éléments : centre ;
      justifier-contenu : centre ;
      taille de police : 3rem ;
      poids de la police : gras ;
      rayon de bordure : 10 px ;
    }

    .coeur rouge {
      couleur : rouge ;
    }

    .coeur jaune {
      couleur : or ;
    }

    .coeur-orange {
      couleur : orange ;
    }

    @keyframes brillent {
      0% { box-shadow : 0 0 10px rgba(255, 255, 255, 0,2); }
      50 % { box-shadow : 0 0 30px rgba(255, 255, 255, 0,5); }
      100 % { box-shadow : 0 0 10px rgba(255, 255, 255, 0,2); }
    }
  </style>
&Lt;/tête>
<corps>


  <h1>JEU DE MATCH DE CARTES</h1>


  <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!