幻燈片動畫背景顏色從左到右使用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>