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

Question

Here 如果您将鼠标悬停在页脚中的任何链接（即“书架”链接）上，您会得到一点点向左移动的火花效果。

我尝试过使用 firebug，但不知道它是如何实现的。

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

对于测试场景，我使用了一个父 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 标记的悬停上转换 - 背景位置是赋予它闪烁错觉的属性。

<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- - 它们出现在上面的小提琴中，但为了可读性和简洁我在下面省略了它们）

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

​使用 CSS 进行转换的好处是巨大的 - 就像这样：

• 渐进式增强（sparkle 效果不是页面功能所必需的，因此它纯粹是一种美学功能，不会减慢不识别它的浏览器的速度）

• 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

Answer 2

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

背景动画使用CSS过渡效果