Wie setzt Google den "Glanz" auf den angezeigten Link "Alle foo.com-Ergebnisse blockieren"?

Um zu rügen:

1. Gehen Sie zu Google und führen Sie eine Suche durch (folgen Sie beispielsweise diesem Link, um nach Jeff Atwood zu suchen ).
2. Folgen Sie dem ersten Ergebnis.
3. In Chrome zurückschlagen.
4. Beachten Sie, dass der angezeigte Text "Block all codinghorror.com results" einen "Shine" -Effekt hat, der auftritt, um Ihr Auge darauf zu lenken.

Dies geschieht auf allen Websites, von denen aus ich einem Link folge, während ich mit Chrome bei Google angemeldet bin.

Wie wird das erreicht?

Ich habe es hier aufgenommen.

Der HTML-Code aus dem entsprechenden Abschnitt:

<img src="/images/experiments/shimmer_mask.png" style="position: absolute; 
 top: 64px; z-index: 500; border-top-width: 0px; border-right-width: 0px; 
 border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; 
 border-right-style: none; border-bottom-style: none; 
 border-left-style: none; border-color: initial; left: 228px; ">

Ich stehe nicht auf Googles cooler Personenliste, aber aus Ihrem Screencast habe ich die Idee. Sie können dies mit einer cleveren Kombination aus -webkit-background-clip: textund einigen Farbverläufen tun (vorausgesetzt, Sie verwenden einen Webkit-Browser). Hier ist eine (chaotische) Demo:

http://jsfiddle.net/N8UjY/3/

Das jQuery-Textgrad-Plugin kann dies tun. Scrolle runter zum "textscan" Header. Dies ist einige Jahre alt, funktioniert aber immer noch; Es ist nur der erste, der etwas dagegen hat. Es gibt eine gute Chance, dass etwas Neueres existiert, und dies sollte Ihnen zumindest einige Ideen geben, wie Sie weiter suchen können.

[Bearbeiten: Michael hat das HTML-Snippet hinzugefügt, während ich schrieb] Da das Bild absolut positioniert ist, ist es fast sicher, dass sie nur ein bisschen Skript verwenden, um es über das zugehörige a (oder vielleicht das span-Tag) für den Blocklink zu schieben . Was angesichts des Textgrad-Plugins etwas komplizierter erscheinen mag.

Hier ist eine Live-Demo einer Nur-CSS-Lösung. (Nur WebKit-Browser, klicken Sie auf "Ausführen", um die Animation abzuspielen.)

HTML:

<a href="#" class="kob">Block all results from site.com</a>

CSS:

a.kob{
    color:#36C;
    text-decoration:none;
    font-family:arial, sans-serif;
    font-size:13px;    
    -webkit-animation: wipe 3.0s;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position: -40px 0;
    -webkit-mask-size: 40px 50px;
    -webkit-mask-image:  -webkit-gradient(linear, left top, right top,
                        color-stop(0.00,  rgba(0,0,0,1.0)),
                        color-stop(0.45,  rgba(0,0,0,0.6)),
                        color-stop(0.50,  rgba(0,0,0,0.0)),
                        color-stop(0.55,  rgba(0,0,0,0.6)),
                        color-stop(1.00,  rgba(0,0,0,1.0))); 
}

@-webkit-keyframes wipe {
            0% {
                -webkit-mask-position: -40px 0; 
            }
            100% {
                -webkit-mask-position: 330px 0;
            }
        }

Sie können hierfür einen Farbverlauf und CSS3-Animationen verwenden:

 background:-webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat;

@-webkit-keyframes GoogleLikeShine
{
    0%
    {
        background-position:top left;
    }
    100%
    {
        background-position:top right;
    }
}

Dasselbe können Sie natürlich auch für Firefox mit dem Mozilla-Herstellerpräfix tun.