动画背景颜色的一个项目（显示块）

我试图达到像那个网站上的效果www.momkai.com 当我将一个项目（一个li设置为显示为块）悬停时，我想要背景颜色从左至右进行动画制作。任何想法如何实现它？理想情况下没有图像。动画背景颜色的一个项目（显示块）

2011-03-30 Francis Thibault

Momkai使用JavaScript（MooTools的）做动画，你可以使用jQuery做类似的事情。 – 2011-03-30 12:25:32

他们这样做的方式是通过显示第一个图像（白色 - 黑色文本），然后在鼠标悬停动画制作第二个图像的剪辑（http://www.w3schools.com/css/pr_pos_clip.asp）样式（黑白文本），它位于第一个文件的顶部。

2011-03-30 12:25:53 Andy

最简单的办法是使用一个背景图像和类似jQuery的动画背景的位置，但对于一个没有图像选项一起使用是这样的：

<div> 
    <span>link text</span> 
    <div class="bgcolor"></div> 
</div> 

div { 
    position: relative; 
    background: #F00; 
    width: 200px; 
} 

div div.bgcolor { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 100%; 
    width: 0px; 
    background: #FF0; 
}

，并在文档加载

li.hover(function() { 
    $(this).children(".bgcolor").animate({width:"200px"}); 
}, function() { 
    $(this).children(".bgcolor").animate({width:"0px"}); 
});

来源

2011-03-30 12:26:46

你可以尝试使用CSS3转换。他们是很好的支持：http://caniuse.com/#search=transition

一个例子： http://jsfiddle.net/VirusZ/6VnTm/

来源

2011-03-30 12:36:38

“符合标准的模式（严格！DOCTYPE）的Windows Internet Explorer 7及更高版本可以将：hover伪类应用于任何元素，而不仅仅是链接。” [http://msdn.microsoft.com/en-us/library/ms530766.aspx](http://msdn.microsoft.com/en-us/library/ms530766.aspx）虽然IE没有任何css3转换，效果会在那里，没有动画。 – 2011-03-30 12:58:51

因为我的网站是HTML5 - CSS3，所以使用了你的技术。创造奇迹，谢谢！ – 2011-03-30 19:27:55

动画背景颜色的一个项目（显示块）

回答

相关问题