想装逼下搞个在线简历，然后顺便用些CSS3与HTML5的一些技术，再顺带把响应式也加上去去，在移动端也能看到。
不过我的配色low了点，还望见谅......
一、首页Loading效果
这次就打算把几个功能全部写在一起展示啦，这样就得有个Loading页面，先把该载入的都载入进来。不然的话，代码没载入进来，这效果都看不到的，体验会很差。
前面写过一篇制作Loading效果的文章《多种方法实现Loading（加载）动画效果》，这次挑Sonic.js来实现下。
1、选了个我感觉比较酷的Loading样式：
2、然后想来个背景色，全屏的那种，我用了个position绝对定位来做。
.loading{ background:#00BFF3; height:100%; text-align:center; position: absolute; top: 0; width: 100%; }
3、在屏幕中间加个框，里面再加点阴影进来，暂时先把底色去掉
这里涉及到了多层阴影，box-shadow中有多个阴影设置，可以在线调试阴影效果，第一个可以做多层调试。
也可以在这里调试，不过就是第二个那里调试的话不能做出多层的效果。
.loading .shadow{ margin: 100px auto 0; background: #fff; width: 70%; padding: 20px 0; position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset; -ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset; }
接下来我想在底部与两边做点阴影加深操作，这里会使用到伪类:after,:before。z-index是让两个伪类的效果被盖在下面，而top、bottom等是为了控制阴影的位置，如果将z-index的值加大点就会看到两个伪类的效果是一个长方形。这里为了能将阴影显示出来，我得修改下.loading的样式，添加z-index属性，修改背景颜色其他属性不变。
.loading .shadow:before, .loading .shadow:after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); -o-box-shadow:0 0 20px rgba(0,0,0,0.8); -ms-box-shadow::0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10%; bottom:0; left:10px; right:10px; }
.loading{ background:#F6FFD1; z-index:-2; }
4、添加一个隐藏loading页面的脚本，loading页面在DOM绑定，图片载入后就不需要显示了。
window.onload = function() { //隐藏loading页面 $('#loading_container').animate({translateY:'-100%'}, 1000,'linear'); };
我以前也做过一些CSS3动画的记录，可以在《CSS3中的动画效果记录》查看到。
二、底部菜单栏
1、以往的菜单栏布局不是用float就是用display:inline，这次我想试试用flex布局，可以快速的布局在一列，下图是部分菜单
.nav_container .flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; }
2、接着我想在选中的那栏加一个三角形，以前写小三角非常复杂，有的方法是多写一个div然后绝对定位，或者是用图片等。现在有了after伪类，可以很方便的做三角形效果，注意下面的border，然后只要修改border-bottom-color就可以改变三角形的方向。
.nav_container .flex > a.cur:after{ bottom: 100%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #821134; border-width: 1.2em; left: 50%; margin-left: -1.2rem; }
3、添加选中特效，本来使用的click，但是在手机上面使用click是有300ms延时的。有多种解决方案，有一种是用插件fastclick，来解决那300ms延时，但是我这里都已经引用了zepto中的touch文件，所以就不想再引入额外的脚本。
我就用一串正则来判断是否是手机访问，是的话就用tap事件，不是的话就用click。这串正则的健壮性还不得而知，是在网上看到的，点击可以查看。
var event = 'click'; // device detection if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) { event = 'tap'; } $('#nav').delegate('a', event, function() { $(this).addClass('cur').siblings().removeClass('cur'); var row = $(this).index(); $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'ease-in-out', function() { if(row != 3) return; $.each(pieids, function(index, item) { if(pies.length <= index) { var pie = draw_pie(piedatas[index], item); pies.push(pie); } }); }); return false; });
