Question

我正在尝试从左到右开始背景色动画

＆＃13;

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;}

＆＃13;

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

＆＃13;

所以当我将鼠标移开时，我想要从左到右开始黄色。作为背景颜色。

JSFiddle

Answer 1

通过对元素应用背景渐变，以及背景宽度为元素大小的两倍，可以将两个不同的颜色渲染为两种不同的颜色。

然后您需要做的就是为background-position属性设置动画，然后您就可以了。

注意：

您删除的标记中的遗失关闭</li>。
记住browser prefixes for 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>

Answer 2

另一种解决方案是使用伪元素，如:after。 Have a look at this JSFiddle。我确实删除了一些不必要的标记。如果这些菜单项是链接，那么您应该使用<a>标记。

＆＃13;

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 {
    position: relative;
    margin:0;
    padding:0;
    border-top:1px solid #4D0000;
    border-bottom:1px solid white;
    z-index: 5;
    padding: 0 0 0 20px;
    color:white;
    background:#600;
    width: 180px;
}

ul.vert-one li span {
    position: relative;
    display:block;
    text-decoration:none;
    z-index: 10;
}

ul.vert-one li:after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    color: #fff;
    height: 100%;
    background: yellow;
    opacity: 0;
}

ul.vert-one li:hover:after {
    width: 100%;
    opacity: 1;
    transition: 500ms;
    -webkit-transition: 500ms;
}

＆＃13;

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

＆＃13;

Answer 3

将其插入

<div class="mybgd" style="background:gray">

将其插入CSS

.mybgd { width: 100%; height:100%; margin-right: 200px; float: left; }

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

3 个答案: