个人资料卡片CSS样式

最新推荐文章于 2024-08-15 23:19:32 发布

梧杵

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量1.4k

点赞数 1

分类专栏：前端 # css # html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43378689/article/details/126210093

版权

前端同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

最近看到B站一个up的视频，觉得这个卡片样式挺好看，在这里记录一下！
UP主地址==>

1、卡片效果，鼠标移动到头像会有放大效果

在这里插入图片描述

2、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/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./style.css">
    <title>个人卡片</title>
</head>
<body>
    <div class="card">
        <div class="circle">
            <div class="imgBx">
                <img src="./person.JPG" alt="">
            </div>
        </div>
        <div class="content">
            <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i>
            </a>
            <h3>发光的白鹤芋</h3>
            <div class="textIcon">
                <h4>一个只会CRUD的前端开发者</h4>
                <a href="https://space.bilibili.com/13833854?spm_id_from=333.1007.0.0" target="_blank"><i class="fa fa-arrow-right" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</body>
</html>

3、CSS源码

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(#777, #222);
}

.card {
    position: relative;
    width: 340px;
    height: 450px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.circle {
    position: absolute;
    top: -190px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: #333;
    clip-path: circle();
}
.circle:before{
    content: "";
    position: absolute;
    top: -8px;
    left: -16px;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 100;
    pointer-events: none;
}
.circle .imgBx{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 340px;
    height: 310px;
    background: #ff0;
}

.circle .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
    transform-origin: bottom;
}

.circle .imgBx:hover img{
    transform: scale(1.5);
}

.content{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 140px;
    padding: 20px 30px;
}

.fa-linkedin{
    background: #0077b5;
    color:#fff;
    padding: 2px 4px;
    border-radius:2px ;
}

.content h3{
    font-size: 1.4em;
    color: #333;
    margin-top: 7px;
}

.textIcon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:10px ;
    padding: 0 2px;
}

.textIcon h4{
    color: #e91e63;
    font-weight: 400;
}

.textIcon a{
    color: #e91e63;
}