适用于多个活动场景

1.HTML

<body><div class="old-driver"><div class="box-false"><div class="box"><img class="car" src="car.png"><img class="gas" src="gas.png"></div></div></div>
</body>

2.CSS

<style type="text/css" media="screen">.old-driver {width: 100%;height: 350px;position: relative;overflow: hidden;}@keyframes an-shake {0%, 100% {transform: translate(1px, 0px) rotate(0deg)}20% {transform: translate(-2px, -2px) rotate(0.2deg)}40% {transform: translate(-2px, 1px) rotate(-0.1deg)}60% {transform: translate(-1px, 2px) rotate(-0.2deg)}80% {transform: translate(0px, 2px) rotate(0.1deg)}}.box-false {position: absolute;bottom: 50px;right: -300px;width: 300px;height: 200px;}.an-shake {animation: an-shake .1s infinite ease-in-out;}.box {position: relative;width: 100%;height: 100%;}.box img.car {position: absolute;width: 375px;left: 0;bottom: 0;}@keyframes an-gas {0% {transform: translate(-25px, 15px) scale(0)}100% {transform: translate(5px, 0px) scale(.8)}}.box img.gas {position: absolute;width: 80px;right: -65px;bottom: 4px;}.box img.an-gas {animation: an-gas .2s infinite ease-in-out;}@keyframes an-brake {10%, 60% {transform: skewX(15deg);}0%, 100% {transform: skewX(0deg);}}.an-brake {transform-origin: 50% 100%;animation: an-brake .5s ease-in-out;}</style>

3.Javascript

<script src="jquery.js" charset="utf-8"></script><script type="text/javascript">var Car = function (car, direction, cls) {this.target = car;this.direction = direction || 'right';cls = cls || {};this.boxEntity = this.target.find('.' + (cls.box || 'box'));this.carEntity = this.boxEntity.find('.' + (cls.car || 'car'));this.gasEntity = this.boxEntity.find('.' + (cls.gas || 'gas'));this.anIgnition = cls.anIgnition || 'an-shake';this.anGas = cls.anGas || 'an-gas';this.anBrake = cls.anBrake || 'an-brake';var that = this;// 点火this.ignition = function (time) {//生成一个deferred延时对象var deferred = new $.Deferred();this.target.addClass(this.anIgnition);this.gasEntity.addClass(this.anGas);setTimeout(function () {that.target.removeClass(that.anIgnition);that.gasEntity.removeClass(that.anGas);//改变deferred对象的状态。resolve()将状态改为非同步操作成功deferred.resolve();}, time);//promise是deferred的只读版return deferred.promise();};// 移动this.move = function (distance, time) {var deferred = new $.Deferred();time = time || 2000;var css = {};css[this.direction] = distance;this.target.animate(css, time, 'linear', function() {deferred.resolve();});return deferred.promise();};// 加速this.speedUp = function (distance, begin, end, framesPx) {var deferred = new $.Deferred();var frames = 200;framesTime = 10000 / frames;var now = parseInt(this.target.css(this.direction));if (now >= parseInt(distance)) {deferred.resolve();} else {framesPx = framesPx || ((distance - now) / frames);begin = framesPx + begin;if (begin >= end) {begin = end;}var css = {};css[this.direction] = now + begin;this.move(now + begin, framesTime).then(function () {return that.speedUp(distance, begin, end, framesPx);}).then(function () {deferred.resolve();});}return deferred.promise();};// 刹车this.brake = function (distance, time) {var deferred = new $.Deferred();this.boxEntity.addClass(this.anBrake);this.move(distance, time).then(function() {setTimeout(function () {that.boxEntity.removeClass(that.anBrake);deferred.resolve();}, 500);});return deferred.promise();};// 停车事宜this.stop = function (time) {var deferred = new $.Deferred();setTimeout(function() {deferred.resolve();}, time);return deferred.promise(); };// 睡眠this.sleep = function (time) {var start = new Date();while(new Date() - start < time) {}};};$(function() {var car = new Car($('.box-false'));car.move(-100, 200).then(function() {return car.brake(50, 200);}).then(function () {console.log('车将停留 3 秒...');console.log('请游客下车');return car.stop(1000);}).then(function() {console.log('点火');return car.ignition(500);}).then(function () {console.log('车已启动');return car.speedUp(1500, 0, 300);}).then(function() {console.log('车已经离开...');});});</script>

注：car.move里面的参数可以自行设置，如果是需要移动端请联系我，目前上传的是PC端

4.IMAGE 所用到的图片

car.png

gas.png

ANIMATION经典小车动画相关推荐

  1. html 动画效果 小车,ANIMATION经典小车动画

    适用于多个活动场景 1.HTML 2.CSS .old-driver { width: 100%; height: 350px; position: relative; overflow: hidde ...

  2. html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...

  3. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览    源码下载 实现的代码. html代码: <div clas ...

  4. 【Android 属性动画】属性动画 Property Animation 与 视图动画 View Animation 区别

    文章目录 一.动画效果添加对象 二.动画效果类型 三.动画效果与实际属性 四.开发复杂程度 属性动画 Property Animation 可以为 任何对象 ( View 对象 / 非 View 对象 ...

  5. 小程序底部弹窗css_微信小程序之animation底部弹窗动画（两种方法）

    简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果.第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置( ...

  6. 【Unity3D小技巧】Unity3D中Animation和Animator动画的播放、暂停、倒放控制

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...

  7. Skeletal Animation（骨骼动画）

    Skeletal Animation(骨骼动画) 有关骨骼动画的东西都放在这里好了. http://en.wikipedia.org/wiki/Skeletal_animation Skeletal ...

  8. html css动画自动旋转,基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 实现的代码. html代码: $('.mod_info2__power3').o ...

  9. html animation 属性,CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  10. c语言编程小车动画,C语言课程设计运动的小车动画.doc

    C语言课程设计运动的小车动画 XXX航空工业学院 课 程 设 计 报 告 课程设计名称:C语言课程设计 课程设计题目:运动的小车动画 院(系):计算机学院 专 业:网络工程 班 级: 学 号: 姓 名 ...

最新文章

  1. android 自定义音乐圆形进度条,Android自定义View实现音频播放圆形进度条
  2. 在不允许新建对象的条件下，将list中指定条件的值去除
  3. 一个关于js所有函数都报错的问题
  4. opencv java match_OpenCV模板匹配函数matchTemplate详解
  5. Android之点击图片底部出现灰色圆圈效果
  6. 使用Jolokia和JMX进行客户端服务器监视
  7. 多个命令执行结果输出到同一个文件(批处理)
  8. js读取服务器xml文件,js读取XML文件 JS读写XML文件
  9. 超简单集成Android Zxing实现扫一扫二维码
  10. 软件项目管理1：开发计划和版本计划举例
  11. Win7窗口最大化和最小化快捷键
  12. javascript基础常识问答（八）
  13. java sendkeys方法_java+selenium——键盘操作+复制粘贴（keys类）
  14. 【数据分析】系列-Python分析淘宝4200款Bra(没错,就是文胸)后，发现最好卖的款式居然是。。。
  15. 推荐一些好的音乐资源的网站（大家可跟贴 ^_^ ）
  16. Airsim接口文档
  17. angular学习6之路由可选参数和必选参数
  18. Java 并发异步编程，原来十个接口的活现在只需要一个接口就搞定!
  19. Linux操作系统浅尝辄止
  20. POI解析文档内容（txt,doc,docx,xls,xlsx,ppt,pdf）

热门文章

  1. Atititjs h5调用摄像头视频聊天 拍照功能 相机功能 录像attilax总结
  2. atitit.taskService 任务管理器的设计 v1
  3. Atitit.  单列索引与多列索引 多个条件的查询原理与设计实现
  4. Atitit.获取验证码图片通过web
  5. paip.转账功能设计流程
  6. 券商交易模式下的单产品多券商方案
  7. 和包支付的钱哪里来_老瓦发问国际乒联：道理我都懂！问题钱从哪里来？
  8. 【优化算法】龙格-库塔优化算法【含Matlab源码 1799期】
  9. 【配送路径规划】基于matlab模拟退火算法求解单配送中心多客户多车辆最短路径规划问题【含Matlab源码 1604期】
  10. 【TSP】基于matlab模拟退火算法求解34城市旅行商问题【含Matlab源码 882期】