小米4-整屏上下滚动效果（使用jquery.mousewheel.js）

 

其中经典CSS代码为：

.mi4-content-feature .feature-font-public{ position:absolute; left:50%; top:50%;}
.mi4-content-feature .mi4-content-feature-c .feature-font{ z-index:2; width:680px; margin-left:-560px; margin-top:-260px;}
@media (max-height:790px){.mi4-content-feature .mi4-content-feature-c .feature-font{ margin-top:-180px;}}
.mi4-content-feature .feature-font-public .feature-font-title{ color:#fff; font-size:48px; line-height:60px; font-weight:normal;}
@media (max-height:790px){.mi4-content-feature .feature-font-public .feature-font-title{ font-size:36px; line-height:45px;}}
.mi4-content-feature .feature-font-public .feature-font-title b{ font-style:normal; font-weight:normal; color:#ee330a;}
.mi4-content-feature .feature-font-public .feature-font-title-info{ font-size:30px; line-height:40px; margin-top:10px; color:#fff; font-weight:normal;}
.mi4-content-feature .feature-font-public .feature-font-detail{ margin-top:20px; color:#c3c3c3; font-size:16px; line-height:25px;}
@media (max-height:790px){.mi4-content-feature .feature-font-public .feature-font-detail{ font-size:14px;}}
.mi4-content-feature .feature-font-public .feature-font-detail a{ color:#ee330a;}
.mi4-content-feature .mi4-content-feature-c .feature-img{ position:absolute; left:50%; top:50%; z-index:1; width:703px; height:1235px; background-image:url(images/mi4-fea-31.jpg); background-repeat:no-repeat; background-position:center center; margin-top:-582px; margin-left:-110px;}
@media (max-height:790px){.mi4-content-feature .mi4-content-feature-c .feature-img{ width:500px; background-size:500px;}}

@-webkit-keyframes mid-to-topright{0%{-webkit-transform:translate(-400px,1080px);-moz-transform:translate(-400px,1080px);-ms-transform:translate(-400px,1080px);-o-transform:translate(-400px,1080px);transform:translate(-400px,1080px);}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);}}
@-moz-keyframes mid-to-topright{0%{-webkit-transform:translate(-400px,1080px);-moz-transform:translate(-400px,1080px);-ms-transform:translate(-400px,1080px);-o-transform:translate(-400px,1080px);transform:translate(-400px,1080px);}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}
@-ms-keyframes mid-to-topright{0%{-webkit-transform:translate(-400px,1080px);-moz-transform:translate(-400px,1080px);-ms-transform:translate(-400px,1080px);-o-transform:translate(-400px,1080px);transform:translate(-400px,1080px);}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);}}
@-o-keyframes mid-to-topright{0%{-webkit-transform:translate(-400px,1080px);-moz-transform:translate(-400px,1080px);-ms-transform:translate(-400px,1080px);-o-transform:translate(-400px,1080px);transform:translate(-400px,1080px);transform:translate(-400px,1080px);}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);}}
@keyframes mid-to-topright{0%{-webkit-transform:translate(-400px,1080px);-moz-transform:translate(-400px,1080px);-ms-transform:translate(-400px,1080px);-o-transform:translate(-400px,1080px);transform:translate(-400px,1080px);}100%{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}}
.mid-to-topright-in{animation:mid-to-topright 1.5s ease 1;-webkit-animation:mid-to-topright 1.5s ease 1;}

运用了animation的效果！

地址访问为：http://localhost/response/mi4.html#fea-three