向弹性容器中的多个项目添加渐变
adding gradients to multiple items in a flex container
如何在考虑项目数量的同时,将渐变 class 添加到此 flex 容器中的多个项目背靠背?目前它只能通过将 class 添加到一组特定的 'unit' 并产生单独的渐变来工作。
我想要一个渐变来覆盖两个或多个项目,同时保持所有项目的弹性和相等。
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
.gradient {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
<div class="chart">
<div class="unit gradient">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit gradient">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
如果这条线上的点数已知并且永远不会改变,您可以自己计算色标并实现它们,以便这条线形成一个完整的渐变。
但是,如果您想将某些内容应用于类似的内容,我的建议是 使用 Javascript。
此函数将为您计算梯度。这很难,但有可能在应用程序中实现它,以便它实际更改 CSS。我已经手动完成了两个单位的计算:
//background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
function gradientProgress(gStart,gEnd,at){
//gStart and gEnd are [r,g,b,a,%]
var prog = (at - gStart[4]) / (gEnd[4] - gStart[4]);
var res = [0,0,0,0,100]
for(var a = 0;a<4;a++){
res[a] = Math.round(gStart[a] + (prog * (gEnd[4] - gStart[4])));
}
return res;
}
console.log("First one: " + "[2, 0, 36, 1, 0], [9, 9, 121, 1, 70], [" + (gradientProgress([9,9,121,1,35],[0,212,255,1,100],50)).toString() + "]")
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
<div class="chart">
<div class="unit gradient" style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 70%, rgba(24,24,136,16) 100%);">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit gradient" style="background: linear-gradient(90deg, rgba(24,24,136,16) 0%, rgba(0,212,255,1) 100%);">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
您可以在父元素上控制渐变,您可以在其中指定所需的背景大小,以便仅覆盖所需的元素:
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
background:
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1))
left /* Start from the left */
/
calc(var(--n,0)* 100%/8) 100% /* we have 8 circles so Nx(width)/8 */
content-box /* Cover only the content, don't account for padding */
no-repeat; /* Don' repeat */
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
<div class="chart" style="--n:2">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:5">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:6">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
如果您有兴趣,可以构建只有背景且没有 html 元素的整个布局:
.chart {
margin: 0 15px 5px;
height:22px;
background:
/* Small dot */
radial-gradient(circle 4px,black 95%,transparent 100%) left center/8px 8px no-repeat,
/* horizontal line */
linear-gradient(grey,grey) center/100% 2px no-repeat,
/* big dots */
radial-gradient(circle 11px at calc(100% - 11px) 50% ,grey 95%,transparent 100%) left/calc(100%/8) 100%,
/* Our Gradient */
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1)) left/calc(var(--n, 0)* 100%/8) 100% no-repeat;
}
<div class="chart" ></div>
<div class="chart" style="--n:2"></div>
<div class="chart" style="--n:5"></div>
<div class="chart" style="--n:8"></div>
如何在考虑项目数量的同时,将渐变 class 添加到此 flex 容器中的多个项目背靠背?目前它只能通过将 class 添加到一组特定的 'unit' 并产生单独的渐变来工作。
我想要一个渐变来覆盖两个或多个项目,同时保持所有项目的弹性和相等。
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
.gradient {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
<div class="chart">
<div class="unit gradient">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit gradient">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
如果这条线上的点数已知并且永远不会改变,您可以自己计算色标并实现它们,以便这条线形成一个完整的渐变。
但是,如果您想将某些内容应用于类似的内容,我的建议是 使用 Javascript。
此函数将为您计算梯度。这很难,但有可能在应用程序中实现它,以便它实际更改 CSS。我已经手动完成了两个单位的计算:
//background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
function gradientProgress(gStart,gEnd,at){
//gStart and gEnd are [r,g,b,a,%]
var prog = (at - gStart[4]) / (gEnd[4] - gStart[4]);
var res = [0,0,0,0,100]
for(var a = 0;a<4;a++){
res[a] = Math.round(gStart[a] + (prog * (gEnd[4] - gStart[4])));
}
return res;
}
console.log("First one: " + "[2, 0, 36, 1, 0], [9, 9, 121, 1, 70], [" + (gradientProgress([9,9,121,1,35],[0,212,255,1,100],50)).toString() + "]")
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
<div class="chart">
<div class="unit gradient" style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 70%, rgba(24,24,136,16) 100%);">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit gradient" style="background: linear-gradient(90deg, rgba(24,24,136,16) 0%, rgba(0,212,255,1) 100%);">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
您可以在父元素上控制渐变,您可以在其中指定所需的背景大小,以便仅覆盖所需的元素:
.chart {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
margin-bottom: 50px;
background:
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1))
left /* Start from the left */
/
calc(var(--n,0)* 100%/8) 100% /* we have 8 circles so Nx(width)/8 */
content-box /* Cover only the content, don't account for padding */
no-repeat; /* Don' repeat */
}
.dot-black {
width: 8px;
height: 8px;
border-radius: 4px;
background: black;
}
.dot-grey {
width: 22px;
height: 22px;
border-radius: 11px;
background: grey;
}
.dot-green {
width: 22px;
height: 22px;
border-radius: 11px;
background: green;
}
.unit {
flex: 1;
display: flex;
align-items: center;
}
.line-black {
height: 2px;
background: black;
}
.line-grey {
height: 2px;
background: grey;
flex-grow: 1;
}
<div class="chart" style="--n:2">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:5">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
<div class="chart" style="--n:6">
<div class="unit">
<div class="dot-black"></div>
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
<div class="unit">
<div class="line-grey"></div>
<div class="dot-grey"></div>
</div>
</div>
如果您有兴趣,可以构建只有背景且没有 html 元素的整个布局:
.chart {
margin: 0 15px 5px;
height:22px;
background:
/* Small dot */
radial-gradient(circle 4px,black 95%,transparent 100%) left center/8px 8px no-repeat,
/* horizontal line */
linear-gradient(grey,grey) center/100% 2px no-repeat,
/* big dots */
radial-gradient(circle 11px at calc(100% - 11px) 50% ,grey 95%,transparent 100%) left/calc(100%/8) 100%,
/* Our Gradient */
linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1)) left/calc(var(--n, 0)* 100%/8) 100% no-repeat;
}
<div class="chart" ></div>
<div class="chart" style="--n:2"></div>
<div class="chart" style="--n:5"></div>
<div class="chart" style="--n:8"></div>