css3过渡问题

Question

css3怎么让宽度过渡效果显示从右到左增长还有中间向两边增长

Answer 1

@keyfram可以实现

Answer 2

  background: #0575E6; /* fallback for old browsers */

 background: -webkit-linear-gradient(to left, #0575E6 , #021B79); /* Chrome 10-25, Safari 5.1-6 */ 

background: linear-gradient(to left, #0575E6 , #021B79); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */     

to left：

设置渐变为从右到左。

to right：

设置渐变从左到右。

to top：

设置渐变从下到上。

to bottom：

设置渐变从上到下。

    

从中间向两边用百分比来设置颜色位置：

background: -webkit-linear-gradient(to left,  #0575E6 0% , #021B79 50%, #021B79 51%,#0575E6 100% ); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #0575E6 0% , #021B79 50%, #021B79 51%,#0575E6 100% ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */