이 문서에서는 다음을 제공합니다.
방법 1: CSS '애니메이션' 속성을 사용한 페이드 인 효과
간단한 HTML 페이지를 디자인하려면 다음 요소를 추가하십시오.
- 추가 ' ' 요소와 함께 ' 스타일 ' 기인하다. 'style' 속성은 요소의 스타일링 속성을 포함합니다.
- '를 적용 색깔 ” 요소의 텍스트 색상을 정의하는 style 속성의 속성.
- 그 후 ' ” 요소를 사용하여 텍스트나 간단한 단락을 추가합니다.
아래는 HTML 코드입니다.
< h2 스타일 = '색상: rgb(84, 8, 191)' >
Linuxhint 튜토리얼 웹사이트
< / h2 >
< 피 > 페이지 로드 시 페이드 인 효과 < / 피 >
HTML 페이지가 성공적으로 생성되었습니다.
CSS 섹션에서 페이지에 페이드 인 효과를 적용하려면 ' 생기 ” CSS 속성은 “ <몸> ” HTML 페이지의 요소.
스타일 '본문' 요소
신체 {애니메이션: fadeInPage ease 3s;
애니메이션 반복 횟수: 하나 ;
}
'
'는 다음 CSS 속성과 함께 적용됩니다.- “ 생기 ”는 여러 값을 지정하여 애니메이션을 설정하는 속기 속성입니다. 여기에서 애니메이션 이름, animation-timing-function 및 animation-duration이 정의됩니다.
- “ 애니메이션 반복 횟수 ”는 애니메이션이 반복되어야 하는 횟수를 정의합니다.
'애니메이션'에 '@keyframes' 규칙 적용
@keyframes fadeInPage {0 % {
불투명: 0 ;
}
100 % {
불투명: 하나 ;
}
}
'를 정의하려면 @키프레임 ” 애니메이션에 대한 규칙, @keyframes 키워드 뒤에 애니메이션 이름을 언급하십시오. 다음과 같이 애니메이션 동작을 수정합니다.
- 에 ' 0% ” 애니메이션, “ 불투명 ” 속성에는 값이 0으로 지정됩니다. 애니메이션이 시작될 때 이미지가 투명하다는 의미입니다.
- 에 ' 100% ” 애니메이션에서 불투명도는 “ 하나 ”는 단색을 나타냅니다.
산출
페이지 로드 시 페이드 인 효과를 적용하는 두 번째 방법으로 이동해 보겠습니다.
방법 2: CSS 'transition' 속성을 사용한 페이드인 효과
추가 ' 길 위에 ' 내의 속성 <몸> ' 요소. 이 이벤트는 페이지 로드 시 트리거됩니다. 로드 시 body 요소의 불투명도는 ' 하나 ”, 이는 단색과 관련이 있습니다.
< 신체 길 위에 = 'document.body.style.opacity='1'' >이 예에서 CSS ' 이행 ” 속성은 페이드 인 효과를 추가하는 데 사용됩니다.
신체 {불투명: 0 ;
전환: 불투명도 6s;
}
다음은 위에서 언급한 속성에 대한 설명입니다.
- “ 불투명 ” 속성은 요소의 투명도를 정의합니다.
- CSS 사용 ' 이행 ”, 지정된 시간 동안 속성 값을 점진적으로 변경합니다.
산출
페이지 로드 시 페이드인 효과를 위해 CSS를 사용하는 방법을 알려드렸습니다.
결론
여러 CSS 속성을 활용하여 HTML 요소에 페이드 인 효과를 적용할 수 있습니다. 보다 구체적으로 ' 생기 ”, “ 불투명 ', 그리고 ' 이행 ” 속성을 사용하여 페이지 또는 요소에 애니메이션 효과를 지정할 수 있습니다. 애니메이션은 ' @키프레임 ' 규칙. 이 기사에서는 CSS를 사용하여 페이지 로드 시 페이드 인 효과를 추가하는 방법을 설명했습니다.