博哥教你使用纯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