每日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. SimpleChannelInboundHandler生命周期

    转载:https://www.pianshen.com/article/1766171597/

  2. 这次我让你彻底弄懂 RESTful

    微信搜 「yes的练级攻略」干货满满,不然来掐我,回复[123]一份20W字的算法刷题笔记等你来领.欢迎分享,转载请保留出处. 本文已收录至 https://github.com/yessimida/ ...

  3. Spring Cloud Alibaba 初体验(六) Seata 及结合 MyBatis 与 MyBatis-Plus 的使用

    一.下载与运行 本文使用 Seata 1.1.0:https://github.com/seata/seata/releases Windows 环境下双击 bin/seata-server.bat ...

  4. Spring Boot + MongoDB 使用示例

    本文分别使用 MongoRepository 和 MongoTemplate 实现 MongoDB 的简单的增删改查 本文使用 docker 安装 MongoDB: 使用示例 application. ...

  5. DDD（领域驱动设计）--战术设计

    前言 战术设计 战略设计为我们提供一种高层视野来审视我们的软件系统,主要包括领域/子域.通用语言.限界上下文和架构风格等概念, 而战术设计则将战略设计进行具体化和细节化,它主要关注的是技术层面的实施, ...

  6. urllib.request.urlopen(req).read().decode解析http报文报“utf-8 codec can not decode”错处理

    老猿前期执行如下代码时报"'utf-8' codec can't decode byte"错,代码及错误信息如下: >>> import urllib.reque ...

  7. PyQt(Python+Qt)学习随笔：Designer中属性设置界面的属性字体使用粗黑体的含义

    老猿Python博文目录 老猿Python博客地址 使用了好几个月的Designer,今天才发现属性编辑界面的属性名有的为粗而黑,有的则不是,如图: 稍微测试了一下,发现是对属性值进行过调整,不再是缺 ...

  8. Shiro反序列化漏洞利用汇总（Shiro-550+Shiro-721）

    Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能.Shiro框架直观.易用,同时也能提供健壮的安全性. 文章目录: 1.Shiro rememberMe ...

  9. 安恒2018年三月月赛MISC蜘蛛侠呀

    到处都是知识盲区hhh 下载了out.pcap之后,里面有很多ICMP包 看到ttl之后联想到西湖论剑里面的一道杂项题,无果 看WP知道可以使用wireshark的tshark命令提取流量包里面的文件 ...

  10. v-lazyload数据变化图片不切换

    这个问题让我很困惑,明明得到的商品数据已经改变了,但是就图片不变化,随后找到了解决办法,那就是多加一个动态的key <img v-lazy="item.productImage&quo ...