【H5 CSS】【译】progress元素样式

Posted 2023-03-20

参考技术A 以下是progress的基本标签

根据 w3c 的定义，progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外，它还拥有两个自己的属性

一个进度条有两种状态：不确定和已确定

Google Chrome, Apple Safari , Opera 浏览器都是webkit内核，设置progress element 元素样式基于 -webkit-appearance: progress-bar

设置progress默认样式，一般简单的设置为 -webkit-appearance: none

对 -webkit-progress-value 属性的背景增加动画

对 -webkit-progress-value 选择器使用动画

使用::before 和 ::after 可以在progress元素上展示进度条的百分比或者准确的数字。

原文地址： https://css-tricks.com/html5-progress-element/

HTML5进度条元素的CSS3过渡

【中文标题】HTML5进度条元素的CSS3过渡

【英文标题】：CSS3 Transition of HTML5 progress bar element

【发布时间】：2014-08-16 00:04:22

【问题描述】：

我正在使用此处描述的进度条：

http://css-tricks.com/html5-progress-element/

使用<progress> 元素并使用伪类对其进行样式设置 -webkit-progress-bar 和 -webkit-progress-value。

所以现在我想在progress-value 更新时为其设置动画。

在我的理论中，这应该通过像这样转换它的 CSS 宽度属性来工作：

progress::-webkit-progress-value 
    transition: 5s width;

但由于某种原因，这似乎不起作用。

【问题讨论】：

你有想过这个吗？

【参考方案1】：

transition property 的正确语法是：

transition: [property] [duration] [timing-function] [delay];

那么你的值（transition: 5s width;）是错误的，时间和属性是倒置的，并且缺少计时功能。它应该是（例如）：

transition : width 5s ease;

它也应该作为跨浏览器工作的前缀，特别是对于基于 WebKit 的浏览器，将标准属性保留为最后一个。

-webkit-transition : width 5s ease;
   -moz-transition : width 5s ease;
     -o-transition : width 5s ease;
        transition : width 5s ease;