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

18

Untuk menegur:

Buka google dan lakukan pencarian (misalnya, ikuti tautan ini untuk mencari Jeff Atwood )
Ikuti hasil pertama.
Tekan kembali di Chrome.
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?

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

google

— Michael Pryor
sumber

1

Versi chrome apa yang Anda gunakan? Saya menggunakan v12.0.742.91 dan saya tidak melihat kilau.

— John Conde

@ John, orang lain mengatakan hal yang sama kepada saya. 11.0.696.77. Saya hanya mencoba merekamnya dan tidak mau merekam! Ini seperti efek animasi yang melewati tautan dari kiri ke kanan, seperti cahaya putih.

— Michael Pryor

7

@Michael - Mungkin Google menjalankan semacam tes persentase rendah A / B untuk ini dan Anda salah satu yang beruntung !?

— Tinggi Jeff

1

Itu akan menjelaskan mengapa topeng itu ada di folder bernama experiments. : P

— esqew

2

tunggu - apakah Anda mencoba untuk menumbangkan orang agar memblokir Jeff?

— Marc Gravell

20

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/

— Ian Henry
sumber

7

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.

— Su '
sumber

5

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

— Nick
sumber

2

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.

— licik
sumber