背景：朋友问我小米官网的mi4的特效会做吗，可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果，趁此机会，赶紧学习一下！ 效果：如图 素材 HTML： スタイル： <br> @keyframes fea1{ 0% { left:-600px; } 100% { 左:0; } } <br> @-webkit-keyframes fea1{ 0% { left:-600px; } 100% { 左:0; } } <br> @-moz-keyframes fea1{ 0% { left:-600px; } 100% { 左:0; } } <br> @-o-keyframes fea1{ 0% { left:-600px; } 100% { 左:0; } } <br> .left-to-right{ <br> アニメーション: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea1; <br> -webkit-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea1; <br> -moz-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea1; <br> -o-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea1; <br> } <br> <br> <br> @keyframes fea2{ 0% { top:-600px; } 100% { トップ:-40px; } } <br> @-webkit-keyframes fea2{ 0% { top:-600px; } 100% { トップ:-40px; } } <br> @-moz-keyframes fea2{ 0% { top:-600px; } 100% { トップ:-40px; } } <br> @-o-keyframes fea2{ 0% { top:-600px; } 100% { トップ:-40px; } } <br> .top-to-bottom{ <br> アニメーション: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea2; <br> -webkit-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 fea2 実行中。 <br> -moz-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea2; <br> -o-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行 fea2; <br> } <br> <br> <br> @keyframes fea3{ 0% {bottom:-200px; } 100% { 下:70px; } } <br> @-webkit-keyframes fea3{ 0% {bottom:-200px; } 100% { 下:70px; } } <br> @-moz-keyframes fea3{ 0% {bottom:-200px; } 100% { 下:70px; } } <br> @-o-keyframes fea3{ 0% {bottom:-200px; } 100% { 下:70px; } } <br> .bottom-to-top{ <br> アニメーション: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea3; <br> -webkit-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 fea3 実行中。 <br> -moz-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea3; <br> -o-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行 fea3; <br> } <br> <br> <br> @keyframes fea4{ 0% { left:1400px; 100% { 左:100px; } } <br> @-webkit-keyframes fea4{ 0% { left:1400px; 100% { 左:100px; } } <br> @-moz-keyframes fea4{ 0% { left:1400px; 100% { 左:100px; } } <br> @-o-keyframes fea4{ 0% { left:1400px; 100% { 左:100px; } } <br> .right-to-left{ <br> アニメーション: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea4; <br> -webkit-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 fea4 実行中。 <br> -moz-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea4; <br> -o-animation: 1.5 秒 cubic-bezier(0.86, 0, 0.07, 1) 0 秒 通常 なし 1 実行中 fea4; <br> } <br> <br> <br> *{ margin:0;パディング:0; }<br> .banner{ width:800px;マージン:0 自動;オーバーフロー:非表示; }<br> .fea { width:800px;高さ:320ピクセル;位置:相対; }<br> .fea.hide { 表示:なし; }<br> .one{ 背景:#099999; }<br> .fea1{ width:600px;高さ:231ピクセル;背景:url(images/fea-1.png) 中心 中心; z インデックス:1;位置:絶対;下:0; } <br> .two{ 背景:#ff8400; }<br> .fea2{幅:600ピクセル;高さ:339ピクセル;背景:url(images/fea-2.png) 中心 中心; z インデックス:1;位置:絶対;上:-40ピクセル;左:100ピクセル; } <br> .three{ 背景:#f10000; }<br> .fea3{ width:300px;高さ:172ピクセル;背景:url(images/fea-3.png) 中心 中心; z インデックス:1;位置:絶対;左:250ピクセル;下:70ピクセル; } <br> .four{ 背景:#f9f9f9; }<br> .fea4{ width:600px;高さ:249ピクセル;背景:url(images/fea-4.png) 中心 中心; z インデックス:1;位置:絶対;左:100ピクセル; 上:40ピクセル; } <br> <br> .btnwrap{ z-index:40;位置:絶対;上:280ピクセル;マージン左:320px; }<br> .btnwrap b{ display:inline-block;背景:#cccccc;幅:30ピクセル;高さ:14ピクセル;カーソル:ポインタ;マージン:10px; }<br> .btnwrap b.cur{ 背景:#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 近几年使用すでに非常に广泛了、特に移動端、应用场景层出不穷、抓紧学习一下、不要凹凸曼啦！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
