<!DOCTYPE html>
<html>
<head>
<title>记忆卡片</title>
<style>
.card {
width: 300px;
height: 200px;
background-color: lightblue;
border-radius: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s;
}.card.flipped {
transform: translate(-50%, -50%) rotateY(180deg);
}.card .front,
.card .back {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}.card .back img {
max-width: 100%;
max-height: 100%;
transition: transform 2s linear;
}.card .back img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="card-container">
<div class="card" οnclick="flipCard(this)">
<div class="front">点击翻转</div>
<div class="back"><img src="image1.jpg" alt="记忆图片1"></div>
</div>
<div class="card" οnclick="flipCard(this)">
<div class="front">点击翻转</div>
<div class="back"><img src="image2.jpg" alt="记忆图片2"></div>
</div>
<div class="card" οnclick="flipCard(this)">
<div class="front">点击翻转</div>
<div class="back"><img src="image3.jpg" alt="记忆图片3"></div>
</div>
</div><script>
var cards = document.querySelectorAll('.card');
var currentIndex = 0;function flipCard(card) {
card.classList.toggle('flipped');
currentIndex = (currentIndex + 1) % cards.length;
setTimeout(function() {
cards[currentIndex].classList.toggle('flipped');
}, 500);
}
</script>
</body>
</html>
你可以将`image1.jpg`、`image2.jpg`和`image3.jpg`替换为你自己的图片路径
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
