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在近几年使用已经非常广泛了，特别在移动端，应用场景层出不穷，抓紧学习一下，不要凹凸曼啦！