Css3 转换理解

Question

我想在我的导航栏链接上创建一个悬停，就像这个例子中的那些 http://livedemo00.template-help.com/wt_39513/index.html

我不一定想要答案，但更多的是我需要注意哪些资源或指南来了解正在发生的事情。从我目前阅读的内容来看，CSS3 有可以控制此功能的过渡？

我想了解它是如何工作的，尤其是我想要实现的示例。

任何帮助表示赞赏

Answer 1

非常有趣的例子，Richlewis。在您向我们展示的页面上，过渡用于菜单中的每个li元素。在他们的样式表中，您可以找到以下行：

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

这基本上意味着"在这个 li 元素的所有属性上使用过渡"。但是，在此示例中，最重要的是 background-position 属性。当您将鼠标悬停在此元素上时，它用于滚动背景。

背景图案（可以在这里找到：http://livedemo00.template-help.com/wt_39513/images/nav_li.png）只是一个1px宽的绿色图像，有两个透明的间隙。

如果你想阅读更多关于 CSS3 中的转换，我在这里找到了一篇很棒的文章：http://www.alistapart.com/articles/understanding-css3-transitions/。

希望这有帮助。 :)