为了账号安全,请及时绑定邮箱和手机立即绑定

css3过渡问题

css3过渡问题

欧罗巴皇 2017-02-20 10:48:55
css3怎么让宽度过渡效果显示从右到左增长还有中间向两边增长
查看完整描述

2 回答

?
放纵不羁的狂野

TA贡献4条经验 获得超0个赞

@keyfram可以实现

查看完整回答
反对 回复 2017-02-20
?
慢l慢

TA贡献22条经验 获得超3个赞

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


查看完整回答
反对 回复 2017-02-20
  • 欧罗巴皇
    欧罗巴皇
    兄弟我问得是宽度的动画啊
  • 慢l慢
    慢l慢
    div{ float: left; width: 10px; background: blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } float不设置或者设置为left从左向右展开,设置为right则从右向左展开,双向不知道,研究研究。
  • 2 回答
  • 0 关注
  • 1800 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信