Home > Article > Web Front-end > Animated Cards Love Code with the html css and javascript coding for learning https://www.instagram.com/webstreet_code/

Animated Cards Love Code with the html css and javascript coding for learning https://www.instagram.com/webstreet_code/

DDDOriginal: 2024-10-28 06:30:02209browse

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Cards</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #111;
    font-family: Arial, sans-serif;
    overflow: hidden;
    padding-top: 80px;
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .card {
    width: 250px;
    height: 200px;
    background: #1a1a1a;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: transform 0.6s ease, background 0.5s ease, box-shadow 0.5s ease;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
  }

  .card-content {
    position: absolute;
    backface-visibility: hidden;
  }

  .card-front {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    animation: glow 2s ease-in-out infinite;
  }

  .card-back {
    transform: rotateY(180deg);
    font-size: 3rem;
  }

  .card:hover {
    background: #ff007f;
    box-shadow: 0 0 20px rgba(0, 255, 234, 0.8);
  }

  .card.rotated {
    transform: rotateY(180deg);
  }

  /* Glowing and pulsing effect for front text */
  @keyframes glow {
    0%, 100% {
      text-shadow: 0 0 8px #ff007f, 0 0 12px #ff007f, 0 0 20px #ff007f;
      color: #ff007f;
    }
    50% {
      text-shadow: 0 0 8px #00ffea, 0 0 12px #00ffea, 0 0 20px #00ffea;
      color: #00ffea;
    }
  }

  .emoji-animation {
    position: absolute;
    bottom: 0;
    animation: floatUp 2s ease-in-out infinite;
    font-size: 1.8rem;
    opacity: 0;
  }

  @keyframes floatUp {
    0% {
      transform: translateY(-10px);
      opacity: 1;
    }
    100% {
      transform: translateY(-600px);
      opacity: 0;
    }
  }
</style>
</head>
<body>
  <div class="card-container">
    <div class="card" onclick="rotateCard(this, 'fa-heart')">
      <div class="card-content card-front"><p>Love</p></div>
      <div class="card-content card-back"><i class="fas fa-heart"></i></div>
    </div>
    <div class="card" onclick="rotateCard(this, 'fa-gem')">
      <div class="card-content card-front"><p>Gem</p></div>
      <div class="card-content card-back"><i class="fas fa-gem"></i></div>
    </div>
    <div class="card" onclick="rotateCard(this, 'fa-fire')">
      <div class="card-content card-front"><p>Fire</p></div>
      <div class="card-content card-back"><i class="fas fa-fire"></i></div>
    </div>
    <div class="card" onclick="rotateCard(this, 'fa-rainbow')">
      <div class="card-content card-front"><p>Rainbow</p></div>
      <div class="card-content card-back"><i class="fas fa-rainbow"></i></div>
    </div>
  </div>

  <script>
    function rotateCard(card, iconClass) {
      card.classList.toggle('rotated');

      if (card.classList.contains('rotated')) {
        for (let i = 0; i < 20; i++) {
          const emojiElement = document.createElement('div');
          emojiElement.classList.add('emoji-animation');
          emojiElement.innerHTML = `<i class="fas ${iconClass}"></i>`;

          // Randomize color for each icon
          emojiElement.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
          emojiElement.style.left = `${Math.random() * 100}%`;
          emojiElement.style.animationDuration = `${1 + Math.random() * 2}s`;

          document.body.appendChild(emojiElement);

          // Remove icon after animation
          emojiElement.addEventListener('animationend', () => {
            emojiElement.remove();
          });
        }
      }
    }
  </script>
</body>
</html>

The above is the detailed content of Animated Cards Love Code with the html css and javascript coding for learning https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html for 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：Why Does My Regular Expression Pattern Fail with the \"v\" Flag in HTML Pattern Attribute?Next article：Why Does My Regular Expression Pattern Fail with the \"v\" Flag in HTML Pattern Attribute?

See more

Animated Cards Love Code with the html css and javascript coding for learning https://www.instagram.com/webstreet_code/

Code

Related articles