博哥教你使用纯CSS制作酷炫的个人名片效果
Author:博哥
时间:2023-01-11
前言
- 该文档对应的视频教程，请移步B站观看！
- 去B站播放该教程
一.需要掌握的前置知识和用的素材
1.1.前置知识
- HTML
- CSS
- SASS
- FLEX
- 媒体查询响应式布局
1.2.图标网站
https://tabler-icons.io/
1.3.需要提前下载的css库
重置网页样式的css库: reset.css
博哥素材提供&自行从网上下载
1.4.该案例效果用的图片素材
博哥素材提供&自行从网上下载
二.重要参数准备
| 作用的位置 | 参数值 | 具体说明 |
|---|---|---|
| 1.头像 | height="260px" width="650px" height="200px" width="200px" 圆角-50% box-shadow: 0 10px 60px -10px rgba(13,28,39,.5) |
设置初始大小 电脑屏幕下尺寸和圆角 阴影效果br> |
| 2.body | padding: 2rem; color:skyBlue | 初始化时body元素内间距 字体颜色等 |
| 3.背景图片 | scale(1)---scale(1.3) | 背景放大比例变化 |
| 4.个人主页卡片容器 | box-shadow: 0 18px 200px -60px black; border-radius: 50px; width: 560px; backdrop-filter: blur(50px); border: 2px solid #ffffff40; |
阴影 圆角 宽度 滤镜模糊 边框 |
| 5.个人简介容器 | 25px 2.5rem 20px |
flex布局后容器元素间隔 子元素h1(昵称)字体大小 子元素div(岗位)字体大小 |
| 6.个人详情容器 | 50px 1px 3px 2rem 15px 16px 0.7 |
flex布局后容器元素间隔 子元素文本间隔 关注者 粉丝数 点赞数文本间隔 关注者 粉丝数 点赞数字体大小 关注者 粉丝数 点赞数 底部间距 关注者。。。数据--字体大小 关注者。。。数据--透明度 |
| 7.社交平台容器 | 55px 55px 15px color:#fff 40% |
A标签宽度 A标签高度 A标签间距 图标颜色 圆角 |
| 8.社交平台图标 | background: linear-gradient(45deg,#3b5998,#0078d7); box-shadow: 0 40px 30px rgba(43,98,169,0.5); background: linear-gradient(45deg,#1da1f2,#0e71c8); box-shadow: 0 40px 30px rgba(19,127,211,0.7); background: linear-gradient(45deg,#405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); box-shadow: 0 40px 30px rgba(120,64,190,0.6); |
QQ 微信 抖音 |
| 9.我的互动容器 | 2rem 22px 15px 250px color:white |
flex布局容器间隔 按钮字体大小 按钮内间距 按钮最小宽度 按钮字体颜色 |
三.案列实现思路解析
3.1.1 创建个人主页页面容器
需要一个大的容器元素 个人主页卡片>>Div容器>> profile-card
3.1.2 个人主页容器中的子元素
(1) 头像元素
- 头像元素 头像>>Div容器>>profile-card-img
头像的子元素
img----头像图片
(2) 个人简介元素
- 个人简介 个人简介>>Div容器>> profile-card-desc
- 个人简介子元素
h1-----------------------------个人名称的标题文字
div-----------------------------职位|职位介绍
div-----------------------------地理位置图标------------使用在线图标库------搜索map-pin
博哥的编程日记
全栈开发者
(3) 个人详情元素
- 个人详细信息 个人详细信息>>Div容器>>profile-card-info
- 个人详细信息子元素
div----------------------------------------个人详情
800W
粉丝数
50
关注者
5000
点赞数
(4) 社交平台
- 社交平台 社交平台>>Div容器>>profile-card-social
- 社交平台子元素
a----------------------存放对应平台图标----------------------使用在线图标
(5) 底部活动元素
- 底部活动 底部活动>>Div容器>>profile-card-action
底部活动子元素
button--------------------------------------------相关按钮
(6) 完整页面代码
个人资料卡设计
博哥的编程日记
全栈开发者
河南-洛阳-洛龙
800W
粉丝数
50
关注者
5000
点赞数
(7) 页面效果
3.2 样式实现思路解析
3.2.1 body初始化样式设置
字体风格---- 自定义即可
字体颜色---- 自定义即可
最小高度---- 屏幕高度
布局设置--------- Flex布局 水平居中对齐
内间距设置------看重要参数准备中给定的值
效果
3.2.2 页面背景实现思路
实现思路
- body添加伪元素铺满屏幕即可
伪元素样式设置
- 定位属性----------固定定位
- 间距调整----------- 0
- 层级关系设置-------- 调小层级关系
- 背景图片设置--------- 不平铺 位置居中
- 背景图片尺寸-----自适应
伪元素背景需要添加放大动画效果
&::before{
content: '';
position: fixed;
inset:0 ;
z-index: -1;
background: url("../img/bg.jpg") no-repeat center;
background-size: cover;
animation: backGroundImgAnimate 20s forwards;
}
@keyframes backGroundImgAnimate {
from{
transform: scale(1);
}
to{
transform: scale(1.3);
}
}
效果
3.2.3 个人主页卡片样式设置
阴影效果--------------------------------看重要参数准备中给定的值
圆角--------------------------------------看重要参数准备中给定的值
宽度---------------------------------------看重要参数准备中给定的值
模糊效果---------------------------------看重要参数准备中给定的值
边框----------------------------------------看重要参数准备中给定的值
内间距-------------------------------------看重要参数准备中给定的值
布局设置----------------------------------采用Flex布局 主轴Y轴 间距 40px
自适应效果考虑:方案:媒体查询
设备宽度 <768px时候
宽度------------------------------------------auto自动匹配
效果
.profile-card{
box-shadow: 0 18px 200px -60px black;
border-radius: 50px;
width: 560px;
backdrop-filter: blur(50px);
border: 2px solid #ffffff40;
padding: 3rem 5rem;
display: flex;
flex-direction: column;
gap: 40px;
@media screen and (max-width: 768px) {
width: auto;
}
}
3.2.4 头像元素样式设计
外间距margin---------------------------------------------------------自适应居中
圆角---------------------------------------------------------------------
圆形头像尺寸设置---------------------------------------------------------------中心
阴影效果设置--------------------------------------------------------------------看重要参数准备中给定的值
头像居中--------------------------------------------------------------------------设置为块元素即可
&-img img{
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 10px 60px -10px rgba(13,28,39,.5);
display: block;
}
3.2.5 个人简介元素样式设计
内容居中--------------------------------
布局设置---------------------------------
布局容器元素间距设置--------------------------------看重要参数准备中给定的值
个人简介元素子元素标题样式设计
字体大小--------------------------------------------看重要参数准备中给定的值
加粗-----------------------------------------------------
个人简介元素子元素职位样式设计
字体大小----------------------------------------------看重要参数准备中给定的值
&-desc {
text-align: center;
display: flex;
flex-direction: column;
gap: 25px;
h1{
font-size: 2.5rem;
font-weight: bold;
& + div{
font-size: 20px;
}
}
}
3.2.6个人详情元素样式设计
布局-----------------------------------------------flex 对齐方式设置
布局容器间隔------------------------------------看重要参数准备中给定的值
自适应效果考虑:方案:媒体查询
设备宽度 <576px时候
flex布局容器中的元素间隔 30px
个人详情子元素样式
字体加粗--------------------------------------------------------------
文本间隔--------------------------------------------------------------看重要参数准备中给定的值
内容居中---------------------------------------------------------------
标题子元素样式 粉丝数 关注者 点赞数
字体加粗----------------------------------------------------------
文本间距----------------------------------------------------------看重要参数准备中给定的值
字体大小-----------------------------------------------------------看重要参数准备中给定的值
底部间隔-----------------------------------------------------------看重要参数准备中给定的值
标题子元素样式 粉丝数 关注者 点赞数>>数据
字体大小----------------------------------------------------------------看重要参数准备中给定的值
透明度--------------------------------------------------------------------看重要参数准备中给定的值
&-info{
display: flex;
justify-content: center;
gap: 50px;
@media screen and (max-width: 576px){
gap: 30px;
}
& >div{
font-weight: bold;
text-align: center;
text-space: 1px;
& > *:first-child{
font-weight: bold;
letter-spacing: 3px;
font-size: 2rem;
margin-bottom: 15px;
}
& > *:last-child{
font-size: 16px;
opacity: .7;
}
}
}
3.2.7 社交平台元素样式设计
布局------------------------------------------flex 对齐 不换行
子标签A样式设定
布局--------------------------------------------行内元素采用flex布局
高度------------------------------------------看重要参数准备中给定的值
宽度----------------------------------------看重要参数准备中给定的值
定位-----------------------------------------相对定位
缩放-----------------------------------------禁止
圆角-----------------------------------------
过渡效果--------------------------------------
子标签A在移动设备上的移入效果
设备宽度 768px时候
height: 50px; width: 50px; margin: 10px;移入效果
放大 1.2倍 移动 -5px
社交图标设置不同背景色和阴影效果
背景色----------------------------------------看重要参数准备中给定的值
阴影---------------------------------------------看重要参数准备中给定的值
&-social{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
a{
display: inline-flex;
height: 55px;
width: 55px;
margin: 15px;
color: white;
border-radius: 40%;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
transition: all .3s;
@media screen and (max-width: 768px){
height: 50px;
width: 50px;
margin: 10px;
}
@media screen and (min-width: 768px){
&:hover{
transform: scale(1.2) translateX(-5px);
}
}
&.qq{
background: linear-gradient(45deg,#3b5998,#0078d7);
box-shadow: 0 40px 30px rgba(43,98,169,0.5);
}
&.wechat{
background: linear-gradient(45deg,#1da1f2,#0e71c8);
box-shadow: 0 40px 30px rgba(19,127,211,0.7);
}
&.douyin{
background: linear-gradient(45deg,#405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
box-shadow: 0 40px 30px rgba(120,64,190,0.6);
}
}
}
3.2.8 和我互动容器样式设计
布局-------------------------------------flex
flex布局容器元素间隔----看重要参数准备中给定的值
自适应效果考虑:方案:媒体查询
设备宽度 <768px时候
flex-direction: column; gap:1.5rem
按钮子元素样式
加粗-------------------------------------------
字体大小--------------------------------------看重要参数准备中给定的值
内间距----------------------------------------看重要参数准备中给定的值
最小宽度--------------------------------------看重要参数准备中给定的值
鼠标指针----------------------------------------
自适应效果考虑:方案:媒体查询:按钮尺寸
@media screen and (max-width: 768px) {
min-width: 170px;
}
@media screen and (max-width: 576px) {
min-width: inherit;
width: 100px;
max-width:350px ;
}
@media screen and (min-width: 576px) {
&:hover{
transform: translateY(-5px);
}
}
按钮样式
&.blue{
background: linear-gradient(45deg,#1da1f2,#0e71c8);
box-shadow: 0 4px 30px rgba(19,127,212,.4);
&:hover{
box-shadow: 0 4px 30px rgba(19,127,212,.75);
}
}
&.orange{
background: linear-gradient(45deg,#d5135a,#f05924);
box-shadow: 0 4px 30px rgba(223,45,70,.35);
&:hover{
box-shadow: 0 4px 30px rgba(19,127,212,.75);
}
}
