爱站程序员基地每日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-out15a8forwards;}@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%;}
