网站右侧导航条的玩法

最近心情很不好，各种工作生活上面的事情，让我很是受伤，刚出来工作感觉程序员确实是个神奇的行业，一个个都觉得自己的智商挺高的，哎，每天起早贪黑的上下班，还天天受气，真是日了够了，一个人一座城，一行代码到天明。

或许真的老了，我居然前所未有的想拥有一个属于自己的家，渴望能吃到几口热喷喷的饭菜，能和最爱的人说上几句掏心掏肺的话，能一起见证风风雨雨。然而并没有什么用，就像js设计模式里面说的一个例子一样，追一个女孩子最好的办法是送她一辆宝马，其他都是次要的。呵呵

我差点一气之下辞职，我也不想和一群不喜欢的人打交道，联调什么后台什么接口，想了很久很久，可我 发现我始终有对前端的热爱，虽然也菜鸟，虽然很受伤，虽然一切被虐，就随它吧，不管今天多么受伤，我是真喜欢折腾一些前端的技术，虽然不喜欢整什么框架什么逻辑什么这什么那。热爱你说热爱的，准没错

不说了，周末玩了一下导航效果，是w3ctech第二届css大会官网上面的导航效果，自己做了一下改进，demo：
http://codepen.io/tianzi77/pen/doaEaq

样子就如这样吧

hover的时候有一个动画渐变的过程

html结构：

    <ul id="nav">
        <li><a href="" target="_blank">山穷水尽</a>
        </li>
        <li class="active"><a href="" data-section="about"><span data-letters="转眼迷归路">转眼迷归路</span></a>
        </li>
        <li><a href="" data-section="speakers">再也不会</a>
        </li>
        <li><a href="" data-section="schedule">自作多情</a>
        </li>
        <li><a href="" data-section="location">By</a>
        </li>
        <li><a href="" data-section="sponsors">TZ</a>
        </li>
        <li><a href="/?l=en">TZ</a>
        </li>
    </ul>

css样式：

        body {
            background: -webkit-linear-gradient(top left, #abcdef, lightyellow);
        }

        ul,
        li,
        a {
            margin: 0;
            padding: 0;
        }

        #nav {
            position: fixed;
            top: 15%;
            right: 2em;
            border-radius: 2px;
            background: black;
            z-index: 100;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #nav li {
            width: 1.3em;
            padding: 10px 0;
            line-height: 1;
            margin: 0 4px;
            -webkit-transition: all 0.3s ease-in-out;
            border-top: 1px solid #abcdef;
        }

        #nav li:first-child {
            border: none;
        }

        #nav a {
            color: rgba(255, 255, 255, 0.5);
            -webkit-transition: all 0.5s linear;
        }

        #nav a:hover {
            color: #fff;
        }

        li:hover {
            background: -webkit-linear-gradient(left bottom, lightpink, lightblue);
            border-radius: 30%;
            border: none;
        }