使用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>