本文介绍了填充背景颜色只有其总宽度的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>

EXAMPLE HERE

.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..

EXAMPLE HERE

.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..

EXAMPLE HERE

.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

EXAMPLE HERE

.progress:after {
    /* other styling.. */
    width:0;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.progress:hover:after {
    width:50%;
}

这篇关于填充背景颜色只有其总宽度的50%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 13:21
查看更多