幻灯片动画背景颜色从左到右使用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>，我已经删除。
• 记住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

插入这在

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

插入这在你的CSS

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

Answer 3

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

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

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