Html5+Css3 Banner Animation 多方位移动特效_html/css_WEB-ITnose

背景：朋友问我小米官网的mi4的特效会做吗，可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果，趁此机会，赶紧学习一下！

效果：如图 素材

HTML：

STYLE：

@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; }

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); }); });

总结：Html5、Css3在近几年使用已经非常广泛了，特别在移动端，应用场景层出不穷，抓紧学习一下，不要凹凸曼啦！

Html5+Css3 Banner Animation 多方位移动特效_html/css_WEB-ITnose

관련 기사