我将为您创建一个视觉效果，让扑克牌具有分色背景的效果。这种设计能够增强卡片的视觉吸引力，同时保持其可读性。
设计思路
下面是完整代码实现：
html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
color: #333;
.container {
max-width: 1200px;
width: 100%;
text-align: center;
h1 {
margin-bottom: 10px;
color: #2c3e50;
font-size: 36px;
.subtitle {
margin-bottom: 30px;
color: #7f8c8d;
font-size: 18px;
.card-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 60px;
.card {
position: relative;
width: 250px;
height: 350px;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
overflow: hidden;
transition: transform 0.6s ease, box-shadow 0.3s ease;
cursor: pointer;
.card:hover {
transform: translateY(-10px) rotate(2deg);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
.card-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 12px;
.top-left, .bottom-right {
font-size: 28px;
text-align: left;
.bottom-right {
text-align: right;
transform: rotate(180deg);
.center {
font-size: 80px;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
.controls {
background-color: white;
padding: 24px;
border-radius: 16px;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.08);
max-width: 700px;
margin: 0 auto;
.color-pickers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
margin-bottom: 26px;
.color-group {
display: flex;
flex-direction: column;
align-items: center;
label {
margin-bottom: 9px;
font-weight: 600;
color: #34495e;
input[type="color"] {
width: 70px;
height: 42px;
border: none;
cursor: pointer;
border-radius: 21px;
button {
background-color: #3498db;
color: white;
border: none;
padding: 13px 27px;
border-radius: 31px;
font-size: 17px;
cursor: pointer;
transition: background-color 0.23s ease;
margin-top: 11px;
button:hover {
background-color: #2980b9;
.tips {
margin-top: 34px;
font-style: italic;
color: #95a5a6;
line-height: 1.55;
@media (max-width: 768px) {
.card-container {
flex-direction: column;
align-items: center;
.card {
width: 220px;
height: 308px;
.center {
font-size: 65px;
双色背景扑克牌
自定义扑克牌的上下背景颜色，创造独特的视觉效果
自定义颜色
提示：您可以为每张扑克牌的上部和下部分别选择不同的颜色，创造出独特的视觉效果。
点击扑克牌可以查看翻转动画效果。
document.addEventListener('DOMContentLoaded', function {
const cards = [
{id: 'card1', bgId: 'bg1', topColorInput: 'topColor1', bottomColorInput: 'bottomColor1'},
{id: 'card2', bgId: 'bg2', topColorInput: 'topColor2', bottomColorInput: 'bottomColor2'},
{id: 'card3', bgId: 'bg3', topColorInput: 'topColor3', bottomColorInput: 'bottomColor3'}
];
// 初始化颜色
updateCardBackgrounds;
// 应用颜色按钮事件
document.getElementById('applyColors').addEventListener('click', updateCardBackgrounds);
// 随机配色按钮事件
document.getElementById('randomize').addEventListener('click', function {
cards.forEach(card => {
const randomTopColor = getRandomColor;
const randomBottomColor = getRandomColor;
document.getElementById(card.topColorInput).value = randomTopColor;
document.getElementById(card.bottomColorInput).value = randomBottomColor;
});
updateCardBackgrounds;
});
// 点击卡片翻转效果
cards.forEach(card => {
document.getElementById(card.id).addEventListener('click', function {
this.style.transform = this.style.transform.includes('rotateY')
? 'translateY(-10px)'
: this.style.transform + ' rotateY(180deg)';
});
});
// 更新卡片背景函数
function updateCardBackgrounds {
cards.forEach(card => {
const topColor = document.getElementById document.getElementById(card.topColorInput).value;
const bottomColor = document.getElementById(card.bottomColorInput).value;
const cardBg = document.getElementById(card.bgId);
);
cardBg.style.background = `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 49%, ${bottomColor} 51%, ${bottomColor} 100%)`;
});
// 生成随机颜色函数
function getRandomColor {
const letters = 'ABCDEF';
let color = '#';
for (let i = 0; i
color += letters[Math.floor(Math.random * 16)];
return color;
});
功能说明
这个页面实现了以下功能：
1. 三张不同花色的扑克牌：黑桃A、红心K和方块Q
2. 上下分色的背景：每张扑克牌都有不同的上下背景颜色
3. 交互控制面板：
4. 增强的视觉效果：
您可以直接复制此代码到HTML文件中运行，然后通过颜色选择器自定义扑克牌的背景颜色。
