css3 - 我想要背景长度变化，而文字不移动，要怎么修改呢-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

ringa_lee 2017-04-17 11:11:33

[CSS3讨论组]

729

<!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_lee

全部回复(2)

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

http://jsfiddle.net/hp20z4z6/

赞 +0

添加回复

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

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}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>