suchen

Heim >Web-Frontend >js-Tutorial >Karten-Matching-Spiel mit HTML-CSS und Javascript. Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-26 03:00:10779Durchsuche

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>

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!

JavaScript css html using pointer display position margin border viewport background transform transition animation column flex https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich JavaScript-Arrays erweitern, ohne ein neues Array zu erstellen?Nächster Artikel：Wie kann ich JavaScript-Arrays erweitern, ohne ein neues Array zu erstellen?

In Verbindung stehende Artikel

Mehr sehen