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+ */