Question

我正在制作一个聪明的动画，让三个成功的直角引号如 » » »从左到右连续发光，然后再回到最左边的一个。我想知道这对其他开发者来说是否可能是一个聪明的效果，并且可能是一个很好的谷歌饲料。

这一点的灵感显然是iPhone上的滑动解锁屏幕，文字以渐进的方式发光。

我确实知道有关键帧的CSS3动画，并且之前已经成功实现了这些动画，但我不确定如何在循环中对代码进行编码。我猜Javascript就是这里的答案，带有某种循环。我已经在我正在使用的页面上有jQuery，所以使用jQuery功能不会有任何额外的东西。

我的HTML结构将是这样的：

» » »

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

编辑1：在每个»周围添加了span标记，以允许为JavaScript中的每个直角引号单独更改CSS属性，正如大多数人所做的那样。对于那些使用CSS3方法的人来说，没必要！

编辑2：为了绝对清楚目标是什么，最左边的一个会首先发出某种颜色，使用CSS color:green等变化和{{1等等，然后下一个会在短暂的延迟之后做同样的事情。

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

使用解决方案进行最终编辑摘要：我决定使用纯CSS3选项，但此处提供的许多有效选项都值得您花时间。我希望StackOverflow允许多个正确的答案。对于从Google或其他地方提出此问题的任何人，请务必浏览整个问题，以选择最适合您的问题！我认为，因为这主要是为了好玩，我觉得可以离开Firefox＆amp; IE伙计们在黑暗中出局。您可以在此处查看我的最终实施内容：http://ezrahub.com/board/位于页面顶部，用于展开发布表单。一个怪癖是，如果您更改文本大小，则还必须更改CSS样式表中的属性transition:color linear 0.4s。我使用background-size作为我的，如果你玩它，你可以看到效果如何变化。

希望每个人都玩得开心，并享受在您的作品中使用它！向@JaredFarrish等自闭症主持人大声疾呼。（为什么这么生气？）

Answer 1

为了它的乐趣，这是一个使用纯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 doesn't exist）。这可以通过在背景顶部使用图像蒙版来解决。

Answer 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/）

Answer 3

试试这个：

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/

用CSS3和/或Javascript发光直角报价动画

3 个答案: