CSS3 표시 숨기기

CSS3는 최신 CSS 사양으로 웹 디자인 효과를 더욱 다채롭게 만들어줍니다. 일반적으로 사용되는 기능 중 하나는 표시 및 숨기기입니다.

CSS3에서 표시 및 숨기기를 구현하는 방법에는 여러 가지가 있으며, 아래에 소개되어 있습니다.

1. 표시 속성을 사용하세요.

표시 속성은 다음을 포함하여 요소의 표시 상태를 제어할 수 있습니다.

• none: 페이지에서 공간을 차지하지 않고 요소를 숨깁니다.
• block: 요소를 블록 요소로 표시합니다.
• inline: 요소를 인라인 요소로 표시합니다.
• inline-block: 요소를 인라인 블록 요소로 표시합니다.

display 속성의 값을 변경하면 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 요소 위로 마우스를 가져갈 때 이미지를 표시합니다.

img {
  display: none;
}

div:hover img {
  display: block;
}

위 코드에서 이미지의 초기 표시 속성은 없음, 즉 숨겨진 상태로 설정됩니다. 그런 다음 div:hover img를 통해 div 요소 위로 마우스를 가져갈 때 이미지의 표시 속성을 block으로 설정하여 표시합니다.

2. 가시성 속성 사용

가시성 속성은 요소의 가시성을 제어합니다. 표시 속성과 달리 가시성 속성을 숨김으로 설정해도 페이지의 공간을 차지합니다. 해당 값은 다음과 같습니다.

• visible: 요소가 표시됩니다.
• hidden: 요소는 보이지 않지만 여전히 페이지 공간을 차지합니다.

다음 코드는 요소 위로 마우스를 가져갈 때 텍스트 콘텐츠 표시를 구현합니다.

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

위 코드에서 div 요소의 초기 가시성 속성은 숨김, 즉 숨김으로 설정됩니다. 그런 다음 div:hover를 통해 마우스를 div 요소 위로 가져가면 해당 요소의 가시성 속성이 visible로 설정되어 표시됩니다.

3. 불투명도 속성을 사용하세요.

불투명도 속성은 요소의 투명도를 제어합니다. 값 범위는 0~1이며, 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 요소의 불투명도 속성 값을 변경하면 해당 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 마우스를 요소 위로 가져갈 때 요소가 페이드 인 및 페이드 아웃되는 효과를 구현합니다.

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

위 코드에서 div 요소의 초기 불투명도 속성은 완전히 투명한 0으로 설정됩니다. . 그런 다음 div:hover를 통해 마우스가 div 요소 위에 있을 때 요소의 불투명도 속성을 완전히 불투명한 1로 설정합니다. 동시에 페이드인 및 페이드아웃 효과를 얻기 위해 전환 속성이 ​​추가됩니다.

위 내용은 CSS3를 사용하여 표시하고 숨기는 여러 가지 방법으로, 필요에 따라 선택할 수 있습니다. CSS3는 일부 이전 브라우저와 호환되지 않는다는 점은 주목할 가치가 있으므로 코드를 작성할 때 호환성 문제를 고려해야 합니다.

위 내용은 CSS3 표시 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!