每日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. Java基础教程——变量

    变量 变量(variable)可以理解为一个"有名称的容器",用于装各种不同类型的数据.编程人员通过对变量的访问和修改,操作内存中的数据. 对变量的理解:https://www.c ...

  2. Java数据结构（十）—— 树

    树 树的概念和常用术语 常用术语 节点 根节点 父节点 子节点 叶子节点:没有子节点的节点 节点的权:节点的值 路径:节点A到节点B的路径 层 子树 树的高度:最大层数 森林:多颗子树构成森林 二叉树 ...

  3. Spring Cloud 学习 (四) Hystrix & Hystrix Dashboard & Turbine

    在复杂的分布式系统中,可能有几十个服务相互依赖,这些服务由于某些原因,例如机房的不可靠性.网络服务商的不可靠性等,导致某个服务不可用 . 如果系统不隔离该不可用的服务,可能会导致整个系统不可用.Hys ...

  4. 20200315_python3.6去除标点符号

    line = "python3.6下进行去!@#$%^&*()除标点测试,:!大家好,:!&>啥都不是!@#￥%--&*(-.||" # python ...

  5. paddleocr安装笔记

    下载解压安装 wget http://npm.taobao.org/mirrors/python/3.7.6/Python-3.7.6.tgztar xvf Python-3.7.6.tgzcd Py ...

  6. Jdk源码-集合类主要原理和解析

    写在前面 熟悉Jdk原理的重要性不言而喻,作为Java开发者或者面试者,了解其实现原理也显得更为装逼,在Java读书计划我写到了,它是面试中最基础的一部分,所以单独拿出来做个总结,为了更好滴理解和学习 ...

  7. 第6.2节 Python特色的动态可执行方法简介

    一.    基本概念 动态可执行,是指在代码中通过外部输入或代码嵌入的常量字符串包含代码的方式提供Python代码,要求Python执行这些代码.这样就可以达到开放式运行的效果,提高程序的能力和灵活性 ...

  8. Codeforces Edu Round 47 A-E

    A. Game Shopping 按照题意模拟既可. #include <iostream> #include <cstdio> using namespace std; co ...

  9. 算法——最长上升子序列（DP和二分）

    给定一个无序的整数数组,找到其中最长上升子序列的长度. 输入: [10,9,2,5,3,7,101,18] 输出: 4 纯DP 解体思路:利用动态规划的方法,从一个方向遍历数组,每次获取以该位置为子序 ...

  10. ELK-Kibana汉化

    https://github.com/anbai-inc/Kibana_Hanization  补丁包 教程:1:首先,我们先杀死了Kibana进程,其实,教程说不用重启或关闭Kibana,但是,我们 ...