css3hideshow

CSS3 Hide Show

CSS3은 최신 CSS 표준으로, 더 많은 스타일 선택과 제어 기능을 제공하며, 그 중 하나는 요소 숨기기 및 표시 제어입니다. 이 기사에서는 CSS3를 사용하여 요소를 숨기고 표시하는 방법과 이 기술이 어디에 도움이 될 수 있는지에 대해 설명합니다.

CSS3에는 없음, 블록, 인라인, 인라인 블록이라는 네 가지 표시 속성이 있습니다. 가장 일반적으로 사용되는 것은 none과 block입니다. none은 요소를 완전히 숨기는 것을 의미하고, block은 요소를 화면에 블록으로 표시한다는 의미입니다.

숨기기 및 표시 효과를 얻으려면 CSS3의 다른 속성과 함께 이러한 표시 속성을 사용해야 합니다. 다음은 이러한 효과를 더 효과적으로 얻을 수 있는 몇 가지 속성입니다.

display:none: 요소를 완전히 숨깁니다. 요소가 이 속성으로 설정되면 페이지에 렌더링되지 않습니다.

display:block: 요소가 블록 모양으로 화면에 표시되도록 합니다. 이 속성은 일반적으로 숨겨진 요소를 화면에 다시 표시하는 데 사용됩니다.

visibility:hidden: 요소를 숨기지만 요소가 차지하는 공간은 여전히 ​​존재합니다. 이 속성은 일반적으로 페이지 레이아웃 문제를 피하기 위해 원래 레이아웃을 유지해야 할 때 사용됩니다.

visibility:visible: 요소를 표시합니다. 이 속성은 요소를 숨긴 후 다시 표시합니다.

opacity:0: 요소를 투명하게 만들어 요소를 숨깁니다. 이 속성은 일반적으로 스무딩/페이딩 효과가 필요할 때 사용됩니다.

opacity:1: 해당 요소를 다시 볼 수 있고 다른 요소는 정상적으로 표시될 수 있도록 투명도를 일반 값(1)으로 재설정합니다.

transition:all 0.5seasing: 스타일 속성 변경의 전환 시간을 0.5초로 설정하고 전환 효과를 "ease"로 설정합니다. 이 속성은 일반적으로 부드러운 CSS 전환 효과를 만드는 데 사용됩니다.

다음으로 예제를 사용하여 위 속성을 사용하여 숨기기 및 표시 효과를 얻는 방법을 보여 드리겠습니다.

먼저 다음과 같이 요소를 완전히 숨기기 위해 display:none 속성을 사용합니다.

.hide-me{
    display:none;
}

이렇게 하면 "hide-me" 클래스가 있는 요소가 숨겨집니다.

그런 다음 아래와 같이 display:block 또는 display:inline-block을 사용하여 해당 요소의 표시를 복원할 수 있습니다.

.show-me{
    display:block;
}

이렇게 하면 "show-me" 클래스가 있는 요소가 블록 수준 요소로 설정되고 다시 표시됩니다. 화면에.

다음으로 visible:hidden을 사용하여 요소를 숨길 수 있지만 아래와 같이 요소가 차지하는 공간은 그대로 유지됩니다.

.hide-me{
    visibility:hidden;
}

이렇게 하면 "hide-me" 클래스가 있는 요소가 숨겨지고 표시됩니다. 페이지는 여전히 레이아웃에서 동일한 공간을 차지합니다.

그런 다음 visible:visible을 사용하여 요소 숨기기를 종료하고 다음과 같이 다시 표시할 수 있습니다.

.show-me{
    visibility:visible;
}

이렇게 하면 "show-me" 클래스가 있는 요소가 페이지에 다시 표시됩니다.

더 부드러운 전환 효과가 필요한 경우 다음과 같이 불투명도 속성을 사용할 수 있습니다.

.hide-me{
    opacity:0;
    transition:all 0.5s ease;
}

이렇게 하면 "hide-me" 클래스의 요소가 투명하게 설정되고 스타일 변경에 대한 전환 시간이 0.5초(0.5초)로 설정됩니다. , 전환 효과를 "ease"로 설정합니다.

마지막으로 opacity:1 및 Transition:all 0.5초를 사용하여 다음과 같이 숨김을 종료하고 요소를 사용자에게 표시할 수 있습니다.

.show-me{
    opacity:1;
    transition:all 0.5s ease;
}

이렇게 하면 "show-me" 클래스가 있는 요소가 불투명하고 페이드 상태가 됩니다. 0.5초 안에 원활하게 나옵니다.

요약:

CSS3은 요소의 숨기기 및 표시 효과를 더 잘 제어할 수 있는 일련의 속성을 제공합니다. 다양한 속성은 일반적으로 웹 디자인, 시각 효과 디자인, 사용자 경험 디자인과 같은 측면을 포함할 수 있는 다양한 애플리케이션 시나리오에 해당합니다. 요소를 숨기거나 표시하는 효과는 대부분의 제품과 서비스의 디자인 기능을 최적화하는 동시에 웹 사이트나 UI를 더욱 대화적이고 시각적으로 만들 수 있습니다.

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