使用 CSS 属性的解决方案
在此代码中，我们将为使用 HTML <progress> 标记创建的进度条设置动画。
在我们的示例中，我们为 Shadow DOM 元素设置样式，但可能会导致困难的一件事是动画背景，该背景表示为重复的线性渐变。
为了克服这个困难，我们可以在主元素上添加动画并使用级联继承，这可以跨越阴影边界。
但请注意，这不适用于 background-color 属性，这就是我们使用渐变并为位置设置动画的原因。
其中要计算背景大小和背景位置，我们需要做一些数学运算。
让我们看看例子。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html {
font-size: 62.5%;
font-family: sans-serif;
}
body {
font-size: 1.6rem;
}
progress[value] {
display: block;
width: 100%;
min-height: 4rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 8px;
box-shadow: inset 4px 4px 4px rgba(84, 30, 8, 0.2);
background-color: rgba(149, 250, 61, 0.1);
border: 1px solid #ccc;
animation: colorrush 4s infinite linear;
}
progress[value]::-webkit-progress-inner-element {
border-radius: 8px;
overflow: hidden;
background-position: inherit;
}
progress[value]::-webkit-progress-bar {
border-radius: 8px;
background-color: transparent;
background-position: inherit;
}
progress[value]::-webkit-progress-value {
border-radius: 10px 0 0 10px/10px 0 0 10px;
box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#4a54ba, #888ccf, #b8b9cc);
background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/
100% 800%;
background-position: inherit;
}
progress[value]::-moz-progress-bar {
border-radius: 10px 0 0 10px/10px 0 0 10px;
box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#4a54ba, #888ccf, #b8b9cc);
background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/
100% 800%;
background-position: inherit;
}
@keyframes colorrush {
0% {
background-position: 0 0;
}
100% {
background-position: calc(10*(12px/0.707)) 100%;
}
}
</style>
</head>
<body>
<progress max="150" value="125">125/150</progress>
</body>
</html>
日期：2020-06-02 22:14:56 来源：oir作者：oir