如何解决根据宽度百分比裁剪CSS线性渐变
我在进度条上应用了的线性渐变。问题在于,即使百分比较低或较高,渐变也是相同的。
我想要实现的是,百分比越多,它应该变得更正确。 因此,换句话说,完整渐变应为100%,而对于50%,仅应显示渐变的50%。我不想创建多个渐变来解决此问题,而是尝试使用剪切路径解决此问题,但没有成功。任何帮助将不胜感激。
这是我当前的代码 https://codepen.io/taimursaeed/pen/gOrLNyv
body {
font-size: 30px;
}
.progress-custom {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.progress {
display: flex;
height: 1rem;
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
height: 3em;
font-size: 0.6em;
flex: 1;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #007bff;
transition: width 0.6s ease;
background: linear-gradient(90deg,#ff9800 0%,#ff5722 100%);
}
.progress-custom .progress-value {
font-size: 0.8em;
padding: 0 0.5em;
}
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="width: 70%;">
My Progress
</div>
</div>
<span class="progress-value"> 70%</span>
</div>
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="width: 50%;">
My Progress
</div>
</div>
<span class="progress-value"> 50%</span>
</div>
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="width: 20%;">
My Progress
</div>
</div>
<span class="progress-value"> 20%</span>
</div>
解决方法
在.progress-bar上添加一行
.progress-bar{ background-attachment: fixed}
我相信,为获得引人注目的效果,颜色应更加多样化-取决于闪电,相似的颜色可能看起来相同。
在代码段中,我更改了它们-根据您自己的喜好使用颜色,而不是我的:)
div{
box-sizing: border-box;
margin: 20px auto 20px 0;
padding: 20px;
color: #fff;
text-align: center;
background: linear-gradient(to right,gold,red);
background-attachment: fixed}
<div style="width: 20%;">20%</div>
<div style="width: 50%;">50%</div>
<div style="width: 70%;">70%</div>
<div style="width: 99%;">99%</div>
看看我的片段。您的渐变具有两种几乎相同的颜色,并且差别不大,因为颜色太相似了。
想到了另一个选择-具有透明度的渐变:
background: linear-gradient(to right,rgba(200,200,0.2),rgba(255,1.0));
,
我使用了clip-path
和padding-right
。我没有使用伪元素或多余元素。
body {
font-size: 30px;
width: 350px;
margin: 50px auto;
}
.progress-custom {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.progress {
display: flex;
height: 1rem;
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
height: 3em;
font-size: 0.6em;
flex: 1;
position: relative;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
transition: width 0.6s ease;
overflow: hidden;
background: linear-gradient(to right,red);
padding-right:calc(100% - var(--width));
width: 100%;
height: 100%;
-webkit-clip-path: inset(0 calc(100% - var(--width)) 0 0);
clip-path: inset(0 calc(100% - var(--width)) 0 0);
}
.progress-custom .progress-value {
font-size: 0.8em;
padding: 0 0.5em;
}
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--width: 70%;">
My Progress
</div>
</div>
<span class="progress-value"> 70%</span>
</div>
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--width: 50%;">
My Progress
</div>
</div>
<span class="progress-value"> 50%</span>
</div>
<div class="progress-custom">
<div class="progress">
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--width: 20%;">
My Progress
</div>
</div>
<span class="progress-value"> 20%</span>
</div>
,
您可以使用background-clip和padding来解决此问题,如下所示:
body {
font-size: 30px;
}
.progress-custom {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.progress-custom > div:first-child {
flex:1;
}
.progress-bar {
display: flex;
justify-content: center;
align-items:center;
border-radius: 0.25rem;
height: 3em;
font-size: 0.6em;
color: #fff;
transition: padding 0.6s ease;
padding-right:calc(100% - var(--p));
background:
/* show the gradient on the content only but use the padding area for the calculation */
linear-gradient(90deg,#ff9800 0%,#ff5722 100%) padding-box content-box,#e9ecef;
}
.progress-custom .progress-value {
font-size: 0.8em;
padding: 0 0.5em;
}
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:70%;">
My Progress
</div>
</div>
<span class="progress-value"> 70%</span>
</div>
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:50%">
My Progress
</div>
</div>
<span class="progress-value"> 50%</span>
</div>
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:20%">
My Progress
</div>
</div>
<span class="progress-value"> 20%</span>
</div>
使用剪切路径和伪元素的另一个想法:
body {
font-size: 30px;
}
.progress-custom {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.progress-custom > div:first-child {
flex:1;
position:relative; /* the pseudo element will be relative to this div */
background:#e9ecef;
z-index:0;
}
.progress-bar {
display: flex;
justify-content: center;
align-items:center;
border-radius: 0.25rem;
height: 3em;
font-size: 0.6em;
color: #fff;
transition: width 0.6s ease;
width:var(--p);
clip-path:inset(0); /* hide the non needed part*/
}
.progress-bar::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(90deg,#ff5722 100%);
}
.progress-custom .progress-value {
font-size: 0.8em;
padding: 0 0.5em;
}
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:70%;">
My Progress
</div>
</div>
<span class="progress-value"> 70%</span>
</div>
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:50%">
My Progress
</div>
</div>
<span class="progress-value"> 50%</span>
</div>
<div class="progress-custom">
<div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar" style="--p:20%">
My Progress
</div>
</div>
<span class="progress-value"> 20%</span>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。