網站右側導航條的玩法

最近心情很不好，各種工作生活上面的事情，讓我很是受傷，剛出來工作感覺程序員確實是個神奇的行業，一個個都覺得自己的智商挺高的，哎，每天起早貪黑的上下班，還天天受氣，真是日了夠了，一個人一座城，一行代碼到天明。

或許真的老了，我居然前所未有的想擁有一個屬於自己的家，渴望能吃到幾口熱噴噴的飯菜，能和最愛的人說上幾句掏心掏肺的話，能一起見證風風雨雨。然而並沒有什麼用，就像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;
        }