3D懸浮卡片效果 – HTML與CSS合併文件
以下是一個完整的HTML文件，包含了內聯CSS樣式，實現3D懸浮卡片效果：
html
复制
<!DOCTYPE html>
<html lang=”zh-TW”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>3D懸浮卡片效果</title>
<style>
/* 基礎樣式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #1a1a2e, #16213e);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.container {
perspective: 1000px;
padding: 20px;
}
.cool-box {
width: 300px;
height: 400px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
border-radius: 20px;
padding: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
}
.cool-box:hover {
transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
.box-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box-content h2 {
font-size: 28px;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.box-content p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
}
.shine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 80%
);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.cool-box:hover .shine {
transform: translateX(100%);
}
/* 響應式設計 */
@media (max-width: 480px) {
.cool-box {
width: 280px;
height: 380px;
}
}
</style>
</head>
<body>
<div class=”container”>
<div class=”cool-box”>
<div class=”box-content”>
<h2>創意盒子</h2>
<p>這是一個具有3D效果的懸浮卡片，試著把鼠標移上來看看效果！</p>
<div class=”shine”></div>
</div>
</div>
</div>
</body>
</html>
运行 HTML
使用說明
- 將上面的代碼複製到一個文本編輯器中
- 保存為 .html 文件（例如 3d-card.html）
- 用瀏覽器打開該文件即可看到效果
主要特點
- 單文件實現：所有HTML和CSS都在同一個文件中
- 3D懸浮效果：鼠標懸停時卡片會升起並有輕微旋轉
- 光澤動畫：鼠標懸停時有光澤劃過的效果
- 響應式設計：在小屏幕上會自動調整大小
- 漸變背景：卡片使用漂亮的漸變色彩
您可以通過修改CSS部分中的顏色、大小和動畫參數來創建自己的變體效果。
