pptv首页导航效果

周末闲时打开pptv看直播，然后发现它的导航改版了，还是比较酷的。出于对同行对热爱，自己也试着实现了一下：

demo：http://output.jsbin.com/pomimajidu
pptv效果：www.pptv.com

html：

    <ul class="nav"><li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目A<i class=""></i></a></li><li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目B<i class=""></i></a></li><li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目C<i class=""></i></a></li><li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目D<i class=""></i></a></li><li><a href="" id="pagenav_tv" channel="2" target="_parent">栏目E<i class=""></i></a></li></ul>

css

        * {padding: 0;margin: 0;}ul {margin: 100px 100px;}ul li {float: left;list-style: none;}ul li a {position: relative;float: left;display: inline;height: 40px;line-height: 40px;margin: 0 18px 0 0;font-size: 14px;font-family: \5FAE\8F6F\96C5\9ED1;color: #333;background: #fff;text-decoration: none;outline: none;transition: all .5s linear;}ul li a:hover {color: #3194f6;}ul li a:hover i {bottom: -22px;}ul li a i {position: absolute;left: 35%;bottom: 0;width: 10px;height: 20px;background: url(http://static9.pplive.cn/pub/flagment/v_20150612114125/modules/g-1408-hd/images/icon-drop-tj.png) no-repeat;transition: all .5s ease-in;z-index: -1;}

当然我的效果与它还是有一定区别，它的动画看起来更和谐，因为它不仅使用了transition还使用了animation动画。应该是一个swing的动画效果，由于我本地没有建立animation动画库，就不引用了，原理都是一样的。

pptv首页导航效果相关推荐

仿照google主页面布局html代码,超酷仿GOOGLE首页导航菜单效果
超酷仿GOOGLE首页导航菜单效果 window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,1806 ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
仿淘宝网站的TabPage导航效果
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
12-Flutter移动电商实战-首页导航区域编写
12-Flutter移动电商实战-首页导航区域编写 1.导航单元素的编写从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套 ...
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
spa项目开发首页导航左侧菜单
前言:今天要分享的知识是spa项目完成首页导航以及左侧菜单码字不易,转载请说明!!! 目录目标效果图一.mock.js ①什么是Mock.js ②安装mockjs依赖 ③配置开发环境及生产环境 ...
html5一键导航代码,站长有福了-让网址一键添加百度首页导航
自从受到了领导的熏陶之后,就想做一个针对企业运维IT人员的网站,收集一些对企业运维有价值的网站,也推荐一些安全信息给运维人员,在工作中发现中国It运维人员缺少对安全的认知,目前网站已经上线,可以到sh ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
bilibili首页导航
bilibili导航实现话说今天实验课,一如既往的打开阿b准备学(shua)习(fan),突然发现阿b首页导航还挺好看,恰巧最近在复习原生js,就顺带在实验课上实现了这个效果.(因为想到哪写哪,啥都 ...

pptv首页导航效果

pptv首页导航效果相关推荐

最新文章

热门文章