英文 | https://javascript.plainenglish.io/design-a-beautiful-profile-card-with-css-4407c558b733
翻譯 | web前端開發公衆号
我們可以僅使用CSS為我們的網站做一些很棒的設計。在本文中，我将向你展示如何制作具有出色懸停效果的個人資料卡。
在開始之前，我們先來看一下最終效果。
接着，讓我們正式開始吧。
檔案結構
在我們的項目檔案夾中，我們需要一個HTML檔案，一個CSS檔案和一個用于存儲配置檔案圖像的檔案夾。
HTML
首先，我們必須建立基本的html結構。讓我們将以下代碼放入index.html檔案中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
<title>Awesome Profile Card</title>
</head>
<body>
<div class="card">
<div class="card-header">
<img src="img/profile-image-placeholder.jpg" alt="Profile Image" class="profile-img">
</div>
<div class="card-body">
<p class="name">Your Name</p>
<a href="#" class="mail">[email protected]</a>
<p class="job">Developer | Designer</p>
</div>
<div class="social-links">
<a href="#" class="fab fa-github social-icon"></a>
<a href="#" class="fab fa-twitter social-icon"></a>
<a href="#" class="fab fa-youtube social-icon"></a>
<a href="#" class="fab fa-linkedin social-icon"></a>
</div>
<div class="card-footer">
<p class="count"><span>120k</span> Followers | <span>10k</span> Following</p>
</div>
</div>
</body>
</html> 我們需要将添加style.css到index.html。此外，我們還需要采用font-awesome連結社交圖示。
接下來，我們需要為卡片添加CSS樣式。從現在開始，我們将使用該style.css檔案。
CSS
首先，我們将添加一些基本樣式，這些樣式将應用于所有地方。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
transition: 0.3s;
}
body {
font-family: "Montserrat";
background-color: #b8b6b6;
color: #fdfdfd;
} 沒有CSS，卡将如下所示。
如果我們想把它變成漂亮一點的卡片，現在，我們需要為卡片添加背景顔色，字型大小，位置等樣式屬性。
.card {
max-width: 250px;
margin: 150px auto 0;
background-color: #42515a;
box-shadow: 0 10px 90px #00000024;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
.card .card-header {
position: relative;
height: 48px;
} 個人資料圖檔
然後，我們将樣式添加到個人資料圖像。還有一些簡單的懸停效果。
.card .card-header .profile-img {
width: 130px;
height: 130px;
border-radius: 1000px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
border: 8px solid #c74385;
box-shadow: 0 0 20px #00000033;
}
.card .card-header .profile-img:hover {
width: 180px;
height: 180px;
border: 8px solid #d885af;
} 現在，我們應該看到卡中的一些重大更改。它正在變成很酷的東西。
卡體設計
該card-body内容包含姓名，電子郵件和專業。我們将為每個樣式添加不同的樣式。當然還有一些懸停效果。
.card .card-body {
padding: 10px 40px;
}
.card .card-body .name {
margin-top: 30px;
font-size: 22px;
font-weight: bold;
color: #c74385;
}
.card .card-body .name:hover {
margin-top: 30px;
font-size: 24px;
color: #d885af;
}
.card .card-body .mail {
font-size: 14px;
color: #c2bdbd;
}
.card .card-body .mail:hover {
font-size: 16px;
color: #ffffff;
}
.card .card-body .job {
margin-top: 10px;
font-size: 14px;
} 更改後，卡片樣式如下圖所示。
添加社交連結資訊
現在，我們為卡片添加自定義社交連結。我們已經font-awesome在HTML中使用了圖示。我們将使用CSS修改一下圖示樣式，讓其變得更漂亮。
.card .social-links {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.card .social-links .social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
background-color: #c74385;
color: #ffffff;
font-size: 20px;
border-radius: 100%;
text-decoration: none;
margin: 0 13px 30px 0;
}
.card .social-links .social-icon:last-child {
margin-right: 0;
}
.card .social-links .social-icon:hover {
background-color: #d885af;
height: 50px;
width: 50px;
text-decoration: none;
} 檢視圖示的外觀。
到這裡，我們的卡片樣式就快完成了。
最後，我們将在腳注中添加一些簡單的CSS，就基本實作我們想要的效果了。
添加頁腳樣式
我們将對card-footer進行一些小的更改。
.card .card-footer {
background-color: #c74385;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 20px 0 20px 0;
}
.card .card-footer .count {
font-size: 14px;
} 修改完之後，我們得到了期望的卡片外觀效果。
我們将通過一些媒體查詢來完成我們的設計。
@media screen and (max-width: 575px) {
.card {
width: 96%;
}
.card .card-body {
padding: 10px 20px;
}
} 在網站上使用此卡時，我們将根據自己需要，更改媒體查詢。也許我們需要像這樣的多張卡片。然後，我們将在網格系統中使用它們。這些卡在大，中，小螢幕上的外觀如何，我們需要根據最終需求，進行樣式的調整修改即可。
結論
希望我今天分享的内容，對你有所幫助。有什麼問題，可以在留言區跟我留言交流。謝謝閱讀。
學習更多技能
請點選下方公衆号