Как Google помещает «âshine» в «блокировку всех результатов foo.com», которые появляются?

Для воспроизведения:

  1. Перейдите в Google и выполните поиск (например, перейдите по ссылке поиск Джеффа Этвуда )
  2. Следуйте первому результату.
  3. Возвратитесь в Chrome.
  4. Обратите внимание, что текст, который появляется, который говорит «Заблокировать все результаты codinghorror.com», имеет эффект «блеска», который возникает, чтобы привлечь к нему внимание.

Это происходит на всех сайтах, с которых я следую ссылке, во время входа в Google с помощью Chrome.

Как это достигается?

Я записал его здесь.

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; ">
18 голосов | спросил Michael Pryor 15 J0000006Europe/Moscow 2011, 00:36:44

4 ответа


20

Я не в крутом списке людей Google, но из вашего скринкаста у меня появилась идея. Вы можете сделать это с помощью умной комбинации -webkit-background-clip: text и некоторых градиентов (при условии, что вы находитесь в браузере webkit). Вот (грязная) демонстрация:

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

ответил Ian Henry 15 J0000006Europe/Moscow 2011, 01:59:20
7

плагин jQuery textgrad может это сделать. Прокрутите вниз до заголовка «textscan». Это уже несколько лет, хотя все еще работает; это просто первый, кто должен помнить. Есть приличный шанс, что существует нечто более недавнее, и это должно по крайней мере дать вам некоторые идеи, как продолжить поиск.

[Редактировать: Майкл добавил фрагмент HTML во время написания] Учитывая, что изображение позиционируется абсолютно, почти очевидно, что они просто используют немного скрипта, чтобы сместить его через связанный с ним (или, возможно, тег span) для ссылки на блок. Который, учитывая, что плагин textgrad кажется немного усложняющим.

ответил Su' 15 J0000006Europe/Moscow 2011, 01:41:17
5

Вот живая демонстрация решения только для 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;
            }
        }
ответил Nick 15 J0000006Europe/Moscow 2011, 14:26:35
2

Вы можете использовать анимацию градиента и 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;
    }
}

Конечно, вы можете сделать то же самое для Firefox с префиксом поставщика Mozilla.

ответил foxy 15 J0000006Europe/Moscow 2011, 14:06:53

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132