博哥教你使用纯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.页面实现思路解析

3.1.1 创建个人主页页面容器

  • 需要一个大的容器元素 个人主页卡片>>Div容器>> profile-card
 <!--个人主页卡片-->
<div class="profile-card"></div>

3.1.2 个人主页容器中的子元素

(1) 头像元素

  • 头像元素 头像>>Div容器>>profile-card-img

  • 头像的子元素

​ img----头像图片

<!--个人主页卡片-->
<div class="profile-card"><!--1.头像容器--><div class="profile-card-img"><img src="img/head.jpg"></div>
</div>
(2) 个人简介元素

  • 个人简介 个人简介>>Div容器>> profile-card-desc

  • 个人简介子元素

h1-----------------------------个人名称的标题文字

div-----------------------------职位|职位介绍

div-----------------------------地理位置图标------------使用在线图标库------搜索map-pin

 <!--2.个人简介容器--><div class=">profile-card-desc"><h1>博哥的编程日记</h1><div>全栈开发者</div><div><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24"               viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-                   linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="11" r="3"></circle><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path></svg></div></div>
(3) 个人详情元素

  • 个人详细信息 个人详细信息>>Div容器>>profile-card-info

  • 个人详细信息子元素

div----------------------------------------个人详情

 <!--3.个人详细信息-->
<div class="profile-card-info"><div><div>800W</div><div>粉丝数</div></div><div><div>50</div><div>关注者</div></div><div><div>5000</div><div>点赞数</div></div>
</div>
(4) 社交平台

  • 社交平台 社交平台>>Div容器>>profile-card-social

  • 社交平台子元素

a----------------------存放对应平台图标----------------------使用在线图标

<!--4.社交平台-->
<div class="profile-card-social"><a href="#" class="qq">QQ</a><a href="#" class="wechat">微信</a><a href="#" class="douyin">抖音</a>
</div>
(5) 底部活动元素

  • 底部活动 底部活动>>Div容器>>profile-card-action

  • 底部活动子元素

​ button--------------------------------------------相关按钮

 <!--5.社交平台-->
<div class="profile-card-action"><button class="blue">联系我</button><button class="orange">关注我</button>
</div>
(6) 完整页面代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人资料卡设计</title><link type="text/css" rel="stylesheet" href="css/reset.css"><link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body><!--个人主页卡片--><div class="profile-card"><!--1.头像容器--><div class="profile-card-img"><img src="img/head.jpg" height="300" width="600px"></div><!--2.个人简介容器--><div class=">profile-card-desc"><h1>博哥的编程日记</h1><div>全栈开发者</div><div><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="11" r="3"></circle><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path></svg><span>河南-洛阳-洛龙</span></div></div><!--3.个人详细信息--><div class="profile-card-info"><div><div>800W</div><div>粉丝数</div></div><div><div>50</div><div>关注者</div></div><div><div>5000</div><div>点赞数</div></div></div><!--4.社交平台--><div class="profile-card-social"><a href="#" class="qq"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-qq" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 7h.01"></path><path d="M10 7h.01"></path><path d="M6 11c4 4 8 4 12 0"></path><path d="M9 13.5v2.5"></path><path d="M10.5 10c.667 1.333 2.333 1.333 3 0h-3z"></path><path d="M16 21c1.5 0 3.065 -1 1 -3c4.442 2 1.987 -4.5 1 -7c0 -4 -1.558 -8 -6 -8s-6 4 -6 8c-.987 2.5 -3.442 9 1 7c-2.065 2 -.5 3 1 3h8z"></path></svg></a><a href="#" class="wechat"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-wechat" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M16.5 10c3.038 0 5.5 2.015 5.5 4.5c0 1.397 -.778 2.645 -1.999 3.47l-.001 2.03l-1.964 -1.178a6.649 6.649 0 0 1 -1.536 .178c-3.038 0 -5.5 -2.015 -5.5 -4.5s2.462 -4.5 5.5 -4.5z"></path><path d="M11.197 15.698c-.69 .196 -1.43 .302 -2.197 .302a8.008 8.008 0 0 1 -2.612 -.432l-2.388 1.432v-2.801c-1.237 -1.082 -2 -2.564 -2 -4.199c0 -3.314 3.134 -6 7 -6c3.782 0 6.863 2.57 6.996 5.785l.004 .233"></path><path d="M10 8h.01"></path><path d="M7 8h.01"></path><path d="M15 14h.01"></path><path d="M18 14h.01"></path></svg></a><a href="#" class="douyin"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-tiktok" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 12a4 4 0 1 0 4 4v-12a5 5 0 0 0 5 5"></path></svg></a></div><!--5.社交平台--><div class="profile-card-action"><button class="blue">联系我</button><button class="orange">关注我</button></div></div>
</body>
</html>
(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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7keS0ciA-1673790921251)(E:\黑耀石知识库\个人创作\个人自媒体创作\编程自媒体\1000-图片\前端\A2!在这里插入图片描述
)]

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

快速制作响应式的个人主页案列相关推荐

  1. 响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器

    响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...

  2. SpringBoot2.1.15(26) WebFlux快速上手——响应式Spring的道法术器

    SpringBoot2.1.15(26) WebFlux快速上手--响应式Spring的道法术器 Spring WebFlux Spring WebFlux是随Spring 5推出的响应式Web框架. ...

  3. 如何用一简单的CSS制作响应式HTML网页

    如何用简单的CSS制作响应式HTML网页 #故事前端开发 在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量. 最赞的一点就是:这个响应式效果只需要添加 ...

  4. html响应式导航栏制作,用Sass制作响应式导航栏(原创)

    插件描述:用Sass制作响应式导航栏 更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...

  5. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  6. HTML CSS 制作响应式价格表单展示id1075-网页前端设计

    HTML & CSS 制作响应式价格表单展示id1075-网页前端设计 源码下载地址 在新演示地址 html <a class="maxbutton-3 maxbutton&q ...

  7. 前端css弹性布局，响应式布局，多列布局

    前端css弹性布局,响应式布局,多列布局 主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

  8. 推荐制作响应式网站的五个理由

    互联网每天都在发生着巨大的变化,在这里推荐制作响应式网站的五个理由 如果一个网站的全部网页都是自适应式的网页,那么,它就是个响应式/自适应式(Responsive)网站了. 为什么要做自适应式网站呢? ...

  9. Spring WebFlux快速上手——响应式Spring的道法术器

    [url=https://blog.csdn.net/get_set/article/details/79480233]Spring WebFlux快速上手--响应式Spring的道法术器[/url]

最新文章

  1. C#实现php的hash_hmac函数
  2. 曾捡破烂为生，穷到没饭吃，现在身家395亿，给员工发3亿年终奖！
  3. 面试官问我，使用Dubbo有没有遇到一些坑？我笑了。
  4. 操作系统中，进程与线程怎么设计的？
  5. python图像锐化_opencv实现图片模糊和锐化操作
  6. 对象的克隆——原型模式
  7. ccf命令行选项只能用c实现_CCF-201403-3-命令行选项
  8. Neo4j 图创建1 以BiliBili粉丝UP主之间的关系为例
  9. 十、封装python3读写ini文件类
  10. 为何boss上的HR要了简历就不回复了？
  11. [转] Java中的容器
  12. android录屏直播方案,安卓手机录屏直播软件怎么用？
  13. java保护表格_java poi Excel单元格保护
  14. 一文读懂ssh,tomcat,LANP,LNMP,ftp,dns等常见的环境配置（运维工程师必看）
  15. mysql 没有 myd_MySQL中找不到.myd文件的问题
  16. songshu-video-uniapp-YYC松鼠短视频前端源码-开源--优雅草科技官方发布
  17. Error(15) 解决 sshd: no hostkeys available -- exiting.
  18. linux网络通的端口开的 网页打不开,打不开HTTPS网页的解决方案 解决打不开HTTPS...
  19. Http中header与body的区别
  20. Android: Kotlin 材料设计入门

热门文章

  1. 桌面计算机回收站打不开,b8,教您电脑回收站打不开怎么解决
  2. 单片机程序烧录方式有几种？
  3. 开机自检，BIOS运行原理
  4. Telnet英文全称
  5. java 生成纯色图片_canvas简单实现纯色背景图片抠图(示例代码)
  6. Hello-Rust
  7. pytoch矩阵乘法torch.bmm
  8. Python项目分析：预测双色球福利彩票中奖号码
  9. 一种简单的2D Roguelike地图生成算法
  10. 【无标题】There was an unexpected error (type=Internal Server Error, status=500).