Googleは、表示される「foo.comの結果をすべてブロック」リンクに「輝き」をどのように配置しますか？

再現するには：

1. Googleにアクセスして検索を行います（たとえば、このリンクに従ってJeff Atwoodを検索します）
2. 最初の結果に従ってください。
3. Chromeで戻ります。
4. 「すべてのcodinghorror.comの結果をブロックする」と表示されるテキストには、目を引くために発生する「輝かしい」効果があることに注意してください。

これは、Chromeを使用してGoogleにログインしているときにリンクをたどるすべてのサイトで発生します。

これはどのように達成されますか？

ここに記録しました。

関連セクションのHTML：

<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; ">

私はGoogleのクールな人物リストには載っていませんが、スクリーンキャストからアイデアを得ました。これは-webkit-background-clip: text、Webkitブラウザーを使用している場合に、いくつかのグラデーションを巧妙に組み合わせて行うことができます。これは（厄介な）デモです：

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

jQueryのプラグインtextgradこれを行うことができます。「textscan」ヘッダーまでスクロールします。これは数年前ですが、まだ機能しています。最初に気をつけてください。より新しいものが存在する可能性はかなりあります。これにより、少なくともさらに検索を進める方法についてのアイデアが得られるはずです。

[編集：執筆中にマイケルがHTMLスニペットを追加]画像が絶対に配置されていることを考えると、ブロックリンクの関連するa（またはspanタグ）を横切ってスライドするために少しのスクリプトを使用しているだけです。これは、textgradプラグインが少し複雑になっているように見えます。

以下は、CSSのみのソリューションのライブデモです。（WebKitブラウザーのみ。「実行」をクリックしてアニメーションを再生します）。

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;
            }
        }

これにはグラデーションとCSS3アニメーションを使用できます。

 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;
    }
}

もちろん、Mozillaベンダープレフィックスを使用してFirefoxでも同じことができます。