【发布时间】：2020-11-19 00:45:07
【问题描述】：
我正在尝试为进度条设置动画（HTML5 <progess> 标记）。我设法设置了 Shadow DOM 元素的样式，但我无法为背景设置动画（重复线性渐变）。它适用于 Firefox，但不适用于 Chrome 和 Edge。
<ins>它不起作用我的意思是，条纹背景显示，但不是动画</ins>
似乎@keyframe 动画定义在阴影边界之外具有不同的范围。
<ins>
如何打破 Shadow DOM 边界的范围？
或者有什么方法可以覆盖用户代理 shadow DOM 实现？ </ins>
<ins>
如果有 No-JS 解决方案，我会很高兴</ins>
.progress {
position: relative;
}
.progress::before {
content: attr(title);
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
}
progress[value] {
display: block;
width: 100%;
min-height: 4rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 10px;
box-shadow: inset 4px 4px 4px rgba(84, 30, 8, 0.2);
background-color: rgba(149, 250, 61, 0.1);
border: 1px solid #ccc;
}
progress[value]::-webkit-progress-inner-element {
border-radius: 10px;
overflow: hidden;
}
progress[value]::-webkit-progress-bar {
border-radius: 10px;
/* box-shadow: inset 4px 4px 4px rgba(84, 30, 8, 0.2); */
background-color: transparent;
}
progress[value]::-webkit-progress-value {
border-radius: 10px 0 0 10px / 10px 0 0 10px;
box-shadow: inset 2px 2px 2px rgba(84, 30, 8, 0.2);
background-color: #95fa3c;
position: relative;
background-image: repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.1) 6px, rgba(0, 0, 0, 0.1) 12px);
background-size-x: 800942px; /* empirical value */
-webkit-animation: colorrush 3s infinite linear;
animation: colorrush 3s infinite linear;
}
progress[value]::-moz-progress-bar {
border-radius: 10px 0 0 10px / 10px 0 0 10px;
box-shadow: inset 2px 2px 2px rgba(84, 30, 8, 0.2);
background-color: #95fa3c;
position: relative;
background-image: repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.1) 6px, rgba(0, 0, 0, 0.1) 12px);
background-size: 800942px; /* empirical value */
animation: colorrush 3s infinite linear;
}
@-webkit-keyframes colorrush {
0% {
background-color: #95fa3c;
background-position-x: 0;
}
50% {
background-color: #c4eea0;
}
100% {
background-color: #95fa3c;
background-position-x: 152px; /* empirical value */
}
}
@keyframes colorrush {
0% {
background-color: #95fa3c;
background-position-x: 0;
}
50% {
background-color: #c4eea0;
}
100% {
background-color: #95fa3c;
background-position-x: 152px; /* empirical value */
}
}
html {
font-size: 62.5%;
font-family: sans-serif;
}
body {
font-size: 1.6rem;
}<div class="progress" title="125 / 150 (83.33%)">
<progress max="150" value="125">125 / 150</progress>
</div>【问题讨论】：
-
看来你运气不好，就像bug wont fix。我通过 this tutorial 找到了这个链接来描述你的问题。好像你说的，shadow dom 的范围不能访问这个样式定义。一种方法似乎是将动画设置为
<progress>元素，但我不知道这是否适用于您的用例。 -
@NicoO 我在 CSS 标准规范上找到了一个discussion，好像说的是一样的：
-
@NicoO 还有一个
@scope规则的draft specification，在任何浏览器中都是not implemented -
它需要是progres元素吗？您可以使用自定义代码轻松实现相同目标
-
@TemaniAfif 当然可以，但我喜欢 Sematic Web
标签： html css progress-bar linear-gradients repeating-linear-gradient