首页 > 开发 > CSS > 正文

我想要背景长度变化,而文字不移动,要怎么修改呢

2017-09-12 09:39:17  来源: 网友分享
<!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>

我想要背景长度变化,而文字不移动,要怎么修改呢

解决方案