Google은 표시되는 '모든 foo.com 결과 차단'링크에 '빛나기'를 어떻게 적용합니까?

18

재현하려면 :

Google로 이동하여 검색합니다 (예 :이 링크를 클릭하여 Jeff Atwood 검색 ).
첫 번째 결과를 따르십시오.
Chrome에서 답장하세요.
"모든 codinghorror.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; ">

google

— 마이클 프라이어
소스

1

어떤 버전의 크롬을 사용하고 있습니까? v12.0.742.91을 사용하고 있는데 광택이 보이지 않습니다.

— John Conde

@ john 다른 사람들이 나에게 똑같이 말합니다. 11.0.696.77. 방금 기록하려고했는데 기록되지 않습니다! 하얀 빛처럼 왼쪽에서 오른쪽으로 연결되는 애니메이션 효과와 같습니다.

— Michael Pryor 2016 년

7

@Michael-아마도 구글이 이것에 대해 낮은 비율의 A / B 테스트를 실행하고 있으며 운이 좋은 사람 중 하나입니다!?

— Tall Jeff

1

마스크가라는 폴더에있는 이유를 설명합니다 experiments. : P

— esqew 2018 년

2

잠깐만-사람들을 제프를 막으려 고 파괴하려고합니까?

— Marc Gravell

20

저는 Google의 멋진 인물 목록에 없지만 스크린 캐스트에서 아이디어를 얻었습니다. -webkit-background-clip: text웹킷 브라우저를 사용하는 경우 영리한 조합 과 일부 그라디언트 로이 작업을 수행 할 수 있습니다 . 다음은 (지저분한) 데모입니다.

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

— 이안 헨리
소스

7

jQuery를이 textgrad 플러그인 이 작업을 수행 할 수 있습니다. "textscan"헤더로 스크롤하십시오. 여전히 작동하지만 몇 살입니다. 처음으로 생각해야합니다. 더 최근에 존재하는 적절한 기회가 있으며, 적어도 추가 검색 방법에 대한 아이디어를 제공해야합니다.

[편집 : Michael은 내가 쓰는 동안 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에서도 동일한 작업을 수행 할 수 있습니다.

— 여우 같은
소스