个人主页项目总结
Html
分为5页和一个侧面信息栏
首页
项目页
前端技能页：正面到反面的翻转动画
<div class="front">
<div class="backface">
个人经历页：列表形式dl、dt、dd
联系页
右侧导航栏按钮：ul、li
左侧侧面信息栏
Css
考虑兼容性，
@keyframes
@-webkit-keyframes
-webkit-transform
transform
添加阿里巴巴矢量图标库（复制相关css代码和文件即可）
第一页-首页
第二页-项目页：
1每个项目display: table; 作为块级表格来显示，每个项目中会有一个图标display: table-cell; 作为一个表格单元格显示，对图标倒圆角；第二部分是文本，display: table-cell; 第三部分是按钮部分，也要display: table-cell;
2对每个项目添加动画，左边三个从左边划入，右边三个从右边划入，采用动画帧的方法，@keyframes fadeInRight设置初始0%和最终100%对应的效果，初始透明度为0，x方向位置设置为-100%；右边三个写法类似；
3为了让这6个项目版块能依次显示，使用animation-delay: 0s分别为6个版块设置动画延时时间；
4第一页的最下端中间有个动态的向下按钮，动画帧实现y值变化
第三页-前端技能页：
1每个技能版块display: inline-block;添加transform-style: preserve-3d为翻转动画作准备，transition: transform .8s ease;当鼠标移入该板块transform: rotateY(180deg)；
2背面：text-indent: 2em;文字缩进，添加backface-visibility: hidden; 和动画transform: rotateY(180deg) translateZ(1px);
3给每个版块设置一个初始动画，一进入就旋转-360度，只设置了动画帧的0%，同样也使用了使用animation-delay
第四页-个人经历页：
总共有三个经理板块，每个版块开始时宽度只有50px，当鼠标移入时宽度变为500px，实现动画。
EXP1的竖向显示，它绝对定位在每个版块的最左边，宽度50px，高度100%，word-wrap: break-word;结合letter-spacing: 20px（增加或减少字符间的空白）最终实现纵向显示。
把dd元素对应的内容display: list-item; /*此元素会作为列表显示。*/，list-style-type: circle /*空心圆*/
第五页-联系页：
1包含五行文字和两个链接，利用动画实现它们依次显示，刚开始透明度都设为0，
2为每行文字设置动画，和第二页项目版块类似，不同的是这里改变y方向的值transform: translate3d(0, 2000px, 0)
3同样也使用了使用animation-delay
4最后一页的最下方中间有一个与第一页相反的向上图标，类似的设置动画（动画帧）使其上下弹动，与第一页不同之处在于要对图标旋转transform: translate(0, 0) rotate(180deg)
右侧导航栏按钮：ul、li
1设置宽度、高度、固定位置，自适应居中（top: 50%; margin-top: -174px）
2右侧栏的每个图标有一个对应的说明（放在html中的span中）设置其display: none;开始时不显示它，鼠标在图标上时在显示对应的文字display: block；
3当前页对应的图片适当放大以突出显示transform: scale(1.3);
左侧侧面信息栏
1位置固定position: fixed;（采用margin-top自适应居中）
2添加箭头所需的空间，通过设置right: -39px;使其显示在信息栏的外部，
3添加头像，2像素白色边框
4以列表的形式显示信息ul、li，每个li设定对应的底部边框和底部边距，且选中最后一个li不设置边框
当屏幕宽度小于768px时，重新设置对应的尺寸（采用rem方式），@media (max-width: 768px)
Js
自适应字体大小，根据屏幕的宽度确定字体大小（网易采用的方式）
监听移动端手机方向window.addEventListener("orientationchange" : "resize", function () {})
window.screen.orientation.angle
1翻页并设定a值
首先执行翻页。
通过判断页码（s值）设定对应的a值，用a值判断是否显示左侧信息栏。
首先设定第一页和最后一页对应的a值。
第一页，不显示左侧信息栏，a设置为1；
当翻到最后一页时，要显示左侧信息栏，a设置为2，且需要利用setTimeout设定时间，使其在最后一页的页面内容显示完毕后再显示。
2翻页
利用css动画实现翻页，$(".container").css({transform: "translateY(" + i + "px)"})，其中i的值要根据翻到第几页（s值，初始为0）来决定，并对图标的状态进行更新，即移除原图标的状态$(e).removeClass("on")，并将目标页对应的图标加上对应的css状态$(e).eq(s).addClass("on")。
3根据a值判断是否显示左侧信息
获取左侧信息栏的宽度，由于它是绝对定位，所以利用.CSS方法设置对应的left值即可实现显示和隐藏，且要实现旁边箭头方向的切换，添加或删除inverse类
4第4页的动画
有可能从第三页到第四页，也有可能从第五页到第四页，每次进入第四页，都要自动执行动画，三个个人经历版块利用setTimeout设定不同的时间依次显示（移除当前cur类，再将cur添加到对应的元素上，三个板块实现三次移除添加），自动动画执行完毕后，再添加鼠标动画，$(".history").on("mouseover", function() {})，将其也包含在setTimeout且设定更长的时间。
5滚轮事件、键盘事件
给整个文档添加事件，$(document).on("mousewheel keydown DOMMouseScroll",…)，根据event对象的t.wheelDelta || -t.detail;判断其值大于0（或40 == t.keyCode）还是小于0（或38 == t.keyCode）
6移动端触摸滑动事件
$(document).on({touchmove: function(e) {e.preventDefault()},
touchstart: function(e) {n = e.touches[0].clientX,i = e.touches[0].clientY},
touchend: function(r) {r.changedTouches[0].clientX…})
7左侧信息栏按钮和右侧对应的信息栏按钮点击后是否显示左侧信息栏
每次点击后阻止冒泡和默认事件，应该重新判断a值，再执行3。
考虑移动端应加上touchend阻止默认事件
8点击右侧信息栏
$(".nav-right").find(".item").each(function(e) {5 !== e && $(this).click(function(t) {t.stopPropagation(),s = e,o()})}),这里e是遍历时对应的索引，t是event对象。
9技能版块翻转（针对移动端，鼠标点击翻转，而屏幕大于769px时使用css实现鼠标放入就翻转），当触摸skill版块时，执行touchstart，利用setTimeout实现800ms后执行touchend $(".skill").on({touchstart: function() {…},touchend: function() {setTimeout(function() {…},800)}}),通过添加删除.inverse类，使被触摸的技能版块翻转180度。
