Html5+Css3 Banner Animation 多方位移动特效
背景：朋友问我小米官网的mi4的特效会做吗，可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果，趁此机会，赶紧学习一下！
效果：如图 素材
HTML：
<div class="banner">
<div class="fea one ">
<div class="fea1 left-to-right"></div>
</div>
<div class="fea two hide">
<div class="fea2 top-to-bottom"></div>
</div>
<div class="fea three hide">
<div class="fea3 bottom-to-top"></div>
</div>
<div class="fea four hide">
<div class="fea4 right-to-left"></div>
</div>
<div class="btnwrap"><b class="cur"></b><b></b><b></b><b></b></div>
</div>
STYLE：
<style type="text/css">
@keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-webkit-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-moz-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-o-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
.left-to-right{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
}
@keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-webkit-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-moz-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-o-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
.top-to-bottom{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
}
@keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-webkit-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-moz-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-o-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
.bottom-to-top{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
}
@keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-webkit-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-moz-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-o-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
.right-to-left{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
}
*{ margin:0; padding:0; }
.banner{ width:800px; margin:0 auto; overflow:hidden; }
.fea { width:800px; height:320px; position:relative; }
.fea.hide { display:none; }
.one{ background:#099999; }
.fea1{ width:600px; height:231px; background:url(images/fea-1.png) center center; z-index:1; position:absolute; bottom:0; }
.two{ background:#ff8400; }
.fea2{ width:600px; height:339px; background:url(images/fea-2.png) center center; z-index:1; position:absolute; top:-40px; left:100px; }
.three{ background:#f10000; }
.fea3{ width:300px; height:172px; background:url(images/fea-3.png) center center; z-index:1; position:absolute; left:250px; bottom:70px; }
.four{ background:#f9f9f9; }
.fea4{ width:600px; height:249px; background:url(images/fea-4.png) center center; z-index:1; position:absolute; left:100px; top:40px; }
.btnwrap{ z-index:40; position:absolute; top:280px; margin-left:320px; }
.btnwrap b{ display:inline-block; background:#cccccc; width:30px; height:14px; cursor:pointer; margin:10px; }
.btnwrap b.cur{ background:#62CFEE; }
</style>
JAVASCRIPT：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var bannerwrap = function(o){
$(".btnwrap b").removeClass("cur");
$(".btnwrap b:eq("+o+")").addClass("cur");
$(".banner .fea").hide();
$(".banner .fea:eq("+o+")").fadeIn(800);
}
var i=0;
$(".btnwrap b").click(function(){
i=$(this).index();
bannerwrap(i);
});
var sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
$(".banner").hover(function(){
clearInterval(sid);
},function(){
sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
});
});
</script>
总结：Html5、Css3在近几年使用已经非常广泛了，特别在移动端，应用场景层出不穷，抓紧学习一下，不要凹凸曼啦！
