以前一直想自己写几篇属于自己博客，但是由于工作原因以及一些生活的上的因素，导致一直都没能如愿，今天加班，正好事儿还没过来，真好留了时间给我写一篇博客。
在上一家公司的时候，主要从事的是移动端的开发，由于基于移动端有了相对来说很成熟的翻页框架，所以基本上很少会自己写一些翻页的效果，以及翻页的动画效果，之前的公司的模式更像是外包模式，很忙，也基本没有时间去自己研究那些框架的搭建和基层代码，换公司以后，公司有这个需求，要做一个这样的效果，然后自己就稍微研究了一下做法，想了一些逻辑来实现，如果有什么不对的，或者麻烦的，请各位大神帮忙指点。
话不多说了，开始贴代码吧：<body><section class="wrapp"><div class="viewpoint"><a style="z-index:5;"><img src="imgs/xhc_logo.png"></a><a style="z-index:4;"><img id="downicon" src="imgs/down.png"></a><ul class="slidethumb"></ul><div class="containner"><!–/*<img src="imgs/section0_80d2d2ee.jpg" >*/–><div class="data-1 page"></div><div class="data-2 page"><div class="xiebottom"></div><div class="data-2-animation"><img class="data-2-floatimg" src="imgs/section1-phone1_e4888d2a.png"><img class="data-2-floatimg floatimg2" src="imgs/section1-phone2_095728f7.png"><img class="data-2-move1" src="imgs/section1-group1_62679686.png"><img class="data-2-move2" src="imgs/section1-group3_23488e5d.png"></div></div><div class="data-3 page"><div class="xiebottom"></div></div></div></div></section></body> 我只是做了一个相应的demo，所以HTML写的比较随意，大神们请别见怪。
下面是一些css的样式
<style>/*基本UI样式*/*{margin:0;padding:0;}.viewpoint{min-width:320px;position:absolute;top:0;left:0;width:100%;height:100%;/*min-height:568px;*/overflow:hidden;}.containner{position:absolute;top:0;left:0;width:100%;height:500%;}.viewpoint a{position:absolute;top:7%;left:10%;width:150px;height:40px;z-index:1;}.viewpoint a img{width:100%;height:100%;}.viewpoint a:nth-child(2){max-width:40px;min-width:15px;top:94%;left:48%;width:2%;height:auto;}.data-1{width:100%;height:20%;position:absolute;overflow:hidden;background-image:url("../imgs/section0_80d2d2ee.jpg");background-size:100% auto;background-repeat:no-repeat;background-color:#2996D7;background-position:50% 50%;}.data-2{width:100%;height:20%;top:20%;position:absolute;overflow:hidden;background:#3d475a;}.data-2 .xiebottom{position:absolute;height:100%;width:100%;top:100%;left:0;transform-origin:left top;-webkit-transform-origin:left top;transform:skewY(-7deg);-webkit-transform:skewY(-7deg);background:#ff5d43;}.data-2 .data-2-animation{position:absolute;width:25%;max-width:160px;left:10%;top:20%;}.data-2 .data-2-animation .data-2-floatimg{position:absolute;width:100%;height:auto;}.floatimg2{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/}.data-3{top:40%;width:100%;height:20%;position:absolute;overflow:hidden;background-color:#ff5d43}.data-3 .xiebottom{position:absolute;height:100%;width:100%;top:100%;left:0;transform-origin:right top;-webkit-transform-origin:right top;transform:skewY(4deg);-webkit-transform:skewY(4deg);background:#28d5b9;}.slidethumb{position:absolute;list-style:none;max-width:10px;max-height:200px;width:1%;height:30%;top:35%;left:95%;z-index:3;}.slidethumb li{list-style:none;max-height:200px;width:100%;margin-bottom:10px;text-align:center;transition:all .5s;}.slidethumb li div{width:2px;height:100%;background-color:#FFF;margin:0 auto;}.slidethumb li:hover{cursor:pointer;box-shadow:inset 0 0 8px #FFFFFF;}.data-2-move1{position:absolute;max-width:120px;width:75%;height:auto;left:13.3%;top:0%;filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/}.data-2-move2{position:absolute;max-width:36px;width:25%;height:auto;left:3%;top:30.5%;filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/}/*添加动画样式*/.adddata-1-phone{animation:data-1-floatimg-floatimg2 3s 1.5s forwards;-webkit-animation:data-1-floatimg-floatimg2 3s 1.5s forwards;}.viewpoint a:nth-child(2){animation:fadeinout 1s infinite;-webkit-animation:fadeinout 1s infinite;}.adddata-2-move1{animation:data-2-move1-slide 2s forwards;-webkit-animation:data-2-move1-slide 2s forwards;}.adddata-2-move2{animation:data-2-move2-slide 2s forwards;-webkit-animation:data-2-move2-slide 2s forwards;}/*动画效果*/@keyframes data-2-move2-slide{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/left:3%;transform:rotate(0);}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/left:39.5%;transform:rotate(720deg);}}@-webkit-keyframes data-2-move2-slide{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/left:3%;transform:rotate(0);}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/left:39.5%;transform:rotate(720deg);}}@keyframes data-2-move1-slide{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/top:0;}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/top:18%;}}@-webkit-keyframes data-2-move1-slide{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/top:0;}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/top:18%;}}@keyframes data-1-floatimg-floatimg2{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/left:0;}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/left:150%;}}@-webkit-keyframes data-1-floatimg-floatimg2{from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/left:0;}to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/-moz-opacity:1; /*Firefox私有，透明度50%*/opacity:1;/*其他，透明度50%*/left:150%;}}@keyframes fadeinout{0%{filter:alpha(opacity=1); /*IE滤镜，透明度0%*/-moz-opacity:1; /*Firefox私有，透明度0%*/opacity:1;/*其他，透明度0%*/top:94%;}100%{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/top:96%;}}@-webkit-keyframes fadeinout{0%{filter:alpha(opacity=1); /*IE滤镜，透明度0%*/-moz-opacity:1; /*Firefox私有，透明度0%*/opacity:1;/*其他，透明度0%*/top:94%;}100%{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/-moz-opacity:0; /*Firefox私有，透明度50%*/opacity:0;/*其他，透明度50%*/top:96%;}}</style> 这里的css我没有使用less或者sass进行预处理，，只是随手写了一下样式，希望大神可以给一些样式的规范意见供小弟去参考。
下面是jq了，首先得引入相应的jq的min包，然后可以开始写自己的代码了
『 不可能 』只存在於蠢人的字典里
