导航栏帧动画效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.nav,.bar{
				list-style: none;
				overflow: hidden;
			}
			.nav>li{
				float: left;
				position: relative;
				margin: 0 8px;
				padding: 4px 6px;
			}
			.nav>li .border{
				display: none;
			}
			.nav>li .bor1{
				position: absolute;
				/* top: 0px;
				left: 0px; */
				top: -22px;
				left: -4px;
				width: 8px;
				height: 8px;
				border-left: 2px solid red;
				border-top: 2px solid red;
			}
			.nav>li .bor2{
				position: absolute;
				/* top: 0px;
				right: 0px; */
				top: -22px;
				right: -4px;
				width: 8px;
				height: 8px;
				border-right: 2px solid red;
				border-top: 2px solid red;
			}
			.nav>li .bor3{
				position: absolute;
				/* bottom: 0px;
				right: 0px; */
				bottom: -2px;
				right: -4px;
				width: 8px;
				height: 8px;
				border-right: 2px solid red;
				border-bottom: 2px solid red;
			}
			.nav>li .bor4{
				position: absolute;
				/* bottom: 0px;
				left: 0px; */
				bottom: -2px;
				left: -4px;
				width: 8px;
				height: 8px;
				border-left: 2px solid red;
				border-bottom: 2px solid red;
			}
			.nav>li i{
				display: inline-block;
				margin-left: 6px;
				width: 0;
				height: 0;
				border: 4px solid;
				border-color: #999 transparent;
				border-bottom: 0;
				transform: rotate(0deg);
				transition: transform .2s ease-in 0s;
			}
			.nav>li:hover i{
				transform: rotate(180deg);
				transition: transform .2s ease-in 0s;
			}
			.nav>li:hover .border{
				display: block;
				animation: nav-move 3s forwards;
			}
			.nav>li:hover .bar{
				display: block;
			}
			.bar{
				display: none;
				margin-bottom: 4px;
				text-align: center;
				box-shadow: 2px 2px 3px #999;
			}
			a{
				color: #333;
				text-decoration: none;
			}
			a:hover{
				color: orange;
			}
			
			@keyframes nav-move{
			   0%{
			        opacity: 0;
			        transform: scale(0.4,0.4);
			    }
			    50%{
			        opacity: 1;
			        transform: scale(1.1,1.1);
			    }
			    100%{
			        opacity: 1;
			        transform: scale(1,1);
			    }
			}
		</style>
	</head>
	<body>
		<nav class="navhaead">
			<ul class="nav">
				<li><a href="javascript:;">首页</a>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</li>
				<li><a href="javascript:;">精品课程<i></i>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</a>
					<ul class="bar">
						<li><a href="javascript:;">免费课程</a></li>
						<li><a href="javascript:;">天天课程</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">在线直播<i></i>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</a>
					<ul class="bar">
						<li><a href="javascript:;">免费课程</a></li>
						<li><a href="javascript:;">web课程</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">IT班</a>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</li>
				<li><a href="javascript:;">java班</a>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</li>
				<li><a href="javascript:;">题库</a>
					<div class="border">
						<div class="bor1"></div>
						<div class="bor2"></div>
						<div class="bor3"></div>
						<div class="bor4"></div>
					</div>
				</li>
			</ul>
		</nav>
	</body>
</html>

 

posted @ 2023-08-11 17:05  JackieDYH  阅读(9)  评论(0)  编辑  收藏  举报  来源