本文介绍了填充背景颜色只有其总宽度的50%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
这些方法都可以使用纯CSS进行动画处理。
.progress:after {
/ *其他样式.. * /
width:50%; / * end width .. * /
-webkit-animation:filler 2s ease-in-out;
-moz-animation:filler 2s ease-in-out;
动画:filler 2s ease-in-out;
}
@ -webkit-keyframes filler {
0%{
width:0;
}
}
转换方法
.progress:after {
/ * other styling .. * /
width:0;
transition:all 2s;
-webkit-transition:all 2s;
}
.progress:hover:after {
width:50%;
}
Is it possible in CSS to fill background color only 50% of its total width?
I am trying make a progress bar where I need to fill background color based on the "%" of progress.
Please provide pointers.
解决方案
There are multiple different ways to achieve this.
Pseudo element approach:<div class="progress"></div>
.progress { width:200px; height:50px; border:1px solid black; position:relative; } .progress:after { content:'\A'; position:absolute; background:black; top:0; bottom:0; left:0; width:50%; /* Specify the width.. */ }
Linear-gradients approach:
The advantage to this approach is that you can specify multiple different colors..
.progress { width:200px; height:50px; border:1px solid black; background: -webkit-linear-gradient(left, black 50%, white 50%); background: -moz-linear-gradient(left, black 50%, white 50%); background: -ms-linear-gradient(left, black 50%, white 50%); background: linear-gradient(left, black 50%, white 50%); }
Animation without JS/JQUERY
Either of these approaches can be animated with pure CSS..
.progress:after { /* other styling .. */ width:50%; /* End width.. */ -webkit-animation: filler 2s ease-in-out; -moz-animation: filler 2s ease-in-out; animation: filler 2s ease-in-out; } @-webkit-keyframes filler { 0% { width:0; } }
Transition approach
.progress:after { /* other styling.. */ width:0; transition:all 2s; -webkit-transition:all 2s; } .progress:hover:after { width:50%; }
这篇关于填充背景颜色只有其总宽度的50%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!