html 扑克-扑克牌spring

下面是一个带有春季风格的扑克牌网页设计：

html

* {

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(135deg, #a8e6cf, #dcedc1);

color: #333;

min-height: 100vh;

padding: 20px;

.container {

max-width: 1200px;

margin: 0 auto;

text-align: center;

header {

margin-bottom: 30px;

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

color: #4caf50;

text-shadow: 1px 1px 3px rgba(255,255,255,0.7);

p.subtitle {

font-size: 1.2rem;

color: #689f38;

.cards-container {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 25px;

margin-top: 40px;

.card {

width: 200px;

height: 280px;

perspective: 1000px;

cursor: pointer;

.card-inner {

position: relative;

width: 100%;

height: 100%;

transition: transform 0.6s;

transform-style: preserve-3d;

border-radius: 15px;

box-shadow: 0 12px 24px rgba(76, 175, 80, 0.35);

.card:hover .card-inner {

transform: rotateY(180deg);

.card-front, .card-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 15px;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 15px;

.card-front {

background-color: white;

border: 2px solid #81c784;

.card-back {

background: linear-gradient(45deg, #66bb6a, #43a047);

transform: rotateY(180deg);

.back-pattern {

background-image: url("data:image/svg+xml,%3Csvg xmlns=' width='60' height='60' viewBox='0 0 30 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='15' cy='15' r='12' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");

opacity: 0.9;

border-radius: 13px;

width: 90%;

height: 85%;

.suit {

font-size: 70px;

margin-bottom: 10px;

.value {

font-size: 28px;

font-weight: bold;

color: #222;

.hearts { color: #f44336; }

.spades { color: #212121; }

.clubs { color: #424242; }

.diamonds { color: #2196f3; }

.spring-decoration {

position: absolute;

bottom: -150px;

left: 0;

width: 100%;

text-align: center;

z-index: -1;

.flower {

position: absolute;

width: 42px;

height: 46px;

background-color: #ffeb3b;

border-radius: 21px 22px 16px 14px;

animation: float 18s infinite linear;

.flower::before {

content: '';

position: absolute;

top: -19px;

left: 11px;

width: 26px;

height: 31px;

background-color: #ff9800;

border-radius: 61% 39% 52% 48% / 48% 44% 56% 62%;

transform: rotate(39deg);

.flower:nth-child(1) {

top: 520px;

left: 75%;

animation-delay: 0s;

.flower:nth-child(2) {

top: 620px;

left: 82%;

animation-delay: 1.5s;

.flower:nth-child(3) {

top: 680px;

left: 65%;

animation-delay: 3s;

.flower:nth-child(4) {

top: 580px;

left: 55%;

animation-delay: 2s;

.flower:nth-child(5) {

top: 650px;

left: 72%;

animation-delay: 4s;

@keyframes float {

0% { transform: translateX(0) rotate(0); }

33% { transform: translateX(-50px) rotate(120deg); }

67% { transform: translateX(-110px) rotate(240deg); }

100% { transform: translateX(0) rotate(360deg); }

footer {

margin-top: 250px;

padding: 20px;

color: #558b2f;

font-size: 0.9rem;

.info-box {

background-color: rgba(220, 237, 193, 0.8);

border-radius: 12px;

padding: 20px;

max-width: 800px;

margin: 30px auto;

box-shadow: 0 6px 12px rgba(124, 179, 128, 0.23);

text-align: left;

.info-box h2 {

color: #388e3c;

margin-bottom: 15px;

text-align: center;

.info-box ul {

list-style-type: none;

line-height: 1.6;

ggpoker德扑官网

.info-box li {

margin-bottom: 10px;

padding-left: 32px;

position: relative;

.info-box li::before {

content: "";

position: absolute;

left: 0;

设计特点

这个HTML页面展示了一个春季主题的扑克牌设计，具有以下特色：

1. 清新配色：使用了柔和的绿色渐变背景，象征春天的新生与活力

2. 卡片翻转效果：鼠标悬停时卡片会翻转展示背面

3. 春季元素：

卡片 卡片背面采用花瓣图案

页面底部漂浮的花朵动画

柔和圆润的卡片边角设计

4. 响应式布局：适应不同屏幕尺寸

5. 信息区域：包含了关于Spring扑克牌的详细信息

您可以直接复制这段代码到HTML文件中运行，即可看到完整的扑克牌展示效果。