2

我正在寻找一个聪明的动画，使三个连续的直角引用，如 » » »从左到右连续发光，然后再回到最左边的一个。我想知道这是否可能是其他开发人员也可以使用的巧妙效果，并且可能是很好的 Google 素材。

其灵感显然是 iPhone 上的滑动解锁屏幕，其中文本以渐进方式发光。

我确实知道带有关键帧的 CSS3 动画，并且之前已经成功实现过这些动画，但我不确定如何在循环部分中编写代码。我猜 Javascript 是这里的答案，带有某种循环。我正在使用的页面上已经有 jQuery，因此使用 jQuery 功能不会有任何额外的功能。

我的 HTML 结构将是这样的：

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

关于实现这一点的最佳/最聪明方法的任何想法？我意识到并非所有浏览器都支持 CSS3 动画，如果要使用它们并且蜜獾不在乎，我只需要支持现代 webkit 和 gecko 实现。

编辑 1：在每个标签周围添加 span 标签，&raquo;以允许为 JavaScript 中的每个直角引号单独更改 CSS 属性，就像大多数人所做的那样。对于做CSS3方法的人来说，没必要！

编辑2：为了绝对清楚目标是什么，最左边的一个会首先发出某种颜色，使用CSScolor:green等更改transition:color linear 0.4s等等，然后下一个将在可能短暂的延迟之后立即执行相同的操作。

编辑 3：为了进一步澄清，我正在寻找的确切动画看起来像这样，尽管在示例中他们使用了一种非常hack-ish 的方法，我认为这对很多人都不起作用。我想知道我们是否只是遇到了 javascript/css3 的限制，或者是否有更多的改进可能。链接：http ://css-tricks.com/examples/SlideToUnlock/

带有解决方案摘要的最终编辑：我决定使用纯 CSS3 选项，但这里提供的许多有效选项都值得您花时间。我希望 StackOverflow 允许多个正确答案。对于从 Google 或其他地方提出此问题的任何人，请务必浏览整个问题以选择最适合您的问题！我想，既然这主要是为了好玩，我会觉得把 Firefox 和 IE 的人留在黑暗中是可以的。您可以在这里看到我的最终实现：http: //ezrahub.com/board/在页面顶部，它用于扩展发布表单。一个怪癖是，如果您更改文本大小，您还必须更改background-sizeCSS 样式表中的属性。我用了background-size: 120px 50%;对我来说，如果你玩它，你可以看到效果是如何变化的。

希望每个人都能从中获得乐趣，并享受在您的创作中使用它！向 @JaredFarrish 等自闭症主持人大喊。（为什么这么生气？）

4

3 回答 3

4

为了好玩，这里有一个使用纯 css 的方法。它对浏览器的支持非常有限。

.glowquote {
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: auto 50%;

    padding: 0 100px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: gradient-animation infinite 1s linear;
}

http://jsfiddle.net/grc4/uF8H2/3/

编辑： jsfiddle 现在部分在 Firefox 中工作。渐变动画正常工作，唯一不工作的是文本剪辑（-moz-background-clip:text不存在）。这可以通过在背景顶部使用图像蒙版来解决。

于 2012-07-02T04:22:31.783 回答
2

首先，我会在各个箭头周围放置跨度，以便您可以单独更改它们的 CSS 设置：

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

然后，假设您使用的是jQuery UI（因为据我所知核心 jQuery 不会为颜色设置动画），您可以执行以下操作：

function doGlow(numTimes) {

    var $arrows = $("span.glowquote span");

    function nextGlow(i) {
        $arrows.eq(i).animate({
            color: "green"
        }, 400).animate({
            color: "black"
        }, 400, function() {
            i = (i + 1) % $arrows.length;
            if (i === 0) numTimes--;
            if (numTimes > 0) nextGlow(i);
        });
    }
    nextGlow(0);
}

演示：http: //jsfiddle.net/KrL44/1

（或者这里是我的演示的原始版本，无限循环：http: //jsfiddle.net/KrL44/）

于 2012-07-02T03:48:39.497 回答
1

试试这个：

html:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span> </span>

js：

$(document).ready(function(){
    var i = 0;
    function run() {
        $('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
         $(this).animate({color: 'black'}, 500);
           i++;
           if (i > 2) { i = 0 } 
           run() 
        })
   }
 run()            
})

http://jsfiddle.net/wQ9AT/

于 2012-07-02T03:56:56.727 回答