며칠 전, 나는 HTML + CSS를 사용하여 외국 보스의 비디오를 보았습니다. 최근에 Sass를보고 있었기 때문에 Sass를 사용하여 구현했습니다.
최종 렌더링은 다음과 같습니다.
Code의 파일 구조 (Easy Sass는 SCSS 파일을 컴파일하는 데 사용됩니다) :
페이지 구조 (index.html) :
_config.scss :
/*색상과 최대 넓이*/$ 1 차 컬러 설정 : RGBA (13,110,139, .75); $ 오버레이 색상 : RGBA (24,39,51, .85); $ max width : 980px;/*배경 색상이 밝은 경우 텍스트 색상을 설정하고, 그렇지 않으면 흰색으로 설정된 경우 텍스트 색상을 설정하십시오. @if (lightness ($ color)> 70) {@return #333; } @else {@return #fff; }}/*믹서, 배경색과 텍스트 색상을 설정*/@Mixin Set-Background ($ color) {배경색 : $ color; 색상 : set-text-color ($ color);}style.scss :
@import '_config';*{마진 : 0; 패딩 : 0;}. 컨테이너 {max width : $ max-width; margin : 0 Auto;}/*쇼케이스의 배경색을 설정하고 의사 클래스를 사용하여 배경 이미지를 추가하고 배경 이미지의 z-index를 -1로 설정하십시오 (이 그림은 내부에 표시됩니다). 그런 다음 텍스트를 중간에 표시하기 위해 Flex 레이아웃*/. showcase {위치 : 상대; 높이 : 100VH; 배경색 : $ 1 차 컬러; & : {content : ''; 위치 : 절대; 왼쪽 : 0; 상단 : 0; 너비 : 100%; 높이 : 100%; 배경 : URL ( '../ IMG/PEXELS-PHOTO-533923.JPEG') NO-Repeat Center Center/Cover; Z- 인덱스 : -1; } & -inner {display : flex; 높이 : 100%; 플렉스 방향 : 열; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 텍스트 정렬 : 센터; 색상 : #fff; 글꼴 중량 : 100; H1 {font-size : 4rem; 패딩 : 1.2REM 0; } p {흰색 공간 : 사전 랩; 글꼴 크기 : 1.6rem; 패딩 : 0.85rem 0; } .btn {패딩 : .65rem 1rem; /*믹서를 사용하여 배경색과 텍스트 색상을 설정하십시오*/ @include set-background (Lighten ($ 1 차 컬러, 30%)); 국경 : 없음; 국경 : 1px 솔리드 $ 1 차 컬러; Border-Radius : 5px; 텍스트 결정 : 없음; 개요 : 없음; 전환 : 모든 .2S가 .1s가 용이합니다. /* 버튼 호버가 CSS3의 스케일을 사용하여 스케일링 효과를 설정하는 데 사용될 때*/ & : hover {@include set-background (lighten ($ 오버레이 컬러, 30%)); 국경 색 : Lighten ($ 오버레이 컬러, 25%); 변환 : 스케일 (.98); }}}}}/*원리 : 확인란을 in 지 여부에 따라 스타일을 변경하십시오 (확인란 투명성을 0으로 설정하고 z-index가 더 높아집니다). 클릭하면 메뉴가 나타납니다. 다시 클릭하면 메뉴가 사라집니다 *// *메뉴 랩에 고정되어 쇼케이스가 전체 화면을 채 웁니다. 동시에 확인란의 불투명도를 0으로 설정하십시오. 또한 햄버거의 z- 인덱스가 1으로 설정되기 때문에 Checkbox의 z-index를 2로 설정해야합니다. 그렇지 않으면 클릭이 작동하지 않습니다. 왼쪽 : 0; 상단 : 0; z- 인덱스 : 1; .Toggle {위치 : 절대; 왼쪽 : 0; 상단 : 0; 너비 : 50px; 높이 : 50px; 불투명도 : 0; z- 인덱스 : 2; 커서 : 포인터; /*확인란이 확인되면 햄버거에서 div와 의사 클래스의 회전 효과를 설정하십시오 ~ .hamburger> div {transform : rotate (135deg); /*의사 클래스는 실제로 225도 회전하며, 상단을 0으로 설정해야합니다. 그렇지 않으면 형성된 길이의 길이는 일치하지 않습니다*/ & : 이전, & : {transform : rotate (90deg); 상단 : 0; }} / * 확인란을 선택하면 회전 효과도 설정됩니다 * / & : checked : hover ~ .hamburger> div {transform : rotate (235deg); } & : 확인 ~ .menu {가시성 : 가시성; > div {변환 : 스케일 (1); > div {불투명도 : 1; }}}}}}} .hamburger {위치 : 절대; 왼쪽 : 0; 상단 : 0; 너비 : 60px; 높이 : 60px; 패딩 : 1rem; 배경색 : $ 1 차 컬러; 박스 사이징 : 국경 박스; 디스플레이 : Flex; 플렉스 방향 : 열; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 텍스트 정렬 : 센터; z- 인덱스 : 1; /*div는 중간 수평선을 생성 한 다음 위치를 상대적으로 설정 한 다음 의사 클래스를 절대로 설정 한 다음 div*/> div {position : invelate와 관련하여이를 상쇄합니다. 왼쪽 : 0; 상단 : 0; 너비 : 100%; 높이 : 2px; 배경색 : #fff; 전환 : 모든 .7은 용이합니다. /*의사 클래스를 사용하여 첫 번째 및 세 번째 수평선*/ & : 이전, & : {content : ''; 위치 : 절대; 왼쪽 : 0; 상단 : -10px; 너비 : 100%; 높이 : 2px; 배경색 : 상속; } & : {top : 10px; }}} /*선택한 메뉴 스타일을 설정* / /*너비와 높이가 100%인 메뉴를 고정 한 다음 디스플레이를 플렉스로 설정하면 메뉴가 중간에 표시되지 않습니다* / .menu {위치 : 고정; 왼쪽 : 0; 상단 : 0; 너비 : 100%; 높이 : 100%; 오버플로 : 숨겨진; 디스플레이 : Flex; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 가시성 : 숨겨진; /*메뉴를 보이지 않게 설정 한 다음 CheckBox를 선택할 때 표시되도록 설정*/ 전환 : 모든 .75S가 용이합니다. > div {@include set-background ($ 오버레이-컬러); 너비 : 200VW; 높이 : 200VH; 오버플로 : 숨겨진; 국경-라디우스 : 50%; 디스플레이 : Flex; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 텍스트 정렬 : 센터; 변환 : 스케일 (0); 전환 : 모든 .4S 용이성; > div {max-width : 90VW; 맥스 높이 : 90VH; 불투명도 : 0; 전환 : 모든 .4S 용이성; > ul> li {목록 스타일 : 없음; 글꼴 크기 : 2REM; 패딩 : .85rem 0; 텍스트 변환 : 대문자; 변환 : Skew (-5deg, -5deg) 회전 (5deg);/*텍스트 세트 틸트*/ a {색상 : 상속; 텍스트 결정 : 없음; 전환 : 색상 .4S 편의; }}}}}}}}}Hambergurmenu (햄버거 스타일 메뉴)를 구현하는 HTML+SASS에 관한 기사입니다. Hambergurmenu를 구현하는 더 많은 관련 HTML+SASS를 보려면 Wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!