如何使用CSS实现淡入和其他效果

Question

以这个code为例。

所以，我想使用一个空的div而不是<a>标签，因为使用text-indent:-9999px对搜索引擎优化不好。

更清楚地说，我想用这个effect实现一些类似的东西，但只用css。再看一遍我的代码，看看我实现这个效果的方法。

另外，是否有可能添加一个平滑淡出效果，在悬停时只使用CSS？

Answer 1

我不认为使用文本缩进对SEO有负面影响，除非你戴着一顶黑色的帽子。http://www.google.com/support/webmasters/bin/answer.py?answer=66353

Answer 2

为了回答你的第二个问题(不理解第一个)，我认为为了浏览器的兼容性，最好使用js (可能是flash)来实现淡入淡出效果。我个人使用jQuery，它让我的生活变得非常简单。

除此之外，还有一个可以使用http://www.w3.org/TR/css3-transitions/的CSS3属性transition-property。

编辑

如果我对第一个问题的理解是正确的，那么要达到你给出的纯CSS示例的效果是很困难的，至少现在是这样。最好使用像jQuery这样的js库来实现反弹和淡入等效果。

Answer 3

您也可以使用padding来代替text-indent。

基本上，设置高度或宽度(但只能设置一个！)元素的值设置为零，并使用padding-top或padding-left来达到所需的尺寸。请注意，需要使用overflow: hidden将所有内容从视图中推送出来，并创建“不可见”的效果。

示例：http://jsfiddle.net/N8qah/16/

带有转换的更有趣的例子：http://jsfiddle.net/N8qah/18/

另一种替代方法是在隐藏文本上设置至少是元素高度的两倍的line-height。但是，如果像这里一样有一个包含文本的嵌套元素，则需要重置该嵌套元素中的line-height。这方面的例子：http://jsfiddle.net/N8qah/19/