이 매뉴얼에서는 ' 이행 ' CSS의 속성.
CSS에서 전환이 있는 div를 표시하고 숨기는 방법은 무엇입니까?
CSS ' 이행 ' 속성을 사용하면 특정 기간을 기준으로 속성의 가치를 쉽게 변경할 수 있습니다. 상태에 따라 부동 또는 활성 요소가 될 수 있습니다. 또한 CSS의 transition 속성은 HTML에서 div를 표시하거나 숨기는 데 사용됩니다.
이제 transition 속성의 구문으로 넘어 갑시다.
통사론
전환 효과를 만들 때 지정해야 하는 두 가지 사항이 있습니다.
기본적으로 ' 이행 '는 다음과 같은 네 가지 다른 속성으로 구성된 약식 속성입니다.
이행 : transition-property transition-duration전환 타이밍 기능 전환 지연
다음은 언급된 속성에 대한 설명입니다.
- 전환 속성: 모든 CSS 속성으로 전환을 설정하는 데 사용됩니다. 너비, 높이, 불투명도 등.
- 전환 기간: 전환 기간을 지정하는 데 사용됩니다.
- 전환 타이밍 기능: 전환 속도를 설정하는 데 사용됩니다.
- 전환 지연: 전환이 시작되거나 지연되는 시간을 지정합니다.
' 이행 ' CSS의 속성. 이를 위해 먼저 ' div ' 및 입력 유형 ' 체크박스 '.
1단계: div 생성 및 스타일 지정
HTML
<중앙 ><라벨 > Div 표시 > <입력 유형 = '체크박스' >
>
이후 background-color 속성을 사용하여 div의 스타일을 지정하고 배경색을 ' RGB(238, 190, 118) '. div의 높이를 ' 150픽셀 '로 설정하고 주변의 테두리를 ' 10픽셀 ', ' 산등성이 ', 그리고 ' RGB(6, 56, 2) '. 결국 우리는 font-size를 ' 50픽셀 '.
CSS
div {배경색 : RGB ( 238 , 190 , 118 ) ;
키 : 150픽셀 ;
국경 : 10픽셀 산등성이 RGB ( 6 , 56 , 둘 ) ;
글꼴 크기 : 50픽셀 ;
}
위에서 설명한 코드의 출력은 다음과 같습니다. 여기에서 div와 체크박스가 성공적으로 생성되었음을 확인할 수 있습니다.
이제 transition 속성을 사용하여 div를 숨기고 표시하는 다음 단계로 이동합니다.
2단계: 전환이 있는 div 표시 및 숨기기
이렇게 하려면 '을 설정하여 전환 효과를 설정합니다. 불투명 ', ' 2초 ', 불투명도 값은 ' 0 ' 우리가 CSS에서 만든 div 클래스에서:
이행 : 불투명 2초 ;불투명 : 0 ;
메모: '에 전환을 적용합니다. 불투명 '속성을 사용하여 요소의 투명도를 설정합니다. 여기서 우리는 그 값을 ' 0 ', 즉 전환이 시작되면 div가 2초 동안 숨겨집니다.
전환 값을 설정한 후 ' 입력 ' HTML 파일에서 생성된 입력 유형에 액세스하고 입력 요소의 의사 클래스를 ' : 체크 '. 그런 다음 생성된 div에 액세스하고 ' + ” 연산자를 사용하여 확인란을 div와 연결합니다. 따라서 체크박스에서 작업을 수행하면 그 사용법이 div에 영향을 미칩니다. 다음으로 불투명도 값을 ' 1 ':
입력 : 체크 + div {불투명 : 1
}
메모: 불투명도 값을 ' 1 ”, 즉 체크박스를 체크하면 생성된 div가 표시됩니다. 또한 div를 숨기려면 표시를 해제하십시오.
보시다시피 div는 ' 이행 ' 속성 및 ' : 체크 ' 의사 클래스 요소:
CSS에서 transition 속성이 있는 div를 숨기고 표시하는 방법을 설명했습니다.
결론
div를 표시하거나 숨기려면 ' 이행 ' 속성 및 ' : 체크 ' pseudo-class 요소는 div opacity 값이 ' 0 ', 그리고 :checked 의사 클래스 요소에서 불투명도를 ' 1 '. 사용자가 확인란을 클릭하면 div가 표시되고 선택을 취소하면 div가 숨겨집니다. 이 매뉴얼에서는 transition 속성을 이용하여 div를 숨기고 보여주는 방법을 설명했습니다.