您的位置：首页 > Web前端 > CSS

每日CSS_纯CSS制作进度条

2020-12-26 12:41 1146 查看

每日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;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, .1);
z-index: 10;
}

设置一行中, name, value, 和 progress 的效果, 其中的动画只设置了一个 from, to 状态由最后的
```
width
```
属性决定.

.container .skills .Name{
position: relative;
width: 120px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .Value{
position: relative;
width: 40px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .percent{
position: relative;
width: 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%;
width: 95%;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 2px #000;
animation: animate 4s ease-in-out
15a8
forwards;
}
@keyframes animate {
from{
width: 0;
}
}

设置各个进度条的颜色, 宽度值

.container .skills:nth-child(2) .percent .progress{
background: linear-gradient(45deg, #1fe6ff, #673AB7);
width: 95%;
}
.container .skills:nth-child(3) .percent .progress{
background: linear-gradient(45deg, #3bc0ff, #33ff00);
width: 90%;
}
.container .skills:nth-child(4) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
width: 72%;
}
.container .skills:nth-child(5) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
width: 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;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, .1);
z-index: 10;
}.container .skills .Name{
position: relative;
width: 120px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .Value{
position: relative;
width: 40px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .percent{
position: relative;
width: 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%;
width: 95%;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 2px #000;
animation: animate 4s ease-in-out forwards;
}
@keyframes animate {
from{
width: 0;
}
}
.container .skills:nth-child(2) .percent .progress{
background: linear-gradient(45deg, #1fe6ff, #673AB7);
width: 95%;
}
.container .skills:nth-child(3) .percent .progress{
background: linear-gradient(45deg, #3bc0ff, #33ff00);
width: 90%;
}
.container .skills:nth-child(4) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
width: 72%;
}
.container .skills:nth-child(5) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
width: 50%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航