先看一张图，有进度条效果的图片，或者美化一下，可以把它看成是带充电效果的图片。这张图是上篇文章《这样写 step 步骤条就轻松了》的延伸。上一篇文章提到使用progress标签实现进度条的效果，没有提供比较具体的demo。这一次，不仅有一个更具体的demo（虽然不是特别酷），还有一个新的标签，一个比progress更强大的标签。波浪动画效果这个效果其实就是两个标签元素的叠加。为了形成所谓的波浪效果，会在两个元素之间做出细微的差别，在不同的进度值处显示不同的颜色值。在这两张图中，我们可以发现不同之处在于：圆角的大小不同；两个元素的透明度不同；两种元素似乎有一种错位感；两张图片的颜色不同；label来实现效果，那么这里使用的wave就使用了::before和::after。使用这两个还有一些其他的原因，因为我们有一个动画效果需要使用animation属性，但是在伪元素中，后面提到的伪元素在Chrome中是不支持的，但是在Safari中是可以使用的.圆角的处理圆角是通过修改border-radius的八个值得到的。具体数值完全看心情，比如我的。图中所示的小工具是很久以前折腾过的一个圆角处理小工具。有了这个小工具，你可以直接拖放每个角，然后得到效果，而不需要手动逐个修改每个值。透明处理直接使用不同的不透明度值，叠加即可。拼接感结合opacity属性，然后位置偏移left或者margin-left，最后结合不同的border-radius。不同的颜色这个就是要和我们接下来要说的HTML元素结合起来，让我们可以在不同的value值下显示不同的颜色效果。与progress元素相比，会有更多的可配置性。Meterlabel这个就是我们要了解的meterlabel。与progress相比，它多了几个阶段标记，所以有不同的颜值。同样的meter标签在打开shadowDOM查看的时候也能看到几个伪元素的存在。对比progress可以发现，同样是三层嵌套结构，只是在最后一层meter嵌套的时候，伪元素的类名会根据值发生变化。正因如此，才有了不同阶段的色值。常用的属性列表minmaxvaluelowhighoptimum多了三个属性low、high、optimum，可以控制进度显示效果。不同的数值结果会直接影响色彩显示效果。一般情况下，一般的建议是：min≤low≤high≤optimum≤max，是的，只是正常情况下，如果不正常，让high小于low也不是不可以，但是最终的颜色表情呵呵。如果最佳值介于min和low之间，则可能的结果是两种颜色互调。伪元素list::-webkit-meter-inner-element::-webkit-meter-bar上面两个和进行中的没什么区别，都是分层嵌套和包裹。以下三点是区别。::-webkit-meter-optimum-value::-webkit-meter-even-less-good-value::-webkit-meter-suboptimum-value从名字就可以看出，主要是三个不同值的颜色表示。even-less-good(red)suboptimum(yellow)optimal(green)样式优化简单明了的HTML代码，后面需要改值。米{位置：相对；宽度：200px；高度：50px；边距顶部：100px；边框：5px实心#000；边界半径：16px；溢出：隐藏；appearance:none;}这部分的关键是position，overflow和appearance这三个，appearance的主要作用是修改appearance样式，另外两个在下面控制::before和::after的时候用到。meter::after,meter::before{内容：'';位置：绝对；顶部：-200%；左：var（--roundLeft）；宽度：200px；高度：200px；/200px219px141px149px;背景色：var(--bgc)；不透明度：0.3；z-索引：1；动画：3s线性0s无限rotateItem;}meter::before{left:calc(var(--roundLeft)-5%);边框半径：151px132px178px118px/174px129px189px172px；opacity:0.5;}这里可以看到有动画，所以需要添加@keyframes的关键帧。@keyframesrotateItem{来自{transform:rotate(1deg);}到{变换：旋转（360deg）；}}也是一个很简单的动画风格，就是让不规则的圆圈转起来。如果你细心一点，你一定见过这两个CSS变量——roundLeft和——bgc，以及在::before中使用calc()计算偏移量的方法。这两个CSS变量的主要作用是通过属性选择器来控制各个阶段的颜色和位置，例如：meter[value="0"]::after,meter[value="0"]::before{--左圆：-90%；--bgc:#f00;}/*省略部分*/meter[value="5"]::after,meter[value="5"]::before{--roundLeft:-50%;--bgc:#f0f;}/*省略部分*/meter[value="10"]::after,meter[value="10"]::before{--roundLeft:0%;--bgc:#0f0;}前面我们提到可以根据值直接通过三个不同的伪元素改变颜色。如果我们不使用::before或::after，这确实是可能的。但是我们现在正在使用，所以这三个颜色值没有作用，不能从这样的层级结构传到外层去继承。所以，干脆把这三个色值设为透明即可。meter::-webkit-meter-bar,meter::-webkit-meter-optimum-value,meter::-webkit-meter-even-less-good-value,meter::-webkit-meter-suboptimum-value{background-color:transparent;}这么一折腾，最终还是没有真正利用到meter组件的特性。相反，我们只是结合了value属性，通过属性选择器实现了position的改变。但是这些伪元素一直存在，只是这个demo无法证明它们的可用性。可能是我对通过每个值得到的效果期望太高，想加上animation动画效果。假设，如果chrome可以很好的支持animation的动画效果，不使用::before和::after也可以实现，并且可以在ShadowDOM中使用伪元素。最终效果在最后。meter标签的主要作用是显示，如果我们想要有交互效果，那么大概可以这样：通过N个:hover伪类来实现鼠标悬停的效果；通过：checked实现点击后切换不同颜色的效果；外部通过修改输入input来改变meter的值，这里我们使用type='range'的input来实现滑动拖动改变数值；最后，通过样式，覆盖仪表，同时隐藏输入。#changeMeter{宽度：200px；高度：50px；位置：绝对；顶部：100px；左：0；z-指数：5；opacity:0;}相关阅读：这样写step步骤很容易。:知乎自乐(https://mp.weixin.qq.com/s/r_...
