css网页设计qq彩贝

Fanzongshen

于 2021-03-07 14:59:41 发布

阅读量2.5k

点赞数 5

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Fanzongshen/article/details/114484608

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.gif)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570651.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570653.gif)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570625.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570620.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/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.cn/20210307145901878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZhbnpvbmdzaGVu,size_16,color_FFFFFF,t_70#pic_center)

Fanzongshen

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css网页设计qq彩贝

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.gif)![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570651.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030714570656.png)![在这
复制链接

扫一扫

专栏目录