使用CSS3动画制作导航菜单-CFANZ编程社区

使用CSS3动画制作导航菜单

效果展示

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验7_彩贝导航</title>
		<style>
			a{
				text-decoration: none;
			}
			.caibei{
				width: 100%;
				height: 100px;
				background-color: #eeeeee;
				line-height: 100px;
			}
			.logo{
				float: left;
			}
			li{
				/* position: relative; */
				float: left;
				list-style: none;
				width: 90px;
				cursor: pointer;
			}
			li a{
				margin-right: 10px;
				color: black;
			}
			li a:hover{
				color: #ff0000;
			}
			.right img{
				margin-left: 20px;
				cursor: pointer;
				transition: all 0.5s ease-in-out;
			}
			.right img:hover{
				transform: scale(1.5)rotate(360deg);
			}
			.icon1,
			.icon2{
				position: absolute;
				display: inline-block;
				width: 38px;
				height: 23px;
				top: 35px;
			}
			.icon1{
				background: url("./实验素材/header_03.png") 0 0 no-repeat;
			}
			.icon2{
				background: url("./实验素材/header_07.png") 0 0 no-repeat;
			}
			.back:hover .icon1{
				animation: zhuan 1s forwards;
			}
			.shop:hover .icon2{
				animation: hua 1s forwards;
			}
			@keyframes zhuan {
				0%{
					width: 37px;
					background: url("./实验素材/header_03.png") 0 0 no-repeat ;
				}
				30%{
					width: 45px;
					background: url("./实验素材/header_03.png") 0 0 no-repeat;
				}
				70%{
					width: 55px;
					background: url("./实验素材/header_03.png") 0 0 no-repeat;
				}
				100%{
					width: 65px;
					background: url("./实验素材/header_05.png") 0 0 no-repeat;
				}
			}
			@keyframes hua {
				0%{
					width: 37px;
					background: url("./实验素材/header_07.png") 0 0 no-repeat;
				}
				30%{
					width: 45px;
					background: url("./实验素材/header_07.png") 0 0 no-repeat;
				}
				70%{
					width: 55px;
					background: url("./实验素材/header_07.png") 0 0 no-repeat;
				}
				100%{
					width: 65px;
					background: url("./实验素材/header_09.png") 0 0 no-repeat;
				}
			}
		</style>
	</head>
	<body>
		<div class="caibei">
			<div class="logo">
				<img src="./实验素材/logo_170x46.png" alt="彩贝导航">
			</div>
			<nav>
				<ul>
					<li class="back">
						<a href="#">
							<span class="icon1"></span>
							返回商城
						</a>|
					</li>
					<li><a href="#">商旅频道</a>|</li>
					<li class="shop">
						<a href="#">
							<span class="icon2"></span>
							积分商城
						</a>|
					</li>
					<li><a href="#">商旅频道</a>|</li>
					<li><a href="#">了解彩贝</a>|</li>
					<li><a href="#">彩贝活动</a>|</li>
					<li><a href="#">个人中心</a>|</li>
				</ul>
			</nav>
			<div class="right">
				<img src="./实验素材/iconsB_11.gif" alt="">
				<img src="./实验素材/iconsB_12.gif" alt="">
				<img src="./实验素材/iconsB_13.png" alt="">
			</div>
		</div>
	</body>
</html>