Bagaimana cara Google menempatkan "bersinar" di tautan "blok semua hasil foo.com" yang muncul?

Untuk menegur:

1. Buka google dan lakukan pencarian (misalnya, ikuti tautan ini untuk mencari Jeff Atwood )
2. Ikuti hasil pertama.
3. Tekan kembali di Chrome.
4. Perhatikan bahwa teks yang muncul mengatakan "Blokir semua hasil codinghorror.com" memiliki pengaruh "bersinar" yang muncul untuk menarik perhatian Anda.

Ini terjadi di semua situs tempat saya mengikuti tautan saat masuk ke Google menggunakan Chrome.

Bagaimana ini dicapai?

Saya sudah merekamnya di sini.

HTML dari bagian yang relevan:

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

Saya tidak ada di daftar orang keren Google, tetapi dari screencast Anda, saya mendapat ide. Anda dapat melakukan ini dengan kombinasi pintar -webkit-background-clip: textdan beberapa gradien (asalkan Anda menggunakan browser webkit). Ini demo (berantakan):

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

The jQuery textgrad Plugin bisa melakukan ini. Gulir ke bawah ke header "textcan". Ini berumur beberapa tahun, meskipun masih berfungsi; itu hanya yang pertama di pikiran. Ada peluang bagus untuk sesuatu yang lebih baru, dan ini setidaknya harus memberi Anda beberapa ide bagaimana mencari lebih lanjut.

[Sunting: Michael menambahkan cuplikan HTML ketika saya sedang menulis] Mengingat bahwa gambar diposisikan secara mutlak, hampir pasti bahwa mereka hanya menggunakan sedikit skrip untuk menggesernya melintasi tautan (atau mungkin rentang tag) yang terkait untuk tautan blokir . Yang mana, mengingat plugin textgrad sepertinya sedikit menyulitkan.

Berikut ini demo langsung dari solusi khusus CSS. (Hanya browser WebKit, klik "Jalankan" untuk memutar ulang animasi).

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

Anda dapat menggunakan animasi gradien, dan CSS3 untuk ini:

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

Tentu saja, Anda dapat melakukan hal yang sama untuk Firefox dengan awalan vendor Mozilla.