CSS를 사용하여 고급 로딩 화면 만들기

웹 사이트에서 여러 페이지를 탐색할 때 개발자는 웹 사이트가 웹 페이지 간에 이동할 수 있는 충분한 시간을 갖도록 웹 사이트에 로딩 화면을 추가해야 합니다. 로딩 화면은 웹사이트 페이지가 로드/초기화되는 동안 사용자가 기다릴 수 있는 효과적인 방법입니다.

로딩 화면을 만드는 방법은 무엇인가요?

로딩 화면을 만들기 위해 HTML과 CSS를 사용할 수 있습니다. 먼저, 백분율을 표시할 제목 태그를 제공할 div 요소를 만듭니다.

그런 다음 CSS 속성(예: border-radius)을 사용하여 높이와 너비를 지정하고 로딩 요소에 애니메이션을 추가합니다. 또한 주요 내용만 볼 수 있도록 요소를 숨기기 위해 over-flow 속성을 사용할 것입니다.

문법

다음은 오버플로 속성의 구문입니다 -

위 구문에서 Overflow 속성과 함께 사용되는 값은 요소를 숨기는 Hidden 값, 요소를 보이게 하는 visible 값, 요소를 숨길 때 슬라이더를 추가하는 Scroll 속성이 될 수 있음을 알 수 있습니다.

로딩 화면을 더 잘 이해하기 위해 예를 살펴보겠습니다.

예

아래 코드에서는 제목 태그와 div 컨테이너를 선언하고 그 안에 로딩 컨테이너를 만든 다음 색상을 채우고 애니메이션을 추가했습니다. 그런 다음 백분율을 표시하기 위해 컨테이너에 두 번째 제목을 추가하고 360도 회전하는 키프레임 기능을 추가했습니다. 코드의 출력을 살펴보겠습니다.

위 출력에서 ​​제목 태그를 먼저 선언한 다음 두 번째 제목을 표시하는 색상을 추가하는 컨테이너, 컨테이너 내의 애니메이션을 선언하는 것을 볼 수 있습니다. 애니메이션은 백분율 제목 위에서 360도 회전합니다.

예

다음은 고급 로딩 화면을 만드는 또 다른 예입니다. 아래 예에서는 div 요소를 선언한 다음 CSS 속성을 사용하여 요소의 스타일을 지정하는 클래스를 제공합니다. 테두리에 검은색과 빨간색 색상을 추가하고 애니메이션을 추가했으며 키프레임 기능을 사용하여 컨테이너를 360도 회전했습니다. 위의 코드는 웹 페이지에 로딩 화면을 추가하는 방법을 보여줍니다.

출력에서는 두 가지 색상이 360도 회전된 것을 볼 수 있어 사용자에게 페이지가 로딩되는 듯한 느낌을 줍니다. align 속성을 사용하여 로더를 페이지 중앙에 정렬할 수 있습니다.

NOTE - keyframe 속성은 개발자가 JavaScript를 사용하지 않고 HTML 요소에 애니메이션을 적용할 수 있게 해주는 CSS의 속성이며, 이러한 키프레임은 요소가 갖게 될 스타일을 지정합니다.

키프레임 속성은 애니메이션이 실행되어야 하는 시간을 지정하며 사용되는 전환은 부드럽고 정확해야 합니다. 백분율을 지정해야 하며 개발자는 애니메이션이 모든 브라우저와 호환되는지 확인해야 합니다.

결론

웹 개발자는 작업 중인 프로젝트에 따라 다양한 유형의 스타일과 애니메이션을 사용하여 로딩 화면을 만듭니다. 로딩 화면을 조금 다르게 만들고 창의적인 노력을 기울이는 것이 중요합니다. 사용자가 로딩 화면의 모양과 페이지를 로드하는 데 걸리는 시간으로 인해 주의가 산만해지는 경우가 많기 때문입니다. 이러한 로딩 화면의 주요 목적은 웹사이트를 대화형으로 만들고 페이지를 로드/실행하는 데 많은 시간이 걸릴 때 사용자를 지루하게 하지 않는 것입니다.

위 내용은 CSS를 사용하여 고급 로딩 화면 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!