html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码

效果图

各位朋友。大家早上好！

今天给大家带来的是 CSS3遮罩banner动画特效源码！

看倦的轮播图的，可以试试这个特效！别有一番意思！

大家可以按照自己的意愿进行行修改，改成自己喜欢的样子！

有想要文件版源码的 可以私聊小编哦！

废话不多说，上源码！

@charset "utf-8";

body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}

body, button, input, select, textarea{ font:12px/1.5

Tahoma,Arial,'宋体'; }

fieldset,img{border:0;}

ul,li{list-style:none;}

em,i{font-style:normal;}

table{border-collapse:separate;border-spacing:0;}

a{text-decoration:none;}

a:hover{ text-decoration:underline;}

a:focus,input,button,select,textarea{outline:none;

font-size:100%;}

h1,h2,h3,h4,h5,h6{ font-size:100%; font-variant: normal;}

input,select,img{ vertical-align:middle;}

legend{ display:none;}

textarea{resize:none;}

button {cursor:pointer;}

html,body{ height:100%; width:100%; overflow:hidden; position:

relative;}

body{ background:#2758a7 url(../images/cover/bg.jpg) no-repeat

center bottom; background-size:100% auto;}

.con_wrap{ display:block; height:100%; width:100%; background:none;

position:absolute; left:0px; top:0px; -webkit-transition:

-webkit-transform 0.3s linear,opacity 0.3s linear;

-webkit-transform-origin: 50% 180%; z-index:2;}

.wrap_show{ -webkit-transform:rotate(0deg); opacity:1;

z-index:2;}

.earth_bg{ display:block; height:100%; width:100%;

position:absolute; left:0; bottom:0;

background:url(../images/cover/earth_bg.png) no-repeat center

bottom; background-size:contain; z-index:1;}

.con_wrap .earth_bg{ z-index:2;}

@-webkit-keyframes a_building{

0%{ -webkit-transform:translate(0px,100px) scale(0.1,0.1);

opacity:0;}

70%{ -webkit-transform:translate(0px,0px) scale(1.1,1.1);

opacity:1;}

80%{ -webkit-transform:translate(0px,0px) scale(0.9,0.9);

opacity:1;}

90%{ -webkit-transform:translate(0px,0px) scale(1.05,1.05);

opacity:1;}

100%{ -webkit-transform:translate(0px,0px) scale(1,1);

opacity:1;}

}

.wording_wrap .wording_4{ display:block; height:70px; width:138px;

background: url(../images/page_3/page_3_man.png) no-repeat 0

-109px; background-size:172px 300px; position:absolute; left:50%;

margin-left:-69px; bottom:80px; opacity:0;}

.tree_wrap{ display:block; width:100%;}

.tree_wrap .tree_1{display:block; height:150px; width:112px;

position:absolute; left:50%; margin-left:-157px; bottom:240px;

z-index:1; -webkit-transform-origin:50% 100%; opacity:0.8;}

.tree_wrap .tree_2{display:block; height:160px; width:149px;

position:absolute; left:50%; margin-left:28px; bottom:245px;

z-index:1; -webkit-transform-origin:50% 100%; opacity:0.8; }

.tree_wrap .tree_1 i{display:block; height:150px; width:112px;

background:url(../images/page_3/sprite_scene.png) no-repeat 0 0;

background-size:250px 160px; position:absolute; left:0; bottom:0;

z-index:1; -webkit-transform-origin:50% 100%; opacity:1; }

.tree_wrap .tree_2 i{display:block; height:160px; width:149px;

background:url(../images/page_3/sprite_scene.png) no-repeat -114px

0; background-size:250px 160px; position:absolute; left:0;

bottom:0; z-index:1; -webkit-transform-origin:50% 100%; opacity:1;

}

.motor_hook{ display:block; height:107px; width:187px;

position:absolute; bottom:221px; left:50%; margin-left:-96px;

z-index:3;}

.motor_wrap{ display:block; height:107px; width:187px;

position:absolute; top:0px; left:0; -webkit-transform-origin:50%

700%; -webkit-transform:rotate(-32deg); z-index:1; opacity:0;}

.motor_wrap .man{ display:block; height:118px; width:72px;

position:absolute; left:67px; top:-26px; z-index:2;

-webkit-transform-origin:50% 100%;}

.motor_wrap .man .body{ display:block; height:118px; width:72px;

background: url(../images/page_3/page_3_man.png) no-repeat 0

-181px; background-size:172px 300px; position:absolute; left:0;

bottom:0;}

.motor_wrap .man .head{ display:block; height:54px; width:55px;

background: url(../images/page_3/page_3_man.png) no-repeat -74px

-181px; background-size:172px 300px; position:absolute; left:2px;

top:-52px; -webkit-transform-origin:50% 100%;}

.motor_wrap .motor .motor_body{ display:block; height:107px;

width:172px; background: url(../images/page_3/page_3_man.png)

no-repeat 0 0; background-size:172px 300px; position:absolute;

left:12px; top:0px; z-index:1;}

.motor_wrap .motor .motor_handle{ display:block; height:9px;

width:7px; background: url(../images/page_3/page_3_man.png)

no-repeat -140px -122px; background-size:172px 300px;

position:absolute; right:54px; top:12px; z-index:3;}

.motor_wrap .motor .motor_pipe{ display:block; height:11px;

width:17px; background: url(../images/page_3/page_3_man.png)

no-repeat -140px -109px; background-size:172px 300px;

position:absolute; left:8px; top:91px;}

.motor_wrap .motor .pipe{ display:block; height:11px; width:17px;

background: url(../images/page_3/page_3_man.png) no-repeat -140px

-109px; background-size:172px 300px; position:absolute; left:0;

top:0; z-index:2;}

.motor_wrap .motor .wheel_front{ display:block; height:42px;

width:42px; background: url(../images/page_3/page_3_man.png)

no-repeat -127px -237px; background-size:172px 300px;

position:absolute; right:4px; top:84px;

-webkit-transform-origin:50% 100%;}

.motor_wrap .motor .wheel_back{ display:block; height:51px;

width:51px; background: url(../images/page_3/page_3_man.png)

no-repeat -74px -237px; background-size:172px 300px;

position:absolute; left:20px; bottom:-21px;

-webkit-transform-origin:50% 100%;}

.motor_wrap .motor .smoke{ display:block; height:10px; width:10px;

background:#18437a; border-radius:10px; position:absolute;

left:0px; top:3px;}

.motor_wrap .penguin{ display:block; height:48px; width:40px;

background: url(../images/page_3/page_3_man.png) no-repeat -131px

-181px; background-size:172px 300px; position:absolute; left:27px;

top:-6px; -webkit-transform-origin:50% 100%;}

.motor_shadow{ display:block; height:14px; width:180px;

position:absolute; left:50%; margin-left:-85px; bottom:-25px;

background:#194d9c; border-radius:180px/14px;

-webkit-transform-origin:50% 600px;

-webkit-transform:rotate(-35deg); opacity:0;}

.wrap_show .tree_wrap .tree_1 i{ -webkit-animation:a_building 0.3s

0.3s linear both;}

.wrap_show .tree_wrap .tree_2 i{ -webkit-animation:a_building 0.3s

0.5s linear both;}

.wrap_show .tree_wrap .tree_1{-webkit-animation:a_tree_move_1 3s 1s

linear infinite;}

.wrap_show .tree_wrap .tree_2{-webkit-animation:a_tree_move_2 3s

1.1s linear infinite;}

@-webkit-keyframes a_tree_move_1{

0%{ -webkit-transform:translate(0,0) rotate(0); opacity:0.8;}

33%{ -webkit-transform:translate(-160%,50px) rotate(-10deg);

opacity:0.8;}

34%{ -webkit-transform:translate(-160%,0) rotate(0);

opacity:0;}

35%{ -webkit-transform:translate(-160%,-100%) rotate(0);

opacity:0;}

36%{ -webkit-transform:translate(300%,-100%) rotate(0);

opacity:0;}

37%{ -webkit-transform:translate(300%,0) rotate(0deg);

opacity:0;}

38%{ -webkit-transform:translate(290%,0px) rotate(25deg);

opacity:0.8;}

70%{ -webkit-transform:translate(150%,-10px) rotate(12deg);

opacity:0.8;}

100%{ -webkit-transform:translate(0,0) rotate(0); opacity:0.8;}

}

@-webkit-keyframes a_tree_move_2{

0%{ -webkit-transform:translate(0,0) rotate(0); opacity:0.8;}

22%{ -webkit-transform:translate(-83%,-15px) rotate(-17deg);

opacity:0.8;}

66%{ -webkit-transform:translate(-250%,10px) rotate(-35deg);

opacity:0.8;}

67%{ -webkit-transform:translate(-250%,0) rotate(0);

opacity:0;}

68%{ -webkit-transform:translate(-250%,-100%) rotate(0);

opacity:0;}

69%{ -webkit-transform:translate(100%,-100%) rotate(0);

opacity:0;}

70%{ -webkit-transform:translate(100%,0) rotate(0);

opacity:0.8;}

85%{ -webkit-transform:translate(50%,5px) rotate(10deg);

opacity:0.8;}

100%{ -webkit-transform:translate(0,0) rotate(0); opacity:0.8;}

}

.wrap_show .motor_hook{ -webkit-animation:a_motor_hook 1s 2.4s

linear infinite alternate;}

.wrap_show .motor_wrap{ -webkit-animation:a_motor_wrap 1.5s 0.9s

linear both;}

.wrap_show .motor_shadow{ -webkit-animation:a_motor_wrap 1.5s 0.9s

linear both;}

.wrap_show .motor_wrap .motor .motor_handle{

-webkit-animation:a_motor_handle 0.5s linear infinite;}

.wrap_show .motor_wrap .motor .motor_body{

-webkit-animation:a_motor_body 0.5s linear infinite;}

.wrap_show .motor_wrap .motor .wheel_front{

-webkit-animation:a_wheel_front 0.5s linear infinite;}

.wrap_show .motor_wrap .motor .wheel_back{

-webkit-animation:a_wheel_front 0.5s linear infinite;}

.wrap_show .motor_wrap .motor .motor_pipe{

-webkit-animation:a_wheel_front 0.5s 0.1s linear infinite;}

.wrap_show .motor_wrap .motor .smoke_1{ -webkit-animation:a_smoke

1s 0.1s linear infinite;}

.wrap_show .motor_wrap .motor .smoke_2{ -webkit-animation:a_smoke

1s 0.5s linear infinite;}

.wrap_show .motor_wrap .penguin{ -webkit-animation:a_motor_penguin

0.5s linear infinite;}

.wrap_show .motor_wrap .penguin .scarf{

-webkit-animation:a_motor_penguin_scarf 0.3s linear infinite;}

.wrap_show .motor_wrap .man{ -webkit-animation:a_motor_man 0.5s

linear infinite;}

.wrap_show .motor_wrap .man .body .tie{

-webkit-animation:a_motor_penguin_scarf 0.4s 0.2s linear

infinite;}

.wrap_show .motor_wrap .man .head{

-webkit-animation:a_motor_man_head 0.5s linear infinite;}

@-webkit-keyframes a_motor_hook{

0%{ -webkit-transform: translate(0,0);}

25%{ -webkit-transform: translate(-2px,0);}

50%{ -webkit-transform: translate(4px,0);}

75%{ -webkit-transform: translate(-1px,0);}

100%{ -webkit-transform: translate(0,0);}

}

@-webkit-keyframes a_motor_wrap{

0%{ -webkit-transform:rotate(-35deg); opacity:0;}

5%{ -webkit-transform:rotate(-35deg); opacity:1;}

100%{ -webkit-transform:rotate(0deg); opacity:1;}

}

@-webkit-keyframes a_motor_handle{

0%{ -webkit-transform:translate(0,0);}

25%{ -webkit-transform:translate(1px,1px);}

50%{ -webkit-transform:translate(-2px,-4px);}

75%{ -webkit-transform:translate(1px,0px);}

100%{ -webkit-transform:translate(0,0);}

}

@-webkit-keyframes a_wheel_front{

0%{ -webkit-transform:translate(0,0) scale(1,1);}

25%{ -webkit-transform:translate(1px,1px) scale(1.07,0.98);}

50%{ -webkit-transform:translate(-1px,-1px) scale(0.96,1.06);}

75%{ -webkit-transform:translate(1px,0px) scale(1.05,0.99);}

100%{ -webkit-transform:translate(0,0) scale(1,1);}

}

@-webkit-keyframes a_smoke{

0%{ -webkit-transform:translate(0,0) scale(0.5,0.5);

opacity:0;}

25%{ -webkit-transform:translate(-6px,0px) scale(0.8,0.6);

opacity:1;}

50%{ -webkit-transform:translate(-12px,-4px) scale(0.9,0.8);

opacity:1;}

75%{ -webkit-transform:translate(-18px,-12px) scale(1,1);

opacity:0.5;}

100%{ -webkit-transform:translate(-12px,-16px) scale(1.05,1.05);

opacity:0;}

}

@-webkit-keyframes a_motor_body{

0%{ -webkit-transform:translate(0,0) scale(1,1);}

25%{ -webkit-transform:translate(1px,1px) scale(1.02,0.99);}

50%{ -webkit-transform:translate(-1px,-3px) scale(0.97,1.03);}

75%{ -webkit-transform:translate(1px,0px) scale(1.01,1);}

100%{ -webkit-transform:translate(0,0) scale(1,1);}

}

@-webkit-keyframes a_motor_penguin{

0%{ -webkit-transform:translate(0,0) scale(1,1);}

25%{ -webkit-transform:translate(1px,1px) scale(1.05,0.98);}

50%{ -webkit-transform:translate(-1px,-4px) scale(0.96,1.07);}

75%{ -webkit-transform:translate(1px,0px) scale(1.03,0.99);}

100%{ -webkit-transform:translate(0,0) scale(1,1);}

}

@-webkit-keyframes a_motor_man{

0%{ -webkit-transform:translate(0,0) scale(1,1);}

25%{ -webkit-transform:translate(0px,1px) scale(1.02,0.99);}

50%{ -webkit-transform:translate(0px,-3px) scale(0.97,1.03);}

75%{ -webkit-transform:translate(0px,0px) scale(1.01,1);}

100%{ -webkit-transform:translate(0,0) scale(1,1);}

}

@-webkit-keyframes a_motor_man_head{

0%{ -webkit-transform: rotate(0deg);}

25%{ -webkit-transform: rotate(8deg);}

50%{ -webkit-transform: rotate(-6deg);}

75%{ -webkit-transform: rotate(4deg);}

100%{ -webkit-transform: rotate(0deg);}

}

@media all and (min-width:320px) and (max-height:416px){

body{ background:#2758a7;}

.con_wrap{ top:40px;}

.earth_bg_4s{ display:block; bottom:-40px;

background:url(../images/cover/bg.jpg) no-repeat center bottom;

background-size:100% auto;}

.con_wrap_3 .sun{ top:-14px;}

.pager_wrap{ bottom:14px;}

.penguin_hook_8{ bottom:174px;}

.man_hook_8{ bottom:260px;}

.detail_event{ top:-40px;}

.detail_stock{ top:-40px;}

.detail_join{ top:-40px;}

.detail_share{ top:-40px;}

.ice_lake_2{ top:0px; display:none;}

.event_area{ top:-5px;}

.event_area .timeline_1{ display:none;}

.ice_hole_1{ top:330px;}

.ice_hole_2{ top:70px;}

.join_us_title{ top:250px;}

.email_link{ top:340px;}

.webank_it_bg{ top:50px;}

.we_slogan{ top:265px;}

.share_we{ top:340px;}

.detail_cover .dot_wrap{ bottom:55px;}

.cover_link_next{ bottom:40px;}

}

@media all and (min-width:320px) and (max-height:568px){

.man_hook_8{ bottom:255px;}

.penguin_hook_8{ bottom:174px;}

.wording_wrap .wording_8{bottom:60px;}

}

@media all and (min-width:360px){

.penguin_bg{ bottom:268px;}

.tree_wrap .tree_1{bottom:260px;}

.tree_wrap .tree_2{bottom:265px;}

.building_bg .building_1{ bottom:275px;}

.building_bg .building_2{ bottom:278px;}

.signpost{ bottom:280px;}

.iceberg_wrap{ bottom:238px;}

}

@media all and (min-width:375px){

.penguin_bg{ bottom:288px;}

.tree_wrap .tree_1{bottom:280px;}

.tree_wrap .tree_2{bottom:285px;}

.building_bg .building_1{ bottom:295px;}

.building_bg .building_2{ bottom:298px;}

.signpost{ bottom:300px;}

.iceberg_wrap{ bottom:250px;}

}

@media all and (min-width:414px){

.penguin_bg{ bottom:315px;}

.tree_wrap .tree_1{bottom:310px;}

.tree_wrap .tree_2{bottom:315px;}

.building_bg .building_1{ bottom:325px;}

.building_bg .building_2{ bottom:328px;}

.signpost{ bottom:340px;}

.iceberg_wrap{ bottom:285px;}

.screen_wrap{ bottom:370px;}

.man_hook_8{ bottom:325px;}

.penguin_hook_8{ bottom:245px;}

}