使用CSS3动画制作导航菜单

最新推荐文章于 2024-07-04 10:00:00 发布

无良小老板

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量1.9k

点赞数 2

分类专栏： HTML5 文章标签： CSS3 动画导航菜单过渡效果鼠标悬停

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/124572503

版权

HTML5 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

使用CSS3动画制作导航菜单

1、使用定位属性把图片“赚”和“花”设置到相对应的位置上
2、使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”，
并且是从左到右缓慢展开的效果
3、使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360°

效果展示

代码展示

<!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>

无良小老板

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用CSS3动画制作导航菜单

使用CSS3动画制作导航菜单1、使用定位属性把图片“赚”和“花”设置到相对应的位置上2、使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”，并且是从左到右缓慢展开的效果3、使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360°效果展示代码展示<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫