每日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. 多态，向上转型，向下转型，final关键字

    多态 概述   多态封装性,继承性之后,面向对象的第三大特性. 定义   多态:是指同一种行为,具有多个不同的表现形式.   生活中,比如跑的动作,猫,狗,大象跑起来的动作都是不一样的,再比如飞的动作 ...

  2. transform的2D和3D变换

    transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  3. java类,函数传参

    1 package 传参练习; 2 //学生姓名组成的数组:指定区间和查找的名字返回此人是否存在(如果存在返回位置否则-1) 3 public class test1 { 4 public stati ...

  4. Intel s2600系列做虚拟化需要注意的item

    Intel s2600cw\cp主板做虚拟化BIOS需要设置以下选项,附件为截图供参考. -->vt,cpu虚拟化,默认关闭,需要确保开启 -->ht,cpu超线程,默认开启,需要确保开启 ...

  5. 多k8s集群管理

    多集群的切换是K8s运维中比不可少的问题,常见的基于多个集群进行切换的方法有三种: 切换config文件 通过context进行集群切换 用kubecm进行集群切换 切换config文件 我们先看看放 ...

  6. chrome浏览器查看当前页面cookie

    方法一:点进去设置--高级--网站设置--权限cookie--查找所有cookie和网站数据,就可以看到所有的cookie信息了,举例: 方法二:键盘F12,找到network--点击Doc(如果没有 ...

  7. ubuntu 安装scapy

    官网下载最新安装包:https://scapy.net/ 下载之后进入相应文件夹解压: 然后进入相关文件夹启动setup.py: 成功:

  8. 20200116_centos7.2 下 mysql_5.7修改root密码

    1. 需改my.cnf文件 [root@rakinda-iot-platform ~]# vim /etc/my.cnf 2. 新增一行, 登录时跳过密码, 保存后退出, 重启mysql system ...

  9. 安装spyder记录

    sudo apt-get install spyder 报错:ERROR: Could not find a version that satisfies the requirement pyqt5& ...

  10. 大白话详解大数据HBase核心知识点，老刘真的很用心(3)

    老刘目前为明年校招而努力,写文章主要是想用大白话把自己复习的大数据知识点详细解释出来,拒绝资料上的生搬硬套,做到有自己的理解! 01 HBase知识点(3) 第13点:HBase表的热点问题 什么是热 ...