经验分享程序开发文档资料数据资源其它资源

CSS3实现骑摩托车兜风动画特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现骑摩托车兜风动画特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3实现骑摩托车兜风动画特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>CSS3实现骑摩托车兜风动画特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="con_wrap con_wrap_4 wrap_show">
	<div class="motor_hook">
        <div class="motor_wrap">
            <div class="man">
                <div class="head"></div>
                <div class="body"></div>
            </div>
            <div class="motor">
                <div class="wheel_front"></div>
                <div class="wheel_back"></div>
                <div class="motor_body"></div>
                <div class="motor_handle"></div>
                <div class="motor_pipe">
                	<i class="pipe"></i>
                    <i class="smoke smoke_1"></i>
                    <i class="smoke smoke_2"></i>
                </div>
            </div>
        </div>
        <div class="motor_shadow"></div>
    </div>
    
    <div class="tree_wrap">
    	<span class="tree_1"><i></i></span>
        <span class="tree_2"><i></i></span>
    </div>
    <div class="wording_wrap">
    	<div class="wording wording_4"></div>
    </div>
    <div class="earth_bg"></div>
</div>
<script language="javascript" type="text/javascript" src="js/js.js"></script>
</body>
</html>

JS代码(js.js):

(function(){
	/*寰俊杞彂鍥剧墖*/
var imgUrl = "http://sunnyzhen.github.io/public/img/sunny.jpg";
	var lineLink = location.href;
	var descContent = "銆婃懇鎵樿溅鍏滈銆?- 妗戝凹鐪熷嚭鍝?;
	var shareTitle = document.title;
	var appid = '';
	function shareFriend(){
	WeixinJSBridge.invoke('sendAppMessage',{
	"appid":appid,"img_url":imgUrl,"img_width":"200","img_height":"200","link":lineLink,"desc":descContent,"title":shareTitle}
,function(res){
	//_report('send_msg',res.err_msg);
}
)}
function shareTimeline(){
	WeixinJSBridge.invoke('shareTimeline',{
	"img_url":imgUrl,"img_width":"200","img_height":"200","link":lineLink,"desc":descContent,"title":shareTitle}
,function(res){
	//_report('timeline',res.err_msg);
}
);
}
function shareWeibo(){
	WeixinJSBridge.invoke('shareWeibo',{
	"content":descContent,"url":lineLink,}
,function(res){
	//_report('weibo',res.err_msg);
}
);
}
// 褰撳井淇″唴缃祻瑙堝櫒瀹屾垚鍐呴儴鍒濆鍖栧悗浼氳Е鍙慦eixinJSBridgeReady浜嬩欢銆?document.addEventListener('WeixinJSBridgeReady',function onBridgeReady(){
	// 鍙戦€佺粰濂藉弸WeixinJSBridge.on('menu:share:appmessage',function(argv){
	shareFriend();
}
);
	// 鍒嗕韩鍒版湅鍙嬪湀WeixinJSBridge.on('menu:share:timeline',function(argv){
	shareTimeline();
}
);
	// 鍒嗕韩鍒板井鍗?WeixinJSBridge.on('menu:share:weibo',function(argv){
	shareWeibo();
}
);
}
,false);
}
)();

CSS代码(style.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;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
36.39 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
36.39 KB
立即下载
冯月园静
了解
打赏作者 鼓励作者
Html 动画效果4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章