查看效果：http://hovertree.com/texiao/jquery/58/

效果图：

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5/CSS3奔跑动画DEMO演示 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/jquery/58/css.css" rel="stylesheet" type="text/css" />

<script src="http://hovertree.com/texiao/css/8/prefixfree.min.js"></script>

</head>

<body>

<div class='kai animate' id='running'>

<div class='eyes'></div>

</div>

<div class='slide'>

<div class='stage'>

<div class='foreground-trees'></div>

<div class='landscape'></div>

<div class='behind-trees'></div>

<div class='behind-mountains'></div>

</div>

</div>

<div class="infohovertree">生命在于运动，奔跑吧兄弟！

<br />

<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/5f5eiagg.htm">原文</a>

</div>

<script type="text/javascript" src='http://down.hovertree.com/jquery/jquery-1.12.3.min.js'></script>

<script type="text/javascript" src='http://hovertree.com/texiao/jquery/58/js/jquery.transform.js'></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jquery/58/js/index.js"></script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/5f5eiagg.htm

推荐：http://hovertree.com/hvtart/bjae/yjm6v683.htm

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

JS+CSS3人物奔跑动画的更多相关文章

  1. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  2. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  3. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  4. CSS3实现GIF动画

    来自 dribbble 某位大师的作品,GIF图中一个小女孩抱着一只猫在跑步,非常可爱,动作轻巧,过渡自然.DEMO下载 回到项目需求,要实现类似上图卡通人物跑步动画,分析结果如下: 1.跑步动画可以 ...

  5. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  7. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  8. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  9. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. MVP初探

    什么是MVP MVP是一种UI的架构模式,是MVC的一种变体,适用于基于事件驱动的应用框架.MVP中的M和V分别对应了MVC中的Model和View,而P代替了Controller,而它更多地体现在了 ...

  2. Java模拟Windows的Event

    场景 开发中遇到一个场景,业务操作会不定时的产生工作任务,这些工作任务需要放入到一个队列中,而另外会有一个线程一直检测这个队列,队列中有任务就从队列中取出并进行运算. 问题 业务场景倒是简单,只不过这 ...

  3. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  4. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  5. 弄了一个支持SSL的TCP客户端

    近日需要做一些TCP的收发的调试,到网上去找TCP调试工具,找了好几款,发现不是功能不全就是不支持HEX,更重要的SSL也不支持,于是动手写了一款,叫TCPRunner,有以下特性: 使用异步IO方式 ...

  6. ASP.NET Web API WebHost宿主环境中管道、路由

    ASP.NET Web API WebHost宿主环境中管道.路由 前言 上篇中说到ASP.NET Web API框架在SelfHost环境中管道.路由的一个形态,本篇就来说明一下在WebHost环境 ...

  7. JavaScript语法

    通用变量var 强制整数parseint(): 强制小数parsefloat(): 是不是一个合法的数字isNaN(): if(判断条件) { 满足条件要执行的语句 } else{ 不满足条件要执行的 ...

  8. Atitit MATLAB 图像处理attilax总结

    Atitit MATLAB 图像处理attilax总结 1.1. 下载 Matlab7.0官方下载_Matlab2012 v7.0 官方简体中文版-办公软件-系统大全.html1 1.2. Matla ...

  9. 基于Caffe的DeepID2实现（中）

    小喵的唠叨话:我们在上一篇博客里面,介绍了Caffe的Data层的编写.有了Data层,下一步则是如何去使用生成好的训练数据.也就是这一篇的内容. 小喵的博客:http://www.miaoerduo ...

  10. C/S架构应用程序开发培训笔记

    最近为客户组织了一项C/S架构程序的开发培训,讲解C/S应用程序开发中需要注意的点. 我主要是做C/S方面的ERP/CRM程序开发,界面是用Windows Forms技术,有遗漏或错误的地方欢迎批评指 ...