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