英文 | https://javascript.plainenglish.io/design-a-beautiful-profile-card-with-css-4407c558b733

翻譯 | web前端開發(fā)公眾號(hào)

我們可以僅使用CSS為我們的網(wǎng)站做一些很棒的設(shè)計(jì)。在本文中，我將向你展示如何制作具有出色懸停效果的個(gè)人資料卡。

在開始之前，我們先來看一下最終效果。

接著，讓我們正式開始吧。

文件結(jié)構(gòu)

在我們的項(xiàng)目文件夾中，我們需要一個(gè)HTML文件，一個(gè)CSS文件和一個(gè)用于存儲(chǔ)配置文件圖像的文件夾。

HTML

首先，我們必須建立基本的html結(jié)構(gòu)。讓我們將以下代碼放入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鏈接社交圖標(biāo)。

接下來，我們需要為卡片添加CSS樣式。從現(xiàn)在開始，我們將使用該style.css文件。

CSS

首先，我們將添加一些基本樣式，這些樣式將應(yīng)用于所有地方。

* {    margin: 0;    padding: 0;    box-sizing: border-box;    text-decoration: none;    transition: 0.3s;}
body {    font-family: "Montserrat";    background-color: #b8b6b6;    color: #fdfdfd;}

沒有CSS，卡將如下所示。

如果我們想把它變成漂亮一點(diǎn)的卡片，現(xiàn)在，我們需要為卡片添加背景顏色，字體大小，位置等樣式屬性。

.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;}

個(gè)人資料圖片

然后，我們將樣式添加到個(gè)人資料圖像。還有一些簡(jiǎn)單的懸停效果。

.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;}

現(xiàn)在，我們應(yīng)該看到卡中的一些重大更改。它正在變成很酷的東西。

卡體設(shè)計(jì)

該card-body內(nèi)容包含姓名，電子郵件和專業(yè)。我們將為每個(gè)樣式添加不同的樣式。當(dāng)然還有一些懸停效果。

.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;}

更改后，卡片樣式如下圖所示。

添加社交鏈接信息

現(xiàn)在，我們?yōu)榭ㄆ砑幼远x社交鏈接。我們已經(jīng)font-awesome在HTML中使用了圖標(biāo)。我們將使用CSS修改一下圖標(biāo)樣式，讓其變得更漂亮。

.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;}

查看圖標(biāo)的外觀。

到這里，我們的卡片樣式就快完成了。

最后，我們將在腳注中添加一些簡(jiǎn)單的CSS，就基本實(shí)現(xiàn)我們想要的效果了。

添加頁腳樣式

我們將對(duì)card-footer進(jìn)行一些小的更改。

.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;}

修改完之后，我們得到了期望的卡片外觀效果。

我們將通過一些媒體查詢來完成我們的設(shè)計(jì)。

@media screen and (max-width: 575px) {    .card {        width: 96%;    }
    .card .card-body {        padding: 10px 20px;    }}

在網(wǎng)站上使用此卡時(shí)，我們將根據(jù)自己需要，更改媒體查詢。也許我們需要像這樣的多張卡片。然后，我們將在網(wǎng)格系統(tǒng)中使用它們。這些卡在大，中，小屏幕上的外觀如何，我們需要根據(jù)最終需求，進(jìn)行樣式的調(diào)整修改即可。

結(jié)論

希望我今天分享的內(nèi)容，對(duì)你有所幫助。有什么問題，可以在留言區(qū)跟我留言交流。謝謝閱讀。

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

如何用CSS實(shí)現(xiàn)漂亮的個(gè)人資料卡效果