admin管理员组文章数量:1568763
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570656.png)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570656.gif)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570651.png)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570656.png)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570653.gif)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570625.png)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570620.png)
![在这里插入图片描述](https://img-blog.csdnimg/2021030714570613.png)
```css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0;
}
header.top{
height: 90px;
background-image: linear-gradient(180deg,#FFF 0px 40px,#ECECEC);
}
.top .wrap{
width: 1100px;
height: 90px;
margin: 0 auto;
}
.wrap .logo,.wrap .nav{
float: left;
overflow: hidden;
}
.wrap .logo{
width: 170px;
height: 90px;
background: url(images/logo_170x46.png) no-repeat center;
}
.wrap .links{
float: right;
}
.wrap .nav{
height: 90px;
margin-left: 70px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
line-height: 90px;
}
a{
text-decoration: none;
color: #000;
}
.nav li a{
display: block;
margin: 10px 10px 0px;
position: relative;
}
.nav li a:hover{
color: #E64E3E;
}
li.split{
width: 1px;
background-color: #000000;
height: 20px;
margin-top: 45px;
}
.links{
height: 90px;
}
.links a{
margin: 0 10px;
display: block;
}
.links a img{
transition: all 1s ease;
vertical-align: middle;
}
.links a:hover img{
transform: rotate(360deg);
}
.tips div{
width: 38px;
height: 23px;
position: absolute;
left: 0;
top: 10px;
background-repeat: no-repeat;
background-position: left;
}
.tips1{
background-image: url(images/header_03.png);
}
.tips2{
background-image: url(images/header_07.png);
}
.tips:hover .tips1{
background-image: url(images/header_05.png);
background-position-x: 1px;
width: 66px;
animation: move 1s ease-out forwards ;
}
.tips:hover .tips2{
background-image: url(images/header_09.png);
animation: move 1s ease-out forwards ;
}
/*利用动画,宽度从38px平滑的变成66px*/
@keyframes move{
/*第一帧*/
from{
width: 38px;
}
/*最后一帧*/
to{
width: 66px;
}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<div class="logo"></div>
<nav class="nav">
<ul>
<li>
<a class="tips" href="#">
返回商城
<div class="tips1"></div>
</a>
</li>
<li class="split"></li>
<li>
<a href="#">
商旅频道
</a>
</li>
<li class="split"></li>
<li>
<a class="tips" href="#">
积分商城
<div class="tips2"></div>
</a>
</li>
<li class="split"></li>
<li>
<a href="#">
商旅频道
</a>
</li>
<li class="split"></li>
<li>
<a href="#">
了解彩贝
</a>
</li>
<li class="split"></li>
<li>
<a href="#">
彩贝活动
</a>
</li>
<li class="split"></li>
<li>
<a href="#">
个人中心
</a>
</li>
</ul>
</nav>
<div class="links">
<ul>
<li>
<a href="#"><img src="images/iconsB_11.gif" ></a>
</li>
<li>
<a href="#"><img src="images/iconsB_12.gif" ></a>
</li>
<li>
<a href="#"><img src="images/iconsB_13.png" ></a>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
## 网页设计qq彩贝实现动画效果
![最终效果](https://img-blog.csdnimg/20210307145901878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZhbnpvbmdzaGVu,size_16,color_FFFFFF,t_70#pic_center)
版权声明:本文标题:css网页设计qq彩贝 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727639533a1123281.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论