每日CSS_纯CSS制作进度条
2020_12_26
1. 代码解析
1.1 html 代码解析
- 设置整个容器
<div class="container">
...
</div>
- 设置主题和第一行进度条, 主题用
<h2>标识, 每个进度条用<skills>标识, 如图所示
<div class="container">
<h2>前端技能</h2>
<div class="skills">
<span class="Name">Html</span>
<div class="percent">
<div class="progress" ></div>
</div>
<span class="Value">95%</span>
</div>
...
</div>
- 设置其他的行, 与第一行类似, 原理也一样
<div class="skills">
<span class="Name">CSS</span>
<div class="percent">
<div class="progress" ></div>
</div>
<span class="Value">90%</span>
</div>
<div class="skills">
<span class="Name">JavaScript</span>
<div class="percent">
<div class="progress"></div>
</div>
<span class="Value">72%</span>
</div>
<div class="skills">
<span class="Name">frame</span>
<div class="percent">
<div class="progress"></div>
</div>
<span class="Value">50%</span>
</div>
1.2 css 代码解析
- 初始化所有边距, 设置尺寸计算方式为 border-box, 设置 body 布局方式, 将内容居中显示, 设置背景和字体大小
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2e2e2e;
font-size: 16px;
}
- 设置 h2 标签的颜色
.container h2{
color: #fff;
}
-
设置每行的格式, 上下边距, 左右边距, 设置过渡效果时间 0.5s .
margin 和 padding 有一个值, 有两个值, 有三个值, 有四个值时赋予四个方向值的方式, 1个值, 上下左右这个值; 2个值, 分别表示上下和左右; 3个值, 分别表示上, 右, 下, 剩下一个左和右保存一致; 4个值, 分别表示, 上, 右, 下, 左
.container .skills{
position: relative;
display: flex;
/* 只有两个数值, 分别表示上下和左右, 上下 20px, 左右 0 */
margin: 20px 0;
/* 上右下, 缺少一个左, 左和右保持一致, 左的内边距为 10px */
padding: 24px 10px 18px;
background: linear-gradient(#616161 0%, #333 10%, #222);;
border-radius: 8px;
overflow: hidden;
border: 2px solid #000;
transition: 0.5s;
}
- 设置过渡效果, 移入容器时, 透明度设为0.05, 并将选中的那行放大, 效果如下
.container:hover .skills{
opacity: 0.05;
}
.container .skills:hover{
opacity: 1;
transform: scale(1.1);
}
- 设置每一行的分层效果, 分为上下两层
.container .skills:before {
content: '';
position: absolute;
top: 0;
left: 0;
100%;
height: 50%;
background: rgba(255, 255, 255, .1);
z-index: 10;
}
- 设置一行中, name, value, 和 progress 的效果, 其中的动画只设置了一个 from, to 状态由最后的
width属性决定.
.container .skills .Name{
position: relative;
120px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .Value{
position: relative;
40px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .percent{
position: relative;
200px;
height: 16px;
margin: 0 10px;
border-radius: 10px;
background: #151515;
box-shadow: inset 0 0 10px #000;
overflow: hidden;
}
.container .skills .percent .progress{
position: absolute;
top: 0;
left: 0;
height: 100%;
95%;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 2px #000;
animation: animate 4s ease-in-out forwards;
}
@keyframes animate {
from{
0;
}
}
- 设置各个进度条的颜色, 宽度值
.container .skills:nth-child(2) .percent .progress{
background: linear-gradient(45deg, #1fe6ff, #673AB7);
95%;
}
.container .skills:nth-child(3) .percent .progress{
background: linear-gradient(45deg, #3bc0ff, #33ff00);
90%;
}
.container .skills:nth-child(4) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
72%;
}
.container .skills:nth-child(5) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
50%;
}
2. 源码
2.1 html 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="2020_12_26.css">
</head>
<body>
<div class="container">
<h2>前端技能</h2>
<div class="skills">
<span class="Name">Html</span>
<div class="percent">
<div class="progress" ></div>
</div>
<span class="Value">95%</span>
</div>
<div class="skills">
<span class="Name">CSS</span>
<div class="percent">
<div class="progress" ></div>
</div>
<span class="Value">90%</span>
</div>
<div class="skills">
<span class="Name">JavaScript</span>
<div class="percent">
<div class="progress"></div>
</div>
<span class="Value">72%</span>
</div>
<div class="skills">
<span class="Name">frame</span>
<div class="percent">
<div class="progress"></div>
</div>
<span class="Value">50%</span>
</div>
</div>
</body>
</html>
2.2 css 源码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2e2e2e;
font-size: 16px;
}
.container h2{
color: #fff;
}
.container .skills{
position: relative;
display: flex;
margin: 20px 0;
padding: 24px 10px 18px;
background: linear-gradient(#616161 0%, #333 10%, #222);;
border-radius: 8px;
overflow: hidden;
border: 2px solid #000;
transition: 0.5s;
}
.container:hover .skills{
opacity: 0.05;
}
.container .skills:hover{
opacity: 1;
transform: scale(1.1);
}
.container .skills:before {
content: '';
position: absolute;
top: 0;
left: 0;
100%;
height: 50%;
background: rgba(255, 255, 255, .1);
z-index: 10;
}
.container .skills .Name{
position: relative;
120px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .Value{
position: relative;
40px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .percent{
position: relative;
200px;
height: 16px;
margin: 0 10px;
border-radius: 10px;
background: #151515;
box-shadow: inset 0 0 10px #000;
overflow: hidden;
}
.container .skills .percent .progress{
position: absolute;
top: 0;
left: 0;
height: 100%;
95%;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 2px #000;
animation: animate 4s ease-in-out forwards;
}
@keyframes animate {
from{
0;
}
}
.container .skills:nth-child(2) .percent .progress{
background: linear-gradient(45deg, #1fe6ff, #673AB7);
95%;
}
.container .skills:nth-child(3) .percent .progress{
background: linear-gradient(45deg, #3bc0ff, #33ff00);
90%;
}
.container .skills:nth-child(4) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
72%;
}
.container .skills:nth-child(5) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
50%;
}