2021-09-11

最新推荐文章于 2022-07-13 19:27:57 发布

lvchunfei123

最新推荐文章于 2022-07-13 19:27:57 发布

阅读量92

点赞数 1

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/lvchunfei123/article/details/120233224

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过css新特性实现进度条和自定义计数器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bar {
      line-height: 20px;
      background-color: #eee;
    }
    .bar::before {
      counter-reset: progress var(--percent); /* 设置计数器名称 */
      content: counter(progress) "%\2002";
      display: block;
      width: calc(1% * var(--percent));
      color: #fff;
      background-color: deepskyblue;
      text-align: right;
    }
    body{
				counter-reset: section;/* 设置选择器出现的次数根据内容 */
			}
			h2{
				counter-reset: subsection;
			}
			h2:before{
				 counter-increment:section;/*属性递增一个或者多个计数器的值*/
					content:counter(section) "、";
			}
			h4:before{
			counter-increment:subsection;
				content: counter(section) "." counter(subsection) "、";
}
  </style>
</head>
<body>
  <label for="">图片</label>
  <div class="bar" style="--percent: 60;"></div>
  <div>
    <h2>123</h2>
		<h4>321</h4>
		<h4>321</h4>
		<h2>ads</h2>
		<h4>5516</h4>
		<h4>132</h4>

  </div>
</body>
</html>

在这里插入图片描述

lvchunfei123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-09-11

通过css新特性实现进度条和自定义计数器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫