如何用CSS实现漂亮的个人资料卡效果

末蓝、 2023-01-14 11:52 172阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

我们可以仅使用CSS为我们的网站做一些很棒的设计。在本文中，我将向你展示如何制作具有出色悬停效果的个人资料卡。

在开始之前，我们先来看一下最终效果。

![2d4263011e06ad74c3dd3a6e24dfdf38.png][]

接着，让我们正式开始吧。

**文件结构**

在我们的项目文件夹中，我们需要一个HTML文件，一个CSS文件和一个用于存储配置文件图像的文件夹。

![d7f74cf88655604542034938cf5c2f77.png][]

# **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">yourname@amail.com</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，卡将如下所示。

![33677a0335673168643ee4db203097c8.png][]

如果我们想把它变成漂亮一点的卡片，现在，我们需要为卡片添加背景颜色，字体大小，位置等样式属性。

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

现在，我们应该看到卡中的一些重大更改。它正在变成很酷的东西。

![be0349717e34562d67b773ab3c902c75.png][]

# **卡体设计** #

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

更改后，卡片样式如下图所示。

![65b2163d89cbbaacbdb71e3feb7e0ef5.png][]

# **添加社交链接信息** #

现在，我们为卡片添加自定义社交链接。我们已经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;
    }

查看图标的外观。

![2ffe14aa4a45265b93e70052adf8bc27.png][]

到这里，我们的卡片样式就快完成了。

最后，我们将在脚注中添加一些简单的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;
    }

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

![6eafb2d2ff914c646abf22699e3fafe3.png][]

我们将通过一些媒体查询来完成我们的设计。

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

在网站上使用此卡时，我们将根据自己需要，更改媒体查询。也许我们需要像这样的多张卡片。然后，我们将在网格系统中使用它们。这些卡在大，中，小屏幕上的外观如何，我们需要根据最终需求，进行样式的调整修改即可。

## **结论** ##

希望我今天分享的内容，对你有所帮助。有什么问题，可以在留言区跟我留言交流。谢谢阅读。

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

翻译 | web前端开发公众号

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[2d4263011e06ad74c3dd3a6e24dfdf38.png]: /images/20221022/5127c495c5614e19a8be9f9a12bd5f20.png
[d7f74cf88655604542034938cf5c2f77.png]: /images/20221022/32ed1e657a954ce2bc15e1fa3dcb29f1.png
[33677a0335673168643ee4db203097c8.png]: /images/20221022/feb5d8f73d0b4db999ca362c4b75897c.png
[be0349717e34562d67b773ab3c902c75.png]: /images/20221022/298e3dd721704c4eb583ffdfceceb285.png
[65b2163d89cbbaacbdb71e3feb7e0ef5.png]: /images/20221022/22b4e472684e4536bf890398fcf698ae.png
[2ffe14aa4a45265b93e70052adf8bc27.png]: /images/20221022/48701eed79ea4105aacb4a0360246c02.png
[6eafb2d2ff914c646abf22699e3fafe3.png]: /images/20221022/b42e508c2dfe421c929512e0de9cf80e.png