HTML 대상 객체에 CSS3 쉬머 애니메이션을 적용하려면 어떻게해야합니까? 웹 페이지에서

Question

, 키 프레임을 사용하여, BUTTON 대상 객체에 CSS3의 쉬머 애니메이션을 할 수있는 방법은 DIV, A 태그처럼,이, 또는? 저는 현재 브라우저에 관심이 있습니다. IE11이 출시 된 이후의 브라우저는 아닙니다.

쉬머 애니메이션 오브젝트에 걸쳐 비스듬히 빛나는 바를두고 특정 방향으로 이동한다. 그것은 페이지의 어떤 것에주의를 끌기에 유용합니다. 이는 온라인 광고의 방문 페이지를 클릭하여 고객이 클릭하여 구매할 수있게하는 데 적합합니다. 정상적으로 페이지가로드 될 때를 마찬가지로이 경우

는 HTML 대상 개체가 나타납니다. 그러나, 몇 초 후에, 당신이이 효과를 적용 할 요소의 가시 오버 플로우 경계 외부의 숨겨진 공간의 왼쪽에서 이동하고는 HTML의 대상 객체 경계와 경계 떨어져 넘치는 될 때까지 오른쪽으로 간다 오직 지연되어 다시 나타난다. 찾고있는 애니메이션의 종류가 대상 객체의 배경에 있고 밝은 흰색을 비추고 있지만 대상 객체의 맨 위에있을 수도 있습니다. 대상물의 배경을 여행하는 동안, 1 초 또는 1.5 초 정도 지속되는 것이 좋습니다.

Answer 1

당신은 대각선 그라데이션 배경을 만들고 멀리 오른쪽 키 프레임 타이머 극단적 인에서 멀리 극단적 인 왼쪽으로 밀어 수 있습니다. CSS 파일에 다음을 추가하고 "shimmer"클래스를 HTML 요소에 추가하십시오. 나는 키 프레임의 background-position-x 재산에 더 큰 숫자의 조합을 사용하여 애니메이션 속도뿐만 아니라 CSS 클래스의 animation 속성에 애니메이션 속도 (현재 8S)와 함께 연주.

@keyframes shimmerBackground { 
    0% {background-position:-5000px 0} 
    100% {background-position:5000px 0} 
} 

.shimmer 
{ 
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); 
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-repeat: repeat-y; 
background-position:-5000px 0; 
animation: shimmerBackground 8s linear infinite; 
}