最近看到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;
}