CSS를 사용하여 반짝이는 효과 얻기

Glimmer 효과는 많은 웹사이트에서 로딩 표시기에 추가하는 애니메이션 효과입니다. 이는 웹 페이지나 HTML 요소 내에서 움직이는 듯한 착각입니다.

선형 그래디언트, 키프레임, 애니메이션, 배경 위치, 변형 등과 같은 다양한 CSS 속성을 사용하여 깜박임 효과를 만들 수 있습니다. 기본적으로 쉬머 효과는 빛과 어둠의 움직이는 선을 번갈아 추가합니다.

여기에서는 CSS를 사용하여 반짝이는 효과를 만드는 방법을 배웁니다.

문법

사용자는 다음 구문에 따라 CSS를 사용하여 반짝이는 효과를 만들 수 있습니다.

으아악

위 구문에서는 div 요소의 배경으로 선형 그래디언트를 추가하고 쉬머 키프레임을 사용하여 애니메이션을 추가했습니다.

쉬머 키프레임에서 div를 왼쪽에서 오른쪽으로 이동하여 쉬머 효과를 만듭니다.

예

아래 예에는 상위 div로 컨테이너 div가 있습니다. 상위 div 요소 내에 "shimmer" 클래스 이름을 가진 여러 상자 요소와 div를 추가했습니다. 또한 div 요소에 일부 CSS를 적용했습니다.

CSS에서는 배경, 너비 및 반짝이는 키프레임의 선형 그래디언트에 애니메이션을 적용하여 반짝이는 div 요소에 애니메이션을 적용합니다. shimmer 키프레임의 CSS 변환 속성을 사용하여 shimmer div 요소를 -230%에서 230%로 이동합니다.

출력에서 사용자는 깜박임 효과라고 하는 상위 div 요소의 움직이는 선을 관찰할 수 있습니다.

으아악

예

아래 예에서는 이미지 div 요소에 깜박임 효과를 추가했습니다. 여기서는 "배경" CSS 속성 대신 "마스크" CSS 속성을 사용했습니다. "-webkit-mask" CSS 속성 값으로 선형 그래디언트를 추가했습니다.

쉬머 키프레임에서는 왼쪽의 "webkit-maskposition"을 사용하여 마스크 위치를 설정합니다. 출력에서 사용자는 이미지에 밝은 선과 어두운 선이 번갈아 나타나는 깜박임 효과를 관찰할 수 있습니다.

으아악

예

아래 예에서는 로딩 표시기에 깜박이는 효과를 추가했습니다. 먼저 HTML과 CSS를 사용하여 로딩 표시기를 만듭니다. 그런 다음 background CSS 속성을 사용하여 shimmer div에 선형 그래디언트를 적용합니다.

키프레임에서는 shimmer div를 양의 x 방향으로 이동하면서 회전합니다. 출력에서 사용자는 로딩 표시기의 깜박임 효과가 얼마나 아름다운지 확인할 수 있습니다.

으아악

사용자는 CSS를 사용하여 웹 페이지에 깜박임 효과를 추가하는 방법을 배웠습니다. 첫 번째 예에서는 div 요소에 깜박임 효과를 추가했습니다. 두 번째 예에서는 "mask" CSS 속성을 사용하여 이미지 요소에 깜박임 효과를 추가합니다. 이전 예에서는 로딩 표시기에 깜박이는 효과를 추가했습니다.

위 내용은 CSS를 사용하여 반짝이는 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!