HTML 古硬幣旋轉動畫程式(coin-animation)

2025-03-30 jash.liao Comments 0 Comment

HTML 古硬幣旋轉動畫程式(coin-animation)

資料來源:圖片(chatgpt)+網頁程式(copilot)

GITHUB: https://github.com/jash-git/coin-animation

coin-animation00 單純硬幣旋轉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>硬幣旋轉動畫</title>
  <style>
    /* 硬幣容器樣式 */
    .coin-container {
      perspective: 1000px;
      width: 200px; /* 容器寬度 */
      height: 200px; /* 容器高度 */
      margin: 50px auto; /* 置中 */
    }

    /* 硬幣樣式 */
    .coin {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 3s infinite linear; /* 旋轉動畫 */
    }

    /* 硬幣的正面與背面 */
    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      backface-visibility: hidden;
    }

    /* 正面樣式 */
    .front {
      background-image: url('./01.png'); /* 替換為正面圖片 */
    }

    /* 背面樣式 */
    .back {
      background-image: url('./02.png'); /* 替換為背面圖片 */
      transform: rotateY(180deg);
    }

    /* 旋轉動畫 */
    @keyframes rotate {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="coin-container">
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>

  <script>
    const coin = document.querySelector('.coin');

    // 暫停旋轉
    coin.addEventListener('mouseover', () => {
      coin.style.animationPlayState = 'paused';
    });

    // 繼續旋轉
    coin.addEventListener('mouseout', () => {
      coin.style.animationPlayState = 'running';
    });
  </script>
</body>
</html>

coin-animation01 一次五個硬幣旋轉並在五秒後停止並記錄正反面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>硬幣旋轉與結果記錄</title>
  <style>
    /* 硬幣容器樣式 */
    .coin-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }

    /* 硬幣樣式 */
    .coin {
      width: 100px;
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
    }

    /* 硬幣的正面與背面 */
    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      backface-visibility: hidden;
    }

    /* 正面樣式 */
    .front {
      background-image: url('./01.png'); /* 替換為正面圖片 */
    }

    /* 背面樣式 */
    .back {
      background-image: url('./02.png'); /* 替換為背面圖片 */
      transform: rotateY(180deg);
    }

    /* 旋轉動畫 */
    @keyframes rotate {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(360deg);
      }
    }

    /* 結果顯示區域樣式 */
    .results {
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <button id="rotate-button">開始旋轉</button>
  <div class="coin-container" id="coin-container">
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="coin">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>
  <div class="results" id="results">
    <h3>硬幣結果：</h3>
    <ul id="result-list"></ul>
  </div>

  <script>
    const coins = document.querySelectorAll('.coin');
    const button = document.getElementById('rotate-button');
    const resultList = document.getElementById('result-list');

    button.addEventListener('click', () => {
      resultList.innerHTML = ''; // 清空之前的結果

      // 讓所有硬幣開始旋轉
      coins.forEach(coin => {
        coin.style.animation = 'rotate 1s infinite linear'; // 設置旋轉動畫
      });

      // 5秒後隨機停止旋轉並記錄結果
      setTimeout(() => {
        coins.forEach((coin, index) => {
          coin.style.animation = ''; // 移除動畫以停止旋轉
          const isFront = Math.random() < 0.5; // 隨機生成正面或背面
          const rotation = isFront ? 'rotateY(0deg)' : 'rotateY(180deg)';
          coin.style.transform = rotation; // 設定硬幣的最終狀態

          // 記錄結果
          const resultItem = document.createElement('li');
          resultItem.textContent = `硬幣 ${index + 1}: ${isFront ? '正面' : '背面'}`;
          resultList.appendChild(resultItem);
        });
      }, 5000);
    });
  </script>
</body>
</html>

發表迴響取消回覆