순수 CSS로 간단하고 아름다운 네비게이션 바 만들기

저는 CSS3 속성을 사용하여 의식적으로 단순하고 아름다운 작은 스타일의 탐색 모음을 만드는 방법을 스스로 배웠습니다. 매우 간단하고 아름다운 탐색 모음을 좋아하는 친구들이 살펴볼 수 있습니다.

먼저 HTML의 :

<nav>
		<ul>
			<li>哈哈哈</li>
			<li>吼吼吼</li>
			<li>嘿嘿嘿</li>
			<li>嘎嘎嘎</li>
			<li class="move"></li>
			<!--<li class="fly fly1"></li>
			<li class="fly fly2"></li>
			<li class="fly fly3"></li>
			<li class="fly fly4"></li>
			-->
		</ul>
	</nav>

css:

nav,
ul,
li {
	padding: 0;
	margin: 0;}
nav {
	position: relative;
	left: 35%;
	top: 20px;
	
	width: 30%;
	height: 60px;
	background-color: #66CCFF;
	
	box-sizing: border-box;
	display: inline-block;
	}
ul {
	width: 100%;
	height: 60px;
	vertical-align: middle;
	}
li {
	display: inline-block;
	
	width: 20%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
	color: #000000;
	
	transition: color 0.4s ease-in-out;
	}
li:hover {
	color: #FFFFFF;}
.move {
	display: inline-block;
	border: 4px solid #FF3333;
	height: 0px;
	background-color: #FF3333;
	
	position: absolute;
	left: 0;
	top: 56px;
	
	transition: left 0.4s ease-in-out;}
li:nth-child(1):hover~.move {
	left: 0;}
li:nth-child(2):hover~.move {
	left: 20%;}
li:nth-child(3):hover~.move {
	left: 40%;}
li:nth-child(4):hover~.move {
	left: 60%;}

코드를 입력합니다. 시작 시 float를 사용하여 목록 항목의 효과를 완성합니다. 한 줄에서는 순서가 바뀌고 여전히 블록 요소의 형태로 존재하므로 동일한 탐색 모음의 다른 콘텐츠를 한 줄로 표시할 수 없습니다. inline-block은 이 문제를 매우 잘 해결합니다. .

다른 작은 하이라이트는 li의 빈 요소를 이동 표시로 사용하고 절대적으로 첫 번째 위치에 배치한 다음 ~을 통해 각 li를 설정하는 것입니다. 자유 요소의 위치 요소에 마우스를 올렸을 때의 이동 클래스입니다. (CSS3의 새로운 속성, 특히 전환 속성이 ​​정말 유용합니다.)

ps: 동일한 원리를 사용하여 마우스를 가져갈 때 아래에서 위로 색상이 변환되기를 원했습니다. 그런데 제 생각이 잘못된 것 같습니다. 빈 요소 4개를 설정하고 높이를 0으로 설정한 다음 절대 끝 부분에 배치했습니다. 마우스를 올리면 높이가 여전히 60px이 됩니다.

이틀 전에 드디어 "CSS3 Professional Development Guide"라는 책을 읽었습니다. CSS3의 일부 속성이 표준화되지 않았지만 효과는 정말 좋습니다. 또한 CSS와 JS 사이의 경계가 모호해졌습니다. 더 이상 스스로 작업을 수행할 필요가 없지만 여전히 디자이너에게는 훨씬 더 편리합니다.

CSS를 배워야 하는 학생들은 PHP 중국어 웹사이트 CSS 비디오 튜토리얼을 주목하세요. 많은 CSS 온라인 비디오 튜토리얼을 무료로 시청할 수 있습니다!       

위 내용은 순수 CSS로 간단하고 아름다운 네비게이션 바 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!