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)
![在这里插入图片描述](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="data:images/iconsB_11.gif" ></a></li><li><a href="#"><img src="data:images/iconsB_12.gif" ></a></li><li><a href="#"><img src="data: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)

css网页设计qq彩贝相关推荐

背景的css代码,CSS网页设计实例:设计制作大背景网页_css
网页制作Webjx文章简介:如何用css实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在 ...
纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）
纯HTML+CSS网页设计期末作业(海贼王主题网站--图片可换,主题可换) 博主:命运之光专栏:web网页制作大作业网页最底下有视频可以观看网页效果,喜欢的可以在博主主页资源里免费下载(●'◡'● ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
HTML+CSS网页设计期末课程大作——XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS网页设计期末课程大作--XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
75佳精美的 CSS 网页设计作品欣赏（系列一）
互联网高速发展中,每天都有成千上万的新网站诞生.最早的网站是没有样式的,后来引入了 CSS 用来格式化结构化的网页内容,用于精确的控制网页的布局和外观.然而因为浏览器兼容性问题,要使用 CSS 制作出 ...
HTML+CSS网页设计期末课程大作——运动系列NBA篮球主题(7页) 大学生运网页作品篮球设计作业模板
HTML+CSS网页设计期末课程大作--运动系列NBA篮球主题(7页) 大学生运网页作品篮球设计作业模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
HTML+CSS网页设计期末课程大作——体育足球(5页面)
HTML+CSS网页设计期末课程大作--体育足球(5页面) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装 ...
html颜色代码大全word,DIV+CSS网页设计之网页配色方案
DIV+CSS网页设计之网页配色方案合集包含了目前常用的网页设计配色方案及其分析,网站的色彩就像是人的外表一样,如果打扮得美观大方,就会给人一种魅力四射的感受,而不修边幅则让人感到粗糙毛草,因此,网页 ...
HTML+CSS网页设计期末课程大作——校园篮球网页(12页) 关于运动的HTML网页设计-----篮球
HTML+CSS网页设计期末课程大作--校园篮球网页(12页) 关于运动的HTML网页设计-----篮球常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...

css网页设计qq彩贝

css网页设计qq彩贝相关推荐

最新文章

热门文章