Question

如果值发生变化，css是否可以将视觉变化设置为米/进度标记的动画？

像这样的事情

-webkit-transition: all 1s linear;

或者

-webkit-transition: meter-value 1s linear;

Answer 1

是的，这是完全可能的，因为WebKit使用Shadow DOM来实现仪表元素而不是使用默认的系统元素（因此可以设置仪表和进度条的样式）。您可以将其视为仪表元素中的隐藏内容：

<div pseudo="-webkit-meter-inner-element">
    <div pseudo="-webkit-meter-bar">
        <div pseudo="-webkit-meter-optimum-value" style="width: 46%;"></div>
    </div>
</div>

当您更改仪表的值时，WebKit将更改最后一个div的宽度。所以：

meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
    transition: 1s width;
}

您可以为您的仪表设置动画。

Answer 2

不，CSS仅用于更改页面的表示，而值是页面内容的一部分，必须直接在HTML中指定或者通过JavaScript操纵。

编辑：我稍微误解了你的问题，但答案仍然是一样的。 CSS转换仅用于为CSS属性设置动画，并且无法从CSS访问元素的值。

Answer 3

不，这是不可能的，因为transition-property不支持此属性。证明：w3.org

是否可以使用CSS3过渡来为米标签的值设置动画？

3 个答案: