卡片翻面动画效果-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片翻面动画效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}

h1 {
color: #333;
margin-bottom: 40px;
text-align: center;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
}

.card {
width: 280px;
height: 380px;
perspective: 1000px;
cursor: pointer;
}

.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.card:hover .card-inner {
transform: rotateY(180deg);
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.card-front {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}

.card-image {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
border: 5px solid rgba(255,255,255,0.8);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin-bottom: 20px;
}

.card-title {
font-size: 22px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}

.card-subtitle {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}

.card-icons {
display: flex;
gap: 15px;
}

.card-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
color: #555;
transition: all 0.3s ease;
}

.card-icon:hover {
background-color: #3498db;
color: white;
transform: translateY(-3px);
}

.card-back {
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
text-align: center;
}

.card-back-title {
font-size: 22px;
margin-bottom: 15px;
color: white;
}

.card-back-text {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
color: rgba(255,255,255,0.9);
}

.card-button {
display: inline-block;
padding: 10px 25px;
background-color: white;
color: #3498db;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
align-self: center;
}

.card-button:hover {
background-color: #f1c40f;
color: #2c3e50;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.footer {
margin-top: 50px;
font-size: 14px;
color: #666;
text-align: center;
}

.footer a {
color: #3498db;
text-decoration: none;
transition: all 0.3s ease;
}

.footer a:hover {
color: #e74c3c;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>鼠标悬停卡片翻面效果</h1>

<div class="card-container">

<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Person" class="card-image">
<h2 class="card-title">张美丽</h2>
<p class="card-subtitle">UI/UX设计师</p>
<div class="card-icons">
<div class="card-icon">📱</div>
<div class="card-icon">💻</div>
<div class="card-icon">🎨</div>
</div>
</div>
<div class="card-back">
<h2 class="card-back-title">关于我</h2>
<p class="card-back-text">5年UI/UX设计经验，专注于创建直观、美观的用户界面。擅长用户研究和交互设计，曾为多家知名企业设计产品。</p>
<a href="#" class="card-button">查看作品</a>
</div>
</div>
</div>


<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Person" class="card-image">
<h2 class="card-title">李科技</h2>
<p class="card-subtitle">前端开发工程师</p>
<div class="card-icons">
<div class="card-icon">⚛️</div>
<div class="card-icon">🖥️</div>
<div class="card-icon">🔧</div>
</div>
</div>
<div class="card-back">
<h2 class="card-back-title">专业技能</h2>
<p class="card-back-text">精通React、Vue等前端框架，熟悉TypeScript和现代前端工具链。热衷于性能优化和用户体验提升。</p>
<a href="#" class="card-button">联系我</a>
</div>
</div>
</div>


<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Person" class="card-image">
<h2 class="card-title">王营销</h2>
<p class="card-subtitle">数字营销专家</p>
<div class="card-icons">
<div class="card-icon">📊</div>
<div class="card-icon">📈</div>
<div class="card-icon">🔍</div>
</div>
</div>
<div class="card-back">
<h2 class="card-back-title">服务内容</h2>
<p class="card-back-text">提供全方位的数字营销解决方案，包括SEO、社交媒体营销、内容营销和数据分析，帮助您的业务快速增长。</p>
<a href="#" class="card-button">获取方案</a>
</div>
</div>
</div>
</div>


</body>
</html>