css3 - 我想要背景長度變化，而文字不移動，要怎么修改呢
問題描述
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>JS Bin</title><style type='text/css'>ul{ list-style-type:none; padding:0px; margin:0px; border:1px solid red; width:200px; text-align:center;}li:hover{ color:white; animation:a 1s infinite; -webkit-animation: a 1s infinite;}@keyframes a{ 0% {background:rgba(39, 121, 99, 0.61);width:60%;}25%{background:rgba(49, 151, 99, 0.7);width:70%;}50%{background:rgba(59, 121, 109, 0.61);width:80%;}100%{background:rgba(69, 141, 119, 0.61);width:100%;}} @-webkit-keyframes a{ 0% {background:rgba(39, 121, 99, 0.61);width:60%;}25%{background:rgba(49, 151, 99, 0.7);width:70%;}50%{background:rgba(59, 121, 109, 0.61);width:80%;}100%{background:rgba(69, 141, 119, 0.61);width:100%;}}</style></head><body> <ul> <li>hello</li> <li>world</li> <li>thanks</li> </ul></body></html>
我想要背景長度變化，而文字不移動，要怎么修改呢
問題解答
回答1：http://jsfiddle.net/hp20z4z6/
回答2：http://jsfiddle.net/rsbpw6ck/1/
改了下題主源碼，用了css3的transition
cssul{margin:0;padding:0;width:200px;border:1px solid red;list-style-type:none;text-align:center}li{position:relative;height:20px;line-height:20px}li:before{position:absolute;left:0;z-index:-1;width:60%;height:100%;background:rgba(39,121,99,0.61);content:’’;opacity:0;transition:all .3s}li:hover{color:#fff}li:hover::before{display:block;width:100%;background:rgba(69,141,119,0.61);opacity:1}
網(wǎng)公網(wǎng)安備