效果图
各位朋友。大家早上好！
今天给大家带来的是 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;}
}
