CSS를 사용하여 로더에 로고를 설정하는 방법은 무엇입니까?

이 질문에 답하려면 먼저 "Loader"를 만들어야 합니다. 페이지가 로드 중이고 완료하는 데 몇 초가 걸린다는 사실을 사용자나 방문자에게 알리는 애니메이션을 Loader라고 합니다.

대부분의 경우 로더는 웹사이트에서 결과를 검색하는 데 너무 오랜 시간이 걸릴 때 유용합니다. 특정 웹사이트에 CSS 로더가 없으면 사용자는 웹사이트가 로드되는 동안 전혀 응답하지 않는다고 생각할 것입니다.

따라서 웹페이지에 CSS 로더를 추가하면 사용자의 주의가 산만해지거나 페이지가 제대로 로드될 때까지 잠시 기다리게 됩니다. 사이트가 응답하지 않는다는 인상을 주기보다는 간단한 애니메이션을 통해 사이트가 여전히 결과를 검색하는 중이며 페이지가 몇 초 안에 준비될 것임을 보여줍니다.

CSS를 사용하여 스타일, 애니메이션 또는 기타 스타일을 추가하여 로더를 만들 수 있습니다.

예

이제 CSS를 사용하여 인터넷에서 가장 일반적인 형태의 로더를 만들어 보겠습니다.

으아악

예

이것은 수평 축에서 애니메이션을 적용하는 또 다른 형태의 로더입니다.

으아악

로더에 로고 추가

CSS에서 로더를 만드는 방법을 알았으니 이제 방금 만든 로더에 로고를 추가하는 방법을 살펴보겠습니다.

먼저 로더 내부에 로고를 추가해야 하는 이유를 이해해 보겠습니다. 로고는 브랜드의 마크이자 아이덴티티로서 사용자 경험에 개인적인 느낌을 더해줍니다. 요즘 모든 웹사이트는 사용자가 웹사이트를 방문할 때마다 브랜드에 긍정적인 영향을 미치는 개인화 로더를 사용합니다.

알고리즘

로고를 삽입하는 로더를 생성하기 위해 따라야 할 알고리즘은 다음과 같습니다. -

• 1단계 - 로더를 포함하기 위해 HTML 파일을 만들고 파일 본문에 HTML div를 추가합니다.

• 2단계 - 로고와 로더에 애니메이션을 적용하기 위해 CSS 파일을 작성하거나 스타일 태그를 사용하여 삽입합니다.

• 3단계 - 이제 로더 클래스에 표시되도록 div 태그 내부에 태그를 사용하여 로고를 삽입합니다

다음은 로더에 사용할 수 있는 속성입니다. -

• 로고에 따라 테두리, 색상, 높이, 너비를 맞춤화해 전체적인 일관성을 크게 향상시키고 브랜드 독창성을 높일 것입니다.

• 점진적 변화 애니메이션을 추가하기 위해 CSS의 @keyframes 규칙을 활용하겠습니다.

• 그런 다음 로더를 회전시키기 위해 CSS Transform 속성을 사용하겠습니다.

로고 이미지의 크기는 로더의 크기보다 작거나 같도록 디자인해 드립니다. 로고 회전 효과를 상쇄하기 위해 반대 방향으로 애니메이션 스타일을 추가하겠습니다.

예

아래는 위의 알고리즘을 사용하여 웹사이트에 로더를 추가하는 예입니다.

으아악

결론

대체로 CSS를 사용하여 로더에 로고를 설정하는 것은 간단한 작업입니다. 당신이 해야 할 일은 로고의 너비와 높이를 설정한 다음 "배경 이미지" 속성을 사용하여 이를 로더의 배경 이미지로 추가하는 것뿐입니다. "배경 위치" 또는 "여백" 속성을 사용하여 위치를 조정할 수도 있고 테두리, 상자 그림자 등과 같은 다른 스타일 옵션을 사용하여 추가로 사용자 정의할 수도 있습니다. CSS에 대한 기본 지식만 있으면 로고가 포함된 아름다운 로더를 쉽게 만들 수 있습니다. 시간!

위 내용은 CSS를 사용하여 로더에 로고를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!