애니메이션 로딩은 무엇을 의미하나요? 순수 CSS로 구현된 여러 로딩 애니메이션

이 글의 내용은 애니메이션 로딩이 무슨 뜻인가요? 순수 CSS로 구현된 여러 로딩 애니메이션에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1: 애니메이션 로딩은 무엇을 의미하나요?

게임을 플레이할 때 많은 사람들이 애니메이션을 보게 되는데, 이는 게임이 나타날 때 로딩이나 버퍼링이 발생함을 나타냅니다. 플레이어와 함께. [추천 자료: 로딩 애니메이션 백과사전]

II: 순수 CSS로 구현된 여러 로딩 애니메이션

웹 페이지의 크기가 크거나 프런트 엔드 라이브러리를 사용하기 때문입니다. 브라우저에서 웹 페이지를 열 때 일정 시간 동안 흰색 화면이 나타나는 경우가 많습니다. 일반적인 접근 방식은 페이지가 렌더링된 후 웹 페이지의 첫 번째 화면 렌더링이 완료되기 전에 사용자에게 로딩 애니메이션을 표시하는 것입니다. , 로딩 애니메이션이 숨겨져 있습니다. 아래에서 몇 가지 매우 간단한 CSS 애니메이션을 소개하겠습니다. 범례를 참조하세요.

첫 번째가 가장 간단합니다. HTML에 태그 하나와 CSS 몇 줄만 있으면 됩니다. 아이디어에 대해 간단히 이야기해 보겠습니다. 요소의 너비와 높이를 동일한 값으로 설정하고, 테두리 반경을 50%로 설정하여 원으로 만들고, 배경색을 투명하게 설정하고, 요소에 테두리 몇 픽셀을 추가하고, 원하는 색상과 일치시킵니다. 여기에서는 3/4만 있는 고리처럼 보이도록 한쪽 테두리를 투명하게 설정한 다음 애니메이션을 적용하여 움직이게 해야 합니다. 배치된 요소에 대해 변환:변환(-50%, -50%)을 위쪽 및 왼쪽의 50%와 결합하여 설정하면 요소를 가로 및 세로 중앙에 배치할 수 있습니다. transform(-50%, -50%)을 form and to에 쓰는 이유는 요소에 직접 "transform:translate(-50%, -50%)"라고 쓰면 "translate:"도 쓰기 때문입니다. 애니메이션의 변환(-50%, -50%)". 변환: 회전(0deg)"은 요소의 변환 속성을 덮어쓰고 중앙에 배치되는 것을 방지합니다.

두 번째 아이디어는 세 개의 원을 나란히 구성하고 특정 애니메이션 지연을 설정하여 세 개의 원이 차례로 같은 느낌을 갖도록 하는 것입니다. 무한은 애니메이션이 무한히 재생된다는 뜻이고 대체는 애니메이션이 계속 재생된다는 뜻입니다. 처음부터 끝까지 시작하고 끝에서 처음까지.

세 번째는 처음 두 개보다 약간 더 복잡합니다. 여기서는 절대 위치에 있는 8개의 원을 사용하고 변환 속성을 사용하여 각 쌍과 중심 사이의 각도를 하나씩 이동합니다. 원은 45도이므로 45도의 배수로 회전한 다음 특정 거리를 결과에 미치는 영향으로 변환합니다. 그런 다음 각 원 규칙에 대한 애니메이션 지연을 설정하면 됩니다. 여기서 애니메이션은 크기 조절 없이 너비와 높이의 변경을 사용합니다. 왜냐하면 변환:척도()가 이전에 설정된 변환 속성을 덮어쓰므로 원이 퍼지지 않게 되기 때문입니다.

위의 애니메이션 로딩이란 무슨 뜻인가요? 순수 CSS로 구현된 여러 로딩 애니메이션에 대한 전체 소개입니다. CSS3 Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 애니메이션 로딩은 무엇을 의미하나요? 순수 CSS로 구현된 여러 로딩 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!