CSS가 5초 후 요소 자동 숨기기
CSS를 사용하여 페이지 로드 후 5초가 지나면 요소를 숨길 수 있나요? jQuery 솔루션은 확실히 가능하지만 CSS 전환을 사용하여 이를 달성할 수 있습니까?
답변: 예
그러나 반전이 있습니다. CSS 전환은 진정한 숨기기를 달성하기 위해 "표시" 또는 크기와 같은 속성에 적용할 수 없습니다. 대신 요소에 대한 애니메이션을 만들고 5초 후에 표시 여부를 '숨김'으로 전환하세요. 동시에 높이와 너비를 0으로 설정하여 DOM 흐름에서 공간 점유를 방지합니다.
예
CSS
html, body { height:100%; width:100%; margin:0; padding:0; } #hideMe { -moz-animation: cssAnimation 0s ease-in 5s forwards; /* Firefox */ -webkit-animation: cssAnimation 0s ease-in 5s forwards; /* Safari and Chrome */ -o-animation: cssAnimation 0s ease-in 5s forwards; /* Opera */ animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes cssAnimation { to { width:0; height:0; overflow:hidden; } } @-webkit-keyframes cssAnimation { to { width:0; height:0; visibility:hidden; } }
HTML
<div>
이 접근 방식은 페이지 흐름에 영향을 주지 않고 지정된 지연 후에 요소를 숨겨 CSS 전환을 사용하여 원하는 결과를 얻습니다.
위 내용은 CSS만 사용하여 5초 후에 요소를 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!