IMWeb前端学习笔记——Day7

任务：导航栏的制作

  如果想制作一个个人博客，首先应该搞定导航栏。导航栏对于一个网站来说，是必不可少的东西，因为它总能够给访问的用户带来方便。

  下图是我的个人博客的导航栏，非常简洁：

  这个导航栏没有用JS，因为我认为我需要的好看的效果利用css3属性就能够完成，以下是导航栏的HTML源码：

<header><div class="logo"><a class="link link--yaku" href="#"><span>閏</span><span>土</span><span>在</span><span>流</span><span>浪</span><span>の</span><span>B</span><span>l</span><span>o</span><span>g</span></a></div><div class="nav"><a class="index link link--mallki" href="index.html">首页<span data-letters="首页"></span><span data-letters="首页"></span></a><a class="article link link--mallki" href="#">文章<span data-letters="文章"></span><span data-letters="文章"></span></a><a class="about link link--mallki" href="#">关于我<span data-letters="关于我"></span><span data-letters="关于我"></span></a></div></header>

css样式：

/*头部*/header{width: 100%;height: 70px;background-color: #666;overflow: hidden;clear: both;}/*logo*/header div.logo{float: left;padding:11px;}/*导航条*/header div.nav{float: right;width: 50%height:70px;margin-right: 100px;}header div.nav a{display: block;float: left;text-align: center;line-height: 70px;}header div.nav .article{margin-left: 80px;}header div.nav .about{margin-left: 80px;}/*头部完成*/

因为其中文字的样式较为复杂，所以引入了一个单独的css文件来设置文字样式效果：

/*link styles */.link {outline: none;text-decoration: none;position: relative;font-size: 8em;line-height: 1;color: #9e9ba4;display: inline-block;}/* Mallki */.link--mallki {font-weight: 400;color: #D3D3D3;font-family: 'Dosis', sans-serif;font-size: 20px;-webkit-transition: color 0.5s 0.25s;transition: color 0.5s 0.25s;overflow: hidden;}.link--mallki:hover {-webkit-transition: none;transition: none;color: transparent;}.link--mallki::before {content: '';width: 100%;height: 6px;margin: -3px 0 0 0;background: #fff;position: absolute;left: 0;top: 50%;-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);-webkit-transition: -webkit-transform 0.4s;transition: transform 0.4s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);}.link--mallki:hover::before {-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);}.link--mallki span {position: absolute;height: 50%;width: 100%;left: 0;top: 0;overflow: hidden;}.link--mallki span::before {content: attr(data-letters);color: red;position: absolute;left: 0;width: 100%;color: #fff;-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;}.link--mallki span:nth-child(2) {top: 50%;}.link--mallki span:first-child::before {top: 0;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}.link--mallki span:nth-child(2)::before {bottom: 0;-webkit-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0);}.link--mallki:hover span::before {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);transition-timing-function: cubic-bezier(0.2,1,0.3,1);}/* Yaku */.link--yaku {color: #D3D3D3;font-family: 'Playfair Display';font-weight: 400;text-transform: uppercase;font-size: 40px;overflow: hidden;padding: 0 0 10px;}.link--yaku::before {content: '';position: absolute;height: 100%;width: 100%;border-width: 2px 0;border-color: #282828;border-style: solid;left: 0;-webkit-transform: translate3d(-101%,0,0);transform: translate3d(-101%,0,0);-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;}.link--yaku:hover::before {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}.link--yaku span {display: inline-block;position: relative;-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);transform: perspective(1000px) rotate3d(0,1,0,0deg);-webkit-transition: -webkit-transform 0.5s, color 0.5s;transition: transform 0.5s, color 0.5s;}.link--yaku:hover span {color: #1e1a1b;-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);transform: perspective(1000px) rotate3d(0,1,0,360deg);}.link--yaku span:nth-child(4),.link--yaku:hover span:first-child {-webkit-transition-delay: 0s;transition-delay: 0s;}.link--yaku span:nth-child(3),.link--yaku:hover span:nth-child(2) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}.link--yaku span:nth-child(2),.link--yaku:hover span:nth-child(3) {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}.link--yaku span:first-child,.link--yaku:hover span:nth-child(4) {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}

动画效果如下：