HTML5单车动画
阅: - 评:2 - 积分:0
话说"html5实例"这一块一直没有放文章，真有点那个什么"占着xx不xxx"了。于是洒家决定在这一模块中放一篇文章，于是这一块的处女作就诞生了。小伙伴们快来围观，放图一张：
相信看过图后，亲们可能会有一点眉目了。效果就是单车从左方进入视野后消失在右边，然后再从左边出现，一直循环下去。听起来是不是有种动画的赶脚了？如果您也是这么认为的话，那么洒家恭喜您，答对了！如果您认为这个是用神马"flash","js","jq"来实现的话，再次恭喜您，答错了。这就是强大的css3！废话不多说，上源码。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>单车动画--艺灵设计,qq群:231749938</title>
- <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
- <meta name="keywords" content="HTML5单车动画,html5动画,css3动画,animation,处女作,页面闪动">
- <style type="text/css">
- *{margin:0;padding:0;}
- body{overflow:hidden; text-align:center}
- .wrap{width:500px;height:280px;position:relative;top:200px;}
- .wrap *{position:absolute;}
- .cl_r,.cl_l{width:193px;height:193px;background:url(/d/file/html5/2013-11-27/%E8%BD%A6%E8%BD%AE.png) no-repeat;}
- .cl_l{left:15px;bottom:1px}
- .cl_r{right:11px;bottom:5px;}
- .jt{width:55px;height:102px; background:url(/d/file/html5/2013-11-27/%E8%84%9A%E8%B8%8F.png) no-repeat;left:197px;bottom:32px;}
- .cj{width:300px;height:230px; background:url(/d/file/html5/2013-11-27/%E8%BD%A6%E6%9E%B6.png) no-repeat;top:0;right:100px;}
- .mm{width:130px;height:193px;top:-150px;left:100px;}
- .mn{width:130px;height:193px;background:url(/d/file/html5/2013-11-27/%E7%BE%8E%E5%A5%B3.png) no-repeat;top:0;left:0;}
- .sb{width:22px;height:35px;background:url(/d/file/html5/2013-11-27/%E6%89%8B%E8%87%82.png) no-repeat;top:123px;left:80px;}
- h2{width:950px;line-height:100px;filter:alpha(opacity=10);opacity:.1;overflow:hidden;background:#ccc; border-radius:10px;position:absolute;top:-10%;left:20%;}
- a{display:inline-block;width:200px;text-indent:24px;padding:5px;line-height:24px;background:#ccc;top:70px;left:-45px;overflow:hidden;border-radius:10px; text-decoration:none;-webkit-transform:scale(.001);-moz-transform:scale(.001);-o-transform:scale(.001);-ms-transform:scale(.001);transform:scale(.001)}
- .mm:hover a{left:130px;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
- .ani{-webkit-animation:ani 5s linear infinite;-moz-animation:ani 3s linear infinite;-o-animation:ani 3s linear infinite;-ms-animation:ani 3s linear infinite;animation:ani 3s linear infinite;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
- .ani1{-webkit-animation:ani1 60s linear infinite;animation:ani1 60s linear infinite;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
- .ani2{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;}
- @-webkit-keyframes ani{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
- @-moz-keyframes ani{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
- @-o-keyframes ani{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
- @-ms-keyframes ani{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
- @keyframes ani{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
- @-webkit-keyframes ani1{0%{-webkit-transform:translateX(-480px);}100%{-webkit-transform:translateX(1580px);}}
- @-moz-keyframes ani1{0%{-moz-transform:translateX(-480px);}100%{-moz-transform:translateX(1580px);}}
- @-o-keyframes ani1{0%{-o-transform:translateX(-480px);}100%{-o-transform:translateX(1580px);}}
- @-ms-keyframes ani1{0%{-ms-transform:translateX(-480px);}100%{-ms-transform:translateX(1580px);}}
- @keyframes ani1{0%{transform:translateX(-480px);}100%{transform:translateX(1580px);}}
- </style>
- <script type="text/javascript" src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $('body').prepend('<h2>骑单车放把神马的简直弱爆了，本宫“放把”还“放脚”！ 已进入开挂模式......<br>←←←←←←←←←←←←←←←←←←←←←←←请看左边<br>"宝马"正在缓慢的驶来.......(建议使用非ie内核浏览器浏览，推荐chrome浏览器)</h2>');
- $('h2').animate({"top":"20%"},800,function(){
- $(this).animate({"opacity":".8"},10000,function(){
- $(this).animate({"left":"100%","opacity":"0"},2500)
- });
- });
- $('.mm').mouseover(function(){
- $(this).children('a').html('Hi!我是主人的丫环"小玲"，很高兴认识您哦！');
- $('a').append('<span class="jt1"></span>');
- });
- });
- </script>
- </head>
- <body>
- <div class="wrap ani1">
- <div class="cl_r ani"></div>
- <div class="cl_l ani"></div>
- <div class="cj"></div>
- <div class="jt ani"></div>
- <div class="mm">
- <div class="mn"></div>
- <a href="http://www.yilingsj.com/css3/2013-11-27/121.html" target="_blank" class="ani2"></a>
- <div class="sb"></div>
- </div>
- </div>
- </body>
- </html>
点此下载→→【代码】HTML5单车动画.zip
此效果有点小bug，这个不是说兼容性问题，当然ie内核的浏览器就别来凑热闹了。就是页面会出现闪动的情况，虽然在网上找了解决的方法，但试过还是无效，纠结......
注：网上关于此类效果的源码颇多，有兴趣的亲可以到网上去搜搜。洒家写的这个是根据动画的效果来写的，源码准确性不能做保证，只以实现最终效果为准！
转载声明：
若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/html5/2013-11-27/121.html若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
亲，扫个码支持一下艺灵呗~