作者：小刚
一位苦于信息安全的萌新小白帽，记得关注给个赞，谢谢
本实验仅用于信息防御教学，切勿用于其它用途
学习html+css时做的小名片案例。
效果图
鼠标移动到名片前
鼠标移动到名片后
小名片代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<style>
.card{
width:250px;
height:400px;
background-color:#f7f5ec;
margin:100px auto;
overflow:hidden;
position:relative;
}
.card:hover{
box-shadow:0 0 0 2px #ee0000;
}
.header{
width:130px;
height:130px;
background-color:#eb3f2f;
border-radius:50%;
margin:20px auto;
position:absolute;
left:0;
right:0;
}
.header:before{
content:"";
width:100%;
height:0;
background-color:#eb3f2f;
position:absolute;
transform:scale(3);
border-radius:50%;
bottom:150px;
opacity:0.4;
transition:all 0.3s;
}
.card:hover .header:before{
height:100%;
}
.header img{
width:130px;
height:130px;
border-radius:50%;
transition:0.3s;
}
.card:hover .header img{
transform:scale(0.7);
box-shadow:0 0 0 14px #fcf5ec;
}
.about{
position:absolute;
top:210px;
text-align:center;
width:100%;
}
.about .title{
font-size:25px;
}
.about .post{
display:block;
}
.card:hover .about{
color:#eb3f2f;
}
.contact{
width:100%;
height:30px;
background-color:#ee0000;
position:absolute;
bottom:-30px;
text-align:center;
transition:all 0.3s;
}
.contact li{
display:inline-block
}
.contact li a{
color:#fff;
padding:7px
}
.contact li a:hover{
color:#ee0000;
background-color:#fff;
}
.card:hover .contact{
bottom:0;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<img src="img/1.jpg"></div>
<div class="about">
<span class="title">小刚</span>
<span class="post">你好啊</span></div>
<div class="contact">
<li><a href=“##” class="fa fa-qq"></a></li>
<li><a href=“##” class="fa fa-weixin"></a></li>
<li><a href=“##” class="fa fa-weibo"></a></li>
<li><a href=“##” class="fa fa-steam"></a></li></div>
</div>
</body>
</html>