每日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 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%;

}

每日CSS_纯CSS制作进度条的更多相关文章

  1. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  2. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  3. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

  4. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  7. html5中的progress兼容ie，制作进度条样式

    html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...

  8. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  9. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Forethought Future Cup - Final Round (Onsite Finalists Only) C. Thanos Nim 题解（博弈+思维）

    题目链接 题目大意 给你n堆石子(n为偶数),两个人玩游戏,每次选取n/2堆不为0的石子,然后从这n/2堆石子中丢掉一些石子(每一堆丢弃的石子数量可以不一样,但不能为0),若这次操作中没有n/2堆不为 ...

  2. LaTeX中的数学公式的初步使用

    数学公式初步使用代码及注释: 显示效果:

  3. [Android systrace系列] 抓取开机过程systrace

    ------------------------------------------------------------------------- 这篇文章的小目标:了解抓取开机过程systrace的 ...

  4. 码农飞升记-Java是什么?

    1.Java概述 Java 原名 Oak 是 Sun Microsystems 公司的 James Gosling 及其团队于 1995 年 5 月推出的 Java 程序设计语言 和 Java 平台 ...

  5. 使用Git，10件你可能需要“反悔”的事

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  6. 记一次容器CPU高占用问题排查

    起因:发现docker中有两个容器的CPU持续在百分之95以上运行了一晚上 执行命令:docker stats 发现这个两个大兄弟一点没歇满负荷跑了一晚上,再这么下去怕不是要GG 容器里跑的是JAVA ...

  7. 雪花算法 Java 版

    雪花算法根据时间戳生成有序的 64 bit 的 Long 类型的唯一 ID 各 bit 含义: 1 bit: 符号位,0 是正数 1 是负数, ID 为正数,所以恒取 0 41 bit: 时间差,我们 ...

  8. 5.1 Spring5源码--Spring AOP源码分析一

    目标: 1.什么是AOP, 什么是AspectJ, 2. 什么是Spring AOP 3. Spring AOP注解版实现原理 4. Spring AOP切面原理解析 一. 认识AOP 1.1 什么是 ...

  9. 第8.17节 Python __repr__方法和__str__方法、内置函数repr和str的异同点对比剖析

    一. 引言 记得刚开始学习Python学习字符串相关内容的时候,查了很多资料,也做了些测试,对repr和str这两个函数的返回值老猿一直没有真正理解,因为测试发现这两个函数基本上输出时一样的.到现在老 ...

  10. PyQt（Python+Qt）学习随笔：QMainWindow的takeCentralWidget对QDockWidget作用案例图解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 QMainWindow的takeCentralWidget方法作用是将 ...