每日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. 11_SurfaceView绘图

    学习SurfaceView绘图API的使用方法,为接下来使用SurfaceView开发游戏做准备. 1 package com.example.surfaceview; 2 3 import andr ...

  2. 推荐4个Flutter重磅开源项目

    早上好,骚年,我是小 G,我的公众号「菜鸟翻身」会推荐 GitHub 上有用的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 近年来,随着移动智能设备的快速普及,移动多端统一开 ...

  3. 转：【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图

    [摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...

  4. web文件包含

    web安全~文件包含总结   文章来自freebuf,作者总结的很好,所以拿来做笔记用!!! 0×01 文件包含简介 服务器执行PHP文件时,可以通过文件包含函数加载另一个文件中的PHP代码,并且当P ...

  5. Django 框架基本操作(二)

    一.设计表结构 1.班级表结构 表名:grade 字段:班级名称(gname).成立时间(gdate).女生总数(ggirlnum).男生总数(gboynum).是否删除(isDelete) 2.学生 ...

  6. Go微服务实践之增删改查

    从此篇文章开始,我们来陆续介绍 go-zero 开发一个项目所需要的组件和开发实践. 首先我们从 model 层开始,来说说go-zero 的API以及封装细节.首先 model 层连接的API集中在 ...

  7. Autofac 动态获取对象静态类获取对象

    Autofac 从容器中获取对象 静态类或Service场景可以动态,可以直接动态获取对象 /// <summary> /// 从容器中获取对象 /// </summary> ...

  8. Scrum冲刺_Day03

    一.团队展示: 1.项目:light_note备忘录 2.队名:删库跑路队 3.团队成员 队员(不分先后) 项目角色 黄敦鸿 后端工程师.测试 黄华 后端工程师.测试 黄骏鹏 后端工程师.测试 黄源钦 ...

  9. Devpress (DxReport)使用ReportDesigner (一) 基本功能

    1. Devpress (DxReport)编辑 (1) 新建一个XtraReport. (2) 在报告上点右键添加元素:   元素说明: (1) 其中有报告头,报告尾,页头,页尾,组头,组尾,详细. ...

  10. 【学习笔记】K 短路问题详解

    \(k\) 短路问题简介 所谓"\(k\) 短路"问题,即给定一张 \(n\) 个点,\(m\) 条边的有向图,给定起点 \(s\) 和终点 \(t\),求出所有 \(s\to t ...