HTML 古硬幣旋轉動畫程式(coin-animation)
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>