转到Google进行搜索(例如,通过此链接搜索Jeff Atwood)。
跟随第一个结果。
返回在Chrome中。
观察到的显示为“阻止所有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 楼
我不在Google的好人名单上,但是从您的截屏视频中我知道了。您可以结合使用-webkit-background-clip: text
和一些渐变(如果您使用的是Webkit浏览器)的巧妙组合。这是一个(混乱的)演示:http://jsfiddle.net/N8UjY/3/
#2 楼
jQuery textgrad插件可以做到这一点。向下滚动到“ textscan”标题。已经有好几年了,尽管仍然可以使用;这只是第一个想到的。相当新的机会存在,这至少应该为您提供一些进一步搜索的思路。
[编辑:Michael在我写作时添加了HTML代码段]
鉴于图像是绝对放置的,几乎可以肯定的是,他们只是使用一些脚本在块链接的相关a(或span标签)上滑动图像。给定textgrad插件,这似乎使事情变得有些复杂。
#3 楼
这是纯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;
}
}
#4 楼
您可以为此使用渐变和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执行相同的操作。
评论
您使用的是什么版本的chrome?我正在使用v12.0.742.91,但看不到任何光泽。@john其他人也告诉我相同。 11.0.696.77。我只是尝试录制它而不会录制!就像动画效果一样,从左到右遍历链接,就像白光一样。
@Michael-也许Google正在对此进行某种低百分比的A / B测试,而您是其中的幸运者之一!?
这可以解释为什么蒙版位于名为“实验”的文件夹中。 :P
等待-您是否试图颠覆人们来阻止Jeff?