Html5 + Css3 Banner Animation multi-faceted mobile effects, html5css3

Html5 + Css3 Banner Animation multi-faceted mobile effects, html5css3

 

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>> </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.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea1;
-Webkit-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea1;
-Moz-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea1;
-O-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s 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.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea2;
-Webkit-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea2;
-Moz-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea2;
-O-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s 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.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea3;
-Webkit-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea3;
-Moz-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea3;
-O-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s 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.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea4;
-Webkit-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea4;
-Moz-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s normal none 1 running fea4;
-O-animation: 1.5 s cubic-bezr (0.86, 0, 0.07, 1) 0 s 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; z-index: 1; position: absolute; bottom: 0 ;}
. Two {background: # ff8400 ;}
. Fea2 {width: 600px; height: 339px; background: url (images/fea-2.png) 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; z-index: 1; position: absolute; left: 250px; bottom: 70px ;}
. Four {background: # f9f9f9 ;}
. Fea4 {width: 600px; height: 249px; background: url (images/fea-4.png) 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: #62 cground ;}
</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>

Conclusion: Html5 and Css3 have been widely used in recent years. Especially on mobile terminals, their application scenarios are emerging one after another. Please take a quick look at them and don't try it!