所以基本上,我正在尝试创建一个进度条。在这个例子中,我只是将我使用的颜色更改为
red
、green
和 blue
,因为这显然比一堆十六进制值更容易理解。实际上,我想要的是让进度条具有 RGB 渐变背景,给人留下渐变从左向右移动的印象,以表示仍然存在活动(即该站点尚未冻结)。我尝试了一些方法,首先设置 background: linear-gradient(120deg, red, green, blue)
并为 background-position
CSS 属性设置动画以模拟渐变移动。然而,一旦在动画结束时,进度条从大部分为蓝色(即渐变的结束)跳回到绿色......然后我尝试以 rgbgr
的形式手动反映渐变 - 即background: linear-gradient(120deg, red, green, blue, green, red)
,虽然这看起来更好,但仍然存在跳动。最后,我尝试使用 repeating-linear-gradient
CSS 函数 - 即 background: repeating-linear-gradient(120deg, red, green, blue, green, red)
。这是最接近我的目标的,但在示例中,您可以看到渐变颜色“跳跃”,而不是平滑地动画
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(120deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
-webkit-animation: AnimationName 3s linear infinite;
-moz-animation: AnimationName 3s linear infinite;
animation: AnimationName 3s linear infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>
我之前在很多网站上看到过这种效果,所以我认为这在 CSS 中是可能的。如果有人能指出我正确的方向,我将不胜感激。谢谢!
您可以像下面这样做,它将适用于您想要的任何角度:
body {
background: #222;
}
.wrapper {
--d:100px;
--angle:120deg;
height: 50px;
width: 400px;
position: relative;
z-index:0;
background: #131313;
text-align: center;
line-height:50px;
color: white;
margin:5px;
}
.wrapper::before {
content:"";
height: 100%;
left:0;
width:var(--w);
position: absolute;
z-index:-1;
background: repeating-linear-gradient(var(--angle), red, green, blue, green, red var(--d));
background-size: calc(var(--d)/sin(var(--angle))) 100%;
animation: AnimationName 2s linear infinite reverse;
}
@keyframes AnimationName {
0% {
background-position: calc(var(--d)/sin(var(--angle))) 0;
}
}
<div class="wrapper" style="--w:50%;">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:70%;--d:200px;--angle:45deg;">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:80%;--d:50px;--angle:150deg;">
Downloading 5 of 10
</div>
在循环回来之前,您需要运行动画一段时间。
@keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%} /* instead of 0% 50% */
}
我还将渐变角度更改为
90deg
,因为初始值使得渐变的开始和结束不太匹配
/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
animation: AnimationName 3s linear infinite;
}
@keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>