pptv首页导航效果

来源：互联网发布：js获取扫描枪数据编辑：程序博客网时间：2024/04/30 15:14

周末闲时打开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动画库，就不引用了，原理都是一样的。

1 0