Karten-Matching-Spiel mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet

Karten-Matching-Spiel mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

Linda Hamilton

Freigeben： 2024-11-26 03:00:10

Original

714 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kartenspiel</title>
  <Stil>
    Körper {
      Schriftfamilie: Arial, serifenlos;
      Hintergrund: linearer Farbverlauf (-45 Grad, #1a2a6c, #b21f1f, #fdbb2d, #0f2027);
      Hintergrundgröße: 400 % 400 %;
      Animation: GradientBG 8s Leichtigkeit unendlich;
      Farbe: #fff;
      Anzeige: Flex;
      Flexrichtung: Spalte;
      align-items: center;
      rechtfertigen-Inhalt: Mitte;
      Höhe: 100 Vh;
      Rand: 0;
    }

    @keyframes gradientBG {
      0 % { Hintergrundposition: 0 % 50 %; }
      50 % { Hintergrundposition: 100 % 50 %; }
      100 % { Hintergrundposition: 0 % 50 %; }
    }

    h1 {
      Schriftgröße: 2rem;
      Rand unten: 20px;
    }

    .Netz {
      Anzeige: Raster;
      Rastervorlagenspalten: wiederholen(4, 100px);
      Gitterlücke: 15px;
    }

    .card {
      Breite: 80px;
      Höhe: 80px;
      Perspektive: 1000px;
    }

    .card-inner {
      Position: relativ;
      Breite: 100 %;
      Höhe: 100 %;
      Übergang: Transformation 0,6 s, Box-Shadow 0,3 s;
      Transformationsstil: Preserve-3D;
      Cursor: Zeiger;
    }

    .card-inner:hover {
      Box-Shadow: 0 4px 20px rgba(255, 255, 255, 0,5);
      transformieren: Skala(1.1);
    }

    .card-inner.flipped {
      transformieren: rotationY(180deg);
    }

    .Kartenvorderseite,
    .card-back {
      Position: absolut;
      Breite: 100 %;
      Höhe: 100 %;
      Sichtbarkeit der Rückseite: versteckt;
      Randradius: 10px;
    }

    .card-front {
      Hintergrund: #444;
      Anzeige: Flex;
      align-items: center;
      rechtfertigen-Inhalt: Mitte;
      Rand: 2px fest #fff;
      Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card-front span {
      Schriftgröße: 2rem;
      Farbe: #fff;
    }

    .card-back {
      Hintergrund: #fff;
      transformieren: rotationY(180deg);
      Anzeige: Flex;
      align-items: center;
      rechtfertigen-Inhalt: Mitte;
      Schriftgröße: 3rem;
      Schriftstärke: fett;
      Randradius: 10px;
    }

    .red-heart {
      Farbe: rot;
    }

    .gelbes Herz {
      Farbe: Gold;
    }

    .orange-heart {
      Farbe: orange;
    }

    @keyframes leuchten {
      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>
</head>
<Körper>


  <h1>KARTENSPIEL</h1>


  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKarten-Matching-Spiel mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!