1/13
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link
rel="stylesheet"
href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>"
/>
<link
rel="stylesheet"
href="/styles.css"
/>
</head>
<body>
<div class="card-header">
<i class="fa-solid fa-circle-user"></i>
<h1 class="name">harry</h1>
<h2 class="title">前端工程師</h2>
</div>
<div class="card-body">
<div class="section">
<p class="section-title">關於我</p>
<p class="section-content">
熱愛程式設計和創意，喜歡用科技解決生活中的問題。目前專注於網頁開發，持續學習新技術。
</p>
</div>
<div class="section">
<p class="section-title">技能</p>
<div class="section-skills">
<span class="skill-tag">HTML</span>
<span class="skill-tag">CSS</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">設計思考</span>
</div>
</div>
<div class="section">
<div class="section-title">聯絡方式</div>
<div class="contact-item">
<i class="fa-solid fa-envelope"></i>
<span>我的信箱@email.com</span>
</div>
<div class="contact-item">
<i class="fa-solid fa-phone"></i>
<span>0912-3456789</span>
</div>
<div class="contact-item">
<i class="fa-solid fa-book"></i>
<span>我的個人網站</span>
</div>
</div>
</div>
</div>
</body>
<footer>
<button class="footer-btn">聯絡我</button>
</footer>
</html>
1/14
/* 重置預設樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 設定整體頁面 */
body {
font-family: "Microsoft JhengHei", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/* 名片容器 - 加入進場動畫 */
.card {
background: white;
width: 100%;
max-width: 400px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
animation: slideIn 0.6s ease-out;
}
/* 進場動畫 */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 頭部區域 */
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 20px;
text-align: center;
color: white;
}
/* 大頭照 - 加入旋轉動畫 */
.avatar {
width: 120px;
height: 120px;
background: white;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.3s ease;
}
.avatar:hover {
transform: rotate(360deg) scale(1.1);
}
/* 名字 */
.name {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
/* 職稱 - 打字機效果 */
.title {
font-size: 16px;
opacity: 0.9;
overflow: hidden;
border-right: 2px solid white;
white-space: nowrap;
animation: typing 3s steps(20) 0.5s forwards, blink 0.7s step-end infinite;
width: 0;
margin: 0 auto;
}
@keyframes typing {
from { width: 0; }
to { width: 8em; }
}
@keyframes blink {
50% { border-color: transparent; }
}
/* 內容區域 */
.card-body {
padding: 30px;
}
/* 區塊淡入動畫 */
.section {
margin-bottom: 25px;
opacity: 0;
animation: fadeIn 0.6s ease-out forwards;
}
.section:nth-child(1) { animation-delay: 0.3s; }
.section:nth-child(2) { animation-delay: 0.5s; }
.section:nth-child(3) { animation-delay: 0.7s; }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.section-title {
font-size: 18px;
font-weight: bold;
color: #667eea;
margin-bottom: 10px;
border-bottom: 2px solid #667eea;
padding-bottom: 5px;
}
.section-content {
font-size: 14px;
line-height: 1.6;
color: #555;
}
/* 技能標籤 - 加入彈跳效果 */
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skill-tag {
background: #f0f0f0;
padding: 8px 15px;
border-radius: 20px;
font-size: 13px;
color: #667eea;
border: 2px solid #667eea;
cursor: pointer;
transition: all 0.3s ease;
}
.skill-tag:hover {
background: #667eea;
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* 聯絡資訊 */
.contact-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: #555;
cursor: pointer;
padding: 5px;
border-radius: 5px;
transition: background 0.3s ease;
}
.contact-item:hover {
background: #f0f0f0;
}
.contact-icon {
margin-right: 10px;
font-size: 18px;
transition: transform 0.3s ease;
}
.contact-item:hover .contact-icon {
transform: scale(1.3);
}
/* 底部按鈕 */
.card-footer {
padding: 20px 30px;
background: #f8f9fa;
text-align: center;
}
.btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 30px;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
/* 訊息提示框 */
.message {
position: fixed;
top: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 1000;
}
.message.show {
transform: translateX(0);
}
/* 計數器樣式 */
.counter {
text-align: center;
margin-top: 15px;
font-size: 14px;
color: #667eea;
}
.counter-number {
font-size: 24px;
font-weight: bold;
color: #764ba2;
}