CSS 전환으로 페이지 로드 시 텍스트에 페이드인 효과를 만들 수 있나요?

페이지 로드 시 페이드 인 효과를 위해 CSS 사용

CSS 전환을 효과적으로 사용하여 텍스트 단락이 페이드 인되도록 할 수 있습니까? 페이지가 로드되나요?

물론이죠. CSS 전환은 이러한 시각 효과에 대한 간단한 솔루션을 제공합니다. 다음 단계를 고려하십시오.

1단계: CSS 정의

텍스트 단락의 초기 가시성을 지정하는 CSS 규칙을 만듭니다.

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    transition: opacity 2s ease-in;  
}

• 불투명도: 0은 불투명도를 다음으로 설정하여 처음에 단락을 보이지 않게 만듭니다. 0.
• margin-top: 25px 및 글꼴 크기: 21px로 스타일을 조정합니다.
• text-align: center 텍스트를 중앙에 배치합니다.
• transition: opacity 2s easy- 안에; 전환의 지속 시간과 완화 효과를 설정합니다.

2단계: 불투명도 전환

전환을 트리거하려면 전환의 불투명도를 변경해야 합니다. 페이지가 로드되면 단락. 이는 다음을 사용하여 달성할 수 있습니다:

방법 1: CSS 애니메이션(자체 호출)

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test p { ... } /* Apply the fadein animation */

방법 2: jQuery 또는 일반 JavaScript

• jQuery: $("#test p").addClass("load");
• 일반 JavaScript: document.getElementById("test").children[0].className = " load";

3단계: "load" 클래스에 맞게 CSS 조정

클래스가 추가된 상태에서 "로드" 상태일 때의 단락:

#test p.load {
    opacity: 1;
}

또는 JavaScript를 사용하여 불투명도를 직접 변경할 수도 있습니다.

위 내용은 CSS 전환으로 페이지 로드 시 텍스트에 페이드인 효과를 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!