我將創建一個具有真實感的撲克牌翻面效果，包含多種交互方式和視覺細節。
設計思路
下面是下面是完整實現：
html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #2980b9, #2c3e50);
color: white;
overflow-x: hidden;
.container {
text-align: center;
max-width: 800px;
width: 95%;
padding: 20px;
h1 {
margin-bottom: 30px;
font-weight: 600;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
.controls {
margin-bottom: 40px;
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
button {
padding: 10px 18px;
border: none;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.15);
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
button:hover {
background-color: rgba(52, 152, 219, 0.7);
transform: translateY(-2px);
button.active {
background-color: rgba(41, 128, 185, 0.9);
box-shadow: 0 0 16px rgba(51, 152, 253, 0.7);
.cards-container {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
margin-top: 35px;
.scene {
width: 200px;
height: 280px;
perspective: 1200px;
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
cursor: pointer;
transition: transform 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 10px 10px rgba(0, 0, 0, 0.32);
border-radius: 11px;
.card.flipped {
transform: rotateY(180deg);
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 13px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 17px;
overflow: hidden;
.card-front {
background: radial-gradient(circle at top left, #ffffff, #f5f5f5);
color: black;
transform: rotateY(180deg);
border: 1px solid #ddd;
.card-back {
background: linear-gradient(135deg, #c62828, #e53935);
color: white;
.card-corner {
display: flex;
flex-direction: column;
align-items: center;
font-size: 22px;
font-weight: bold;
.top-left {
align-self: flex-start;
.bottom-right {
align-self: flex-end;
transform: rotate(180deg);
.card-suit {
font-size: 28px;
.card-center {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
font-size: 70px;
.pattern {
position: absolute;
width: 400%;
height: 150%;
left: -130%;
top: -65%;
opacity: 0.08;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 27px,
white 29px,
white 31px
);
transform: rotate(45deg);
.explanation {
margin-top: 55px;
background-color: rgba(44, 62, 80, 0.75);
padding: 24px;
border-radius: 19px;
line-height: 1.6;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
backdrop-filter: blur(8px);
max-width: 700px;
margin-left: auto;
margin-right: auto;
h2 {
margin-bottom: 15px;
color: #3498db;
悟空德州p {
margin-bottom: 14px;
@media (max-width: 768px) {
.cards-container {
gap: 36px;
.scene {
width: 160px;
height: 224px;
.card-corner {
font-size: 21px;
.card-suit {
font-size: 26px;
.card-center {
font-size: 62px;
@media (max-width: 480px) {
.controls {
flex-direction: column;
align-items: center;
.scene {
width: 140px;
height: 196px;
撲克牌翻面效果展示
A
A
K
K
實現原理說明
CSS 3D 變換: 使用 CSS 的 transform 和 transform-style 屬性創建逼真的 3D 翻轉效果。
雙面設計: 每張牌由正面和背面組成，通過 backface-visibility 控制可見性。
交互動畫: 通過 JavaScript 監聽不同事件（懸停、點擊）并應用 CSS 類觸發翻轉動畫。
視覺優化: 添加了陰影、漸變背景和圖案紋理，使卡片更具立體感和真實感。
document.addEventListener('DOMContentLoaded', function {
const cards = document.querySelectorAll('.card');
const hoverModeBtn = document.getElementById('hoverMode');
const clickModeBtn = document.getElementById('clickMode');
const autoFlipBtn = document.getElementById('autoFlip');
const resetAllBtn = document.getElementById('resetAll');
let currentMode = 'hover';
let intervalId = null;
// 懸停模式
function enableHoverMode {
clearInterval(intervalId);
cards.forEach(card => {
card.classList.remove('flipped');
card.onmouseenter = function {
this.classList.add('flipped');
};
};
card.onmouseleave = function {
this.classList.remove('flipped');
};
};
// 移除點擊事件
card.onclick = null;
});
// 點擊模式
function enableClickMode {
clearInterval(intervalId);
cards.forEach(card => {
card.classList.remove('flipped');
card.onmouseenter = null;
card.onmouseleave = null;
card.onclick = function {
this.classList.toggle('flipped');
};
});
// 自動翻轉
function enableAutoFlip {
cards.forEach(card => {
card.onmouseenter = null;
card.onmouseleave = null;
card.onclick = null;
});
intervalId = setInterval(function {
cards.forEach((card, index) => {
setTimeout( => {
card.classList.toggle('flipped');
}, index * 300);
});
}, 2500);
// 重置所有
function resetAllCards {
clearInterval(intervalId);
cards.forEach(card => {
card.classList.remove('flipped');
});
if (currentMode === 'hover') {
enableHoverMode;
} else if (currentMode === 'click') {
enableClickMode;
// 按鈕事件監聽
hoverModeBtn.addEventListener('click', function {
currentMode = 'hover';
updateButtonStates;
enableHoverMode;
});
clickModeBtn.addEventListener('click', function {
currentMode = 'click';
updateButtonStates;
enableClickMode;
});
autoFlipBtn.addEventListener('click', function {
currentMode = 'auto';
updateButtonStates;
enableAutoFlip;
});
resetAllBtn.addEventListener('click', resetAllCards);
// 更新按鈕狀態
function updateButtonStates {
[hoverModeBtn, clickModeBtn, autoFlipBtn].forEach(btn => {
btn.classList.remove('active');
});
if (currentMode === 'hover') {
hoverModeBtn.classList.add('active');
} else if (currentMode === 'click') {
clickModeBtn.classList.add('active');
} else if (currentMode === 'auto') {
autoFlipBtn.classList.add('active');
// 初始化
enableHoverMode;
updateButtonStates;
});
功能亮點
1. 三種交互模式
2. 視覺細節
3. 響應式設計
您可以直接復制此代碼到HTML文件中運行，體驗完整的撲克牌翻面效果！