2020-05-28 - 페이지가 로드될 때 CSS를 사용하여 페이드인 효과를 만드는 방법은 무엇입니까?

애니메이션 및 전환 속성을 사용하여 CSS를 사용하여 페이지 로드 시 페이드인 효과를 만듭니다.

방법 1: CSS 애니메이션 속성 사용: CSS 애니메이션은 2개의 키프레임으로 정의됩니다. 하나는 불투명도를 0으로 설정하고 다른 하나는 불투명도를 1로 설정합니다. 애니메이션 유형을 easy로 설정하면 애니메이션이 페이지에서 부드럽게 페이드 인 및 페이드 아웃됩니다.

이 속성은 body 태그에 적용됩니다. 페이지가 로드될 때마다 이 애니메이션이 재생되고 페이지가 페이드 인되는 것처럼 보입니다. 페이드인 시간은 animation 속성에서 설정할 수 있습니다.

코드는 다음과 같습니다:

body {
animation: fadeInAnimation easy 3s
animation-iteration-count: 1;
animation-fill-mode:forwards; : 0;
}
100% {
        불투명도: 1;
  }
}


예:


페이드 만드는 방법- 실제로

CSS

CSS를 사용하여 페이지 로드 시 페이드인 효과를 만드는 방법

이 페이지는 로드 후

/본문>

위 내용은 2020-05-28 - 페이지가 로드될 때 CSS를 사용하여 페이드인 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!