使用CSS从左到右滑动背景颜色

Question

我试图让背景色动画从左到右开始

ul.vert-one{
    margin:0;padding:0;
    list-style-type:none;
    display:block;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;
width:200px;
}

ul.vert-one li{
    margin:0;padding:0;border-top:1px solid #4D0000;
border-bottom:1px solid white;
}

ul.vert-one li span{display:block;text-decoration:none;color:white;
background:#600;padding:0 0 0 20px;width:180px;}

ul.vert-one li span:hover{
background:yellow url("images/vert-one_arrow.gif") no-repeat 0 9px;}

<div style="background:gray">
    <ul class="vert-one" >
  <li>
      <div>
     <span>home</span>
      </div>
     </li>
         <li>
      <div>
      <span>blog</span>
      </div>
     </li>
         </li>
         <li>
      <div>
      <span>About Us</span>
      </div>
     </li>
  
</ul>
</div>
    

所以当我鼠标悬停时,我想从左到右开始黄色.作为背景颜色.

的jsfiddle

Answer 1

通过对元素应用背景渐变以及背景宽度为元素大小的两倍,可以将两个塞子放置在50%处,从而呈现两种不同的颜色.

然后,您需要做的就是为该background-position属性设置动画,然后您就可以获得效果.

注意:

• 你</li>删除的标记丢失了.
• 记住浏览器前缀linear-gradient

ul.vert-one li span {
    display:block;
    text-decoration:none;
    color:white;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #600 50%, yellow 50%);
    transition: background-position 1s;
    padding:0 0 0 20px;
    width:180px;
}
ul.vert-one li span:hover {
    background-position: -100% 0;
}
ul.vert-one { margin:0; padding:0; list-style-type:none; display:block; font:bold 16px Helvetica, Verdana, Arial, sans-serif;   }
ul.vert-one li { margin:0; padding:0; border-top:1px solid #4D0000; border-bottom:1px solid white;}

<div style="background:gray">
    <ul class="vert-one">
        <li><div><span>home</span></div></li>
        <li><div><span>blog</span></div></li>
        <li><div><span>About Us</span></div></li>
    </ul>
</div>