效果图
各位朋友大家好，
今天给各位带来的是 CSS3实现骑摩托车兜风动画特效源码
这款特效 可以用来做loading 或者载入页面！
大家也可以按照自己的意愿 去修改成自己喜欢的样子！
若是有想文件版源码的可以进HTML5前端技术交流 522323792
废话不多说，上源码！
CSS：@charset "utf-8";
/* 浏览器样式清除 reset */
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;}
}
/*介绍页 3*/
.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);}
}
/*介绍页 3*/
/*ip 4s*/
@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;}
}
/*ip 6*/
@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;}
}
/*ip 6 */
@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;}
}
,
