CSS를 사용하여 텍스트 애니메이션 효과 로드

요즘 애니메이션은 더 많은 사용자를 끌어들이는 앱의 가장 강력한 기능으로, 앱 탐색에 대한 사용자의 관심을 높입니다. 웹 애플리케이션에서는 HTML과 CSS를 사용하여 애니메이션을 만들 수 있습니다. 그러나 JavaScript를 사용하여 애니메이션을 만들 수 있지만 이로 인해 웹 사이트 속도가 느려집니다.

이 튜토리얼에서는 HTML과 CSS를 사용하여 텍스트 애니메이션을 로드하는 방법을 배웁니다. API에서 데이터를 가져오거나 웹페이지를 로드할 때 로딩 텍스트에 애니메이션을 적용하여 더욱 매력적으로 만드는 것이 중요합니다.

예 1

아래 예에서는 그 안에 "로더" div와 "로더 내부" div 요소를 만들었습니다. CSS에서는 로더 div에 고정 크기를 지정하고 "회전" 키프레임을 사용하여 애니메이션을 적용합니다. 애니메이션 시간을 3초로 설정했습니다.

또한 로더 내부 div 요소와 로더 div 요소 내의 위치에 대해 내부 회전 키프레임을 설정했습니다.

회전 및 내부 회전 키프레임에서는 로더를 0도에서 360도로 이동합니다. 사용자는 중간에 텍스트를 로드하면서 출력에서 ​​회전하는 로더를 관찰할 수 있습니다.

으아아아

예 2

아래 예에서는 로딩 바를 만들었습니다. 여기에서는 그 안에 로더 div 요소와 bar div 요소를 만들었습니다. CSS에서 로더 div 요소의 크기와 bar 요소의 애니메이션을 설정했습니다.

우리는 애니메이션을 만들기 위해 "막대 애니메이션" 키프레임을 사용합니다. "bar-animation"에서는 div 요소의 너비를 변경하여 로딩 바처럼 동작하도록 합니다.

으아아아

예 3

아래 예시에서는 바운스 로딩 텍스트를 생성했습니다. 여기서는 Loading 단어의 각 문자를 별도의 div 요소에 추가합니다. 그런 다음 "애니메이션" 키프레임을 사용하여 모든 캐릭터에 애니메이션을 적용합니다. "애니메이션" 키프레임에서는 캐릭터의 수직 위치를 변경합니다.

또한 “n-th-child()” 메서드를 사용하여 모든 div 요소에 하나씩 액세스하고 애니메이션 지연을 설정했습니다. 출력에서 사용자는 바운딩되는 로딩 텍스트를 관찰할 수 있습니다.

으아아아

예 4

아래 예에서는 로딩 텍스트에 흐림 효과를 추가했습니다. 여기서는 로드 단어의 각 문자를 별도의 "span" 요소에 추가합니다. 그런 다음 애니메이션을 추가하기 위해 'n-th-child()' CSS 메서드를 사용하여 각 범위 요소에 하나씩 액세스합니다. 범위 요소에 특정 양의 애니메이션 지연이 있는 "흐릿한 텍스트" 애니메이션을 추가했습니다.

애니메이션 키프레임에서는 텍스트에 흐림 필터를 적용하여 로드된 텍스트에 실행 중인 흐림 효과를 표시합니다.

으아아아

사용자는 이 튜토리얼에서 4가지 유형의 로딩 애니메이션을 배웠습니다. 첫 번째 예에서는 텍스트가 포함된 회전 로딩 표시기를 만듭니다. 두 번째 예에서는 로딩 바를 만듭니다. 또한 세 번째 예에서는 바운스 로딩 텍스트를 만들었고 마지막 예에서는 텍스트에 흐림 효과를 추가했습니다.

위 내용은 CSS를 사용하여 텍스트 애니메이션 효과 로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!