Google如何在显示的“阻止所有foo.com结果”链接上放置“光泽”?


18

要再现:

  1. 转到Google并进行搜索(例如,点击此链接搜索Jeff Atwood
  2. 遵循第一个结果。
  3. 在Chrome浏览器中回击。
  4. 请注意,出现的文字“阻止所有encodinghorror.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; ">

1
您使用的是什么版本的chrome?我正在使用v12.0.742.91,但看不到任何光泽。
约翰·孔德

@john其他人也这样告诉我。11.0.696.77。我只是尝试录制它而不会录制!就像动画效果一样,从左到右遍历链接,就像白光一样。
Michael Pryor

7
@Michael-也许Google正在对此进行某种低百分比的A / B测试,而您是其中的幸运者之一!
高大的杰夫,

1
这可以解释为什么掩码位于名为的文件夹中experiments。:P
esqew 2011年

2
等待-您是否试图颠覆人们来阻止Jeff?
Marc Gravell

Answers:


20

我不在Google的好人名单上,但是从您的截屏视频中我知道了。您可以通过-webkit-background-clip: text和某些梯度的巧妙组合来做到这一点(前提是您使用的是Webkit浏览器)。这是一个(混乱的)演示:

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


7

jQuery的textgrad插件可以做到这一点。向下滚动到“ textscan”标题。这已经有好几年了,尽管仍然有效。这只是第一个想到的。现在有相当多的机会存在,这至少应该给您一些想法,以便进一步进行搜索。

[编辑:迈克尔在我写作时添加了HTML代码段]鉴于图片的位置是绝对的,几乎可以肯定的是,他们只是使用一些脚本在关联的块链接(或跨度标签)上滑动了图片。给定textgrad插件,这似乎使事情变得有些复杂。


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

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

当然,您可以使用Mozilla供应商前缀对Firefox执行相同的操作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.