代码之家 › 专栏 › 技术社区 › Christian Tellnes

是否可以使用CSS3转换设置米标记值的动画?

css3 html5

5

Christian Tellnes · 技术社区 · 15 年前

像这样的事情

-webkit-transition: all 1s linear;

或者

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

3 回复 | 直到 15 年前

1

3

casablanca 15 年前

不,CSS只是用来改变演示内容 ,并且必须直接在HTML中指定或通过JavaScript进行操作。

编辑: 我有点误解了你的问题,但答案是一样的。CSS转换仅用于设置CSS属性的动画,无法从CSS访问元素的值。

2

9

leops 12 年前

是的,这是完全可能的,因为WebKit使用Shadow DOM来具体化meter元素,而不是使用默认的system one(所以meter和进度条可以设置样式)。您可以将其视为meter元素中的隐藏内容:

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

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

你可以设置你的仪表动画。

3

2

Harmen 15 年前

transition-property . 证明: w3.org