suchen

Heim >Web-Frontend >js-Tutorial >Animierte Karten Love Code mit der HTML-CSS- und Javascript-Codierung zum Lernen https://www.instagram.com/webstreet_code/

Animierte Karten Love Code mit der HTML-CSS- und Javascript-Codierung zum Lernen https://www.instagram.com/webstreet_code/

DDD
DDDOriginal
2024-10-28 06:30:02289Durchsuche

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

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

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>

Das obige ist der detaillierte Inhalt vonAnimierte Karten Love Code mit der HTML-CSS- und Javascript-Codierung zum Lernen https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html for 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：Warum schlägt mein Muster für reguläre Ausdrücke mit dem Flag „v“ im HTML-Musterattribut fehl?Nächster Artikel：Warum schlägt mein Muster für reguläre Ausdrücke mit dem Flag „v“ im HTML-Musterattribut fehl?

In Verbindung stehende Artikel

Mehr sehen