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

CSS 전환을 사용하여 페이지 로드 시 페이드인 효과 만들기

텍스트에 페이드 효과를 주기 위해 CSS 전환을 사용할 수 있나요? 페이지가 로드될 때?

이 페이드인 효과를 얻으려면 다음 CSS 규칙:

</p>
<h1>test p {</h1>
<p>margin-top: 25px;<br>font-size: 21px;<br> text-align : 중앙;<br> 불투명도: 0;<br> 전환: 불투명도 2s easy-in;<br>}<br>

이제 로드 시 전환을 트리거하려면 다음 방법 중 하나를 사용할 수 있습니다.

방법 1: CSS 애니메이션(널리 사용되지는 않음) 지원)

<사전>

test p {

animation: fadein 2s;
}

@keyframes fadein {
{ 불투명도: 0; }
에서 { 불투명도: 1; }
}

방법 2: jQuery 또는 JavaScript

문서 로드 시 다음 jQuery 스크립트를 실행합니다.

<사전>
$("#테스트 p").addClass("load");

해당 CSS 사용:

</p>
<h1>test p {</h1>
<p>전환: 불투명도 2초 완화;<br> 불투명도: 0;<br>}</p>
<h1>테스트 p.load {</h1>
<p>불투명도: 1;<br>}<br>

방법 3 : jQuery의 Deferred 사용 애니메이션

지연을 사용하여 애니메이션을 트리거하고 기간을 설정합니다.

<br>$("#test p").delay(1000).animate({ 불투명도: 1 }, 700);<br>

제공된 응답에서 설명한 것처럼 다양한 방법으로 다양한 수준의 브라우저 간 호환성을 제공할 수 있습니다.

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