javascript - 如何使用 css 和 javascript 实现移动的 Spark 效果，如 css-tricks.com 页脚

Question

Here如果您将鼠标悬停在页脚中的任何链接(即“The Bookshelf”链接)上，您会看到向左移动的 Spark 效果。

我试过使用 Firebug ，但无法弄清楚它是如何实现的。

假设我认为始终显示的白色边框 (?) 是单父 div，而闪烁的 div 是其中的单个 div。然后当发生鼠标悬停时，应该使用 jquery 为左顺序的子 div 应用背景颜色或边框。即使那样，这些子 div 的高度也会出现，这与 url 中显示的相反，子 div 的高度大于子 div 的高度。

对于测试场景，我使用了一个父 div (class_1) 和一个子 div (class_2) 而不是很多:HTML:

<div class="class_1">
<div class="class_2"></div><!--end of class_2 -->

</div><!-- end of class class_1 -->

CSS:

.class_1{
height111:1px;

width:150px;
margin:0 auto;

border:2px solid red;


}
.class_2{

width:70px;
margin:0 auto;
border:1px solid green;


}

正确的做法是什么？

Answer 1

演示:http://jsfiddle.net/qYpck/

它仅使用 CSS 实现 - 一个背景渐变，然后在父 a 标签的悬停时转换 - background-position 是赋予它 sparkles< 错觉的属性/em>.

<ul class="link-list">
  <li><a href="#">Link one<span></span></a></li>
  <li><a href="#">Link two<span></span></a></li>
  <li><a href="#">Link three<span></span></a></li>
</ul>

注意链接内部的空 span。

这是神奇的过渡 CSS:(请注意，您需要为 transition 属性使用浏览器前缀，例如 -moz- 和 -o- - 它们出现在上面的 fiddle 中，但为了可读性和简洁性，我在下面省略了它们)

.link-list a:hover>span, .link-list a:focus>span {
    background-position: -100% 0;
    transition: background 0.4s;
}

使用 CSS 进行过渡的好处是巨大的——比如:

• 渐进式增强(闪光 效果不是页面功能所必需的，因此它纯粹是一种美学特征，不会降低不识别它的浏览器的速度)

• CSS 过渡是硬件加速的，通常比 JS 动画更流畅

• 消除 javascript 引擎的压力

阅读更多:Is there any advantage to using CSS animations over jQuery animations? (performance, or otherwise)

要检查哪些浏览器将支持此技术，请检查 caniuse.com

• http://caniuse.com/background-img-opts
• http://caniuse.com/css-transitions