search

Home  >  Q&A  >  body text

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>

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

ringa_leeringa_lee2786 days ago516

reply all(2)I'll reply

  • 阿神

    阿神2017-04-17 11:13:33

    http://jsfiddle.net/hp20z4z6/

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 11:13:33

    http://jsfiddle.net/rsbpw6ck/1/

    Changed the main source code of the question and used 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}

    reply
    0
  • Cancelreply