Home >Web Front-end >JS Tutorial >Cards matching game using html css and javascript follow us on instagram: https://www.instagram.com/webstreet_code/

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

Linda HamiltonOriginal: 2024-11-26 03:00:10704browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Match Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(-45deg, #1a2a6c, #b21f1f, #fdbb2d, #0f2027);
      background-size: 400% 400%;
      animation: gradientBG 8s ease infinite;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 20px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 100px);
      grid-gap: 15px;
    }

    .card {
      width: 80px;
      height: 80px;
      perspective: 1000px;
    }

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s, box-shadow 0.3s;
      transform-style: preserve-3d;
      cursor: pointer;
    }

    .card-inner:hover {
      box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
      transform: scale(1.1);
    }

    .card-inner.flipped {
      transform: rotateY(180deg);
    }

    .card-front,
    .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
    }

    .card-front {
      background: #444;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card-front span {
      font-size: 2rem;
      color: #fff;
    }

    .card-back {
      background: #fff;
      transform: rotateY(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: bold;
      border-radius: 10px;
    }

    .red-heart {
      color: red;
    }

    .yellow-heart {
      color: gold;
    }

    .orange-heart {
      color: orange;
    }

    @keyframes glow {
      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>
<body>


  <h1>CARD MATCH GAME</h1>


  <div>

The above is the detailed content of Cards matching game using html css and javascript follow us on instagram: https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html using pointer display position margin border viewport background transform transition animation column flex https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Extend JavaScript Arrays Without Creating a New Array?Next article：How Can I Extend JavaScript Arrays Without Creating a New Array?

See more

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

Related articles