html5+css3齿轮滚动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5+css3齿轮滚动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>html5+css3齿轮滚动动画特效</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="section4">
<div class="sec4-right">
	<div class="sec4-img-2"></div>
	<div class="sec4-img-3"></div>
	<div class="sec4-img-9"></div>
	<div class="sec4-img-4"></div>
	<div class="sec4-img-10"></div>
	<div class="sec4-img-5"></div>
	<div class="sec4-img-11"></div>
	<div class="sec4-img-6"></div>
	<div class="sec4-img-7"></div>
	<div class="sec4-img-8"></div>
	<div class="sec4-img-1"></div>
</div>
</div>


<script src="js/move.js"></script>

<script>
setInterval(function () {
	move('.sec4-img-1').set('bottom', '300px').set('opacity', '0').duration('2s').ease('in-out').end(function () {
		move('.sec4-img-1').set('bottom', '561px').set('opacity', '1').duration('0.1s').end();
	});
	move('.sec4-img-2').rotate(360).duration('15s').end(function () {
		move('.sec4-img-2').rotate(0).duration('0.01s').end();
	});
	move('.sec4-img-3').rotate(-360).duration('15s').end(function () {
		move('.sec4-img-3').rotate(0).duration('0.01s').end();
	});
	move('.sec4-img-4').rotate(360).duration('15s').end(function () {
		move('.sec4-img-4').rotate(0).duration('0.01s').end();
	});
	move('.sec4-img-5').rotate(-360).duration('15s').end(function () {
		move('.sec4-img-5').rotate(0).duration('0.01s').end();
	});
	move('.sec4-img-6').rotate(360).duration('15s').end(function () {
		move('.sec4-img-6').rotate(0).duration('0.01s').end();
	});
	move('.sec4-img-7').rotate(-360).duration('15s').end(function () {
		move('.sec4-img-7').rotate(0).duration('0.01s').end();
	});
}, 500);
</script>
</body>
</html>

JS代码(move.js):

;
	(function(){
	/** * Require the module at `name`. * * @param{
	String}
name * @return{
	Object}
exports * @api public */
function require(name){
	var module = require.modules[name];
	if (!module) throw new Error('failed to require "' + name + '"');
	if (!('exports' in module) && typeof module.definition === 'function'){
	module.client = module.component = true;
	module.definition.call(this,module.exports ={
}
,module);
	delete module.definition;
}
return module.exports;
}
/** * Meta info,accessible in the global scope unless you use AMD option. */
require.loader = 'component';
	/** * Internal helper object,contains a sorting function for semantiv versioning */
require.helper ={
}
;
	require.helper.semVerSort = function(a,b){
	var aArray = a.version.split('.');
	var bArray = b.version.split('.');
	for (var i=0;
	i<aArray.length;
	++i){
	var aInt = parseInt(aArray[i],10);
	var bInt = parseInt(bArray[i],10);
	if (aInt === bInt){
	var aLex = aArray[i].substr((""+aInt).length);
	var bLex = bArray[i].substr((""+bInt).length);
	if (aLex === '' && bLex !== '') return 1;
	if (aLex !== '' && bLex === '') return -1;
	if (aLex !== '' && bLex !== '') return aLex > bLex ? 1:-1;
	continue;
}
else if (aInt > bInt){
	return 1;
}
else{
	return -1;
}
}
return 0;
}
/** * Find and require a module which name starts with the provided name. * If multiple modules exists,the highest semver is used. * This function can only be used for remote dependencies. * @param{
	String}
name - module name:`user~repo` * @param{
	Boolean}
returnPath - returns the canonical require path if true,* otherwise it returns the epxorted module */
require.latest = function (name,returnPath){
	function showError(name){
	throw new Error('failed to find latest module of "' + name + '"');
}
// only remotes with semvers,ignore local files conataining a '/' var versionRegexp = /(.*)~(.*)@v?(\d+\.\d+\.\d+[^\/]*)$/;
	var remoteRegexp = /(.*)~(.*)/;
	if (!remoteRegexp.test(name)) showError(name);
	var moduleNames = Object.keys(require.modules);
	var semVerCandidates = [];
	var otherCandidates = [];
	// for instance:name of the git branch for (var i=0;
	i<moduleNames.length;
	i++){
	var moduleName = moduleNames[i];
	if (new RegExp(name + '@').test(moduleName)){
	var version = moduleName.substr(name.length+1);
	var semVerMatch = versionRegexp.exec(moduleName);
	if (semVerMatch != null){
	semVerCandidates.push({
	version:version,name:moduleName}
);
}
else{
	otherCandidates.push({
	version:version,name:moduleName}
);
}
}
}
if (semVerCandidates.concat(otherCandidates).length === 0){
	showError(name);
}
if (semVerCandidates.length > 0){
	var module = semVerCandidates.sort(require.helper.semVerSort).pop().name;
	if (returnPath === true){
	return module;
}
return require(module);
}
// if the build contains more than one branch of the same module // you should not use this funciton var module = otherCandidates.sort(function(a,b){
	return a.name > b.name}
)[0].name;
	if (returnPath === true){
	return module;
}
return require(module);
}
/** * Registered modules. */
require.modules ={
}
;
	/** * Register module at `name` with callback `definition`. * * @param{
	String}
name * @param{
	Function}
definition * @api private */
require.register = function (name,definition){
	require.modules[name] ={
	definition:definition}
;
}
;
	/** * Define a module's exports immediately with `exports`. * * @param{
	String}
name * @param{
	Generic}
exports * @api private */
require.define = function (name,exports){
	require.modules[name] ={
	exports:exports}
;
}
;
	require.register("component~transform-property@0.0.1",function (exports,module){
	var styles = [ 'webkitTransform','MozTransform','msTransform','OTransform','transform'];
	var el = document.createElement('p');
	var style;
	for (var i = 0;
	i < styles.length;
	i++){
	style = styles[i];
	if (null != el.style[style]){
	module.exports = style;
	break;
}
}
}
);
	require.register("component~has-translate3d@0.0.3",function (exports,module){
	var prop = require('component~transform-property@0.0.1');
	// IE <=8 doesn't have `getComputedStyle`if (!prop || !window.getComputedStyle){
	module.exports = false;
}
else{
	var map ={
	webkitTransform:'-webkit-transform',OTransform:'-o-transform',msTransform:'-ms-transform',MozTransform:'-moz-transform',transform:'transform'}
;
	// from:https://gist.github.com/lorenzopolidori/3794226 var el = document.createElement('div');
	el.style[prop] = 'translate3d(1px,1px,1px)';
	document.body.insertBefore(el,null);
	var val = getComputedStyle(el).getPropertyValue(map[prop]);
	document.body.removeChild(el);
	module.exports = null != val && val.length && 'none' != val;
}
}
);
	require.register("yields~has-transitions@1.0.0",function (exports,module){
	/** * Check if `el` or browser supports transitions. * * @param{
	Element}
el * @return{
	Boolean}
* @api public */
exports = module.exports = function(el){
	switch (arguments.length){
	case 0:return bool;
	case 1:return bool ? transitions(el):bool;
}
}
;
	/** * Check if the given `el` has transitions. * * @param{
	Element}
el * @return{
	Boolean}
* @api private */
function transitions(el,styl){
	if (el.transition) return true;
	styl = window.getComputedStyle(el);
	return !! parseFloat(styl.transitionDuration,10);
}
/** * Style. */
var styl = document.body.style;
	/** * Export support. */
var bool = 'transition' in styl || 'webkitTransition' in styl || 'MozTransition' in styl || 'msTransition' in styl;
}
);
	require.register("component~event@0.1.4",function (exports,module){
	var bind = window.addEventListener ? 'addEventListener':'attachEvent',unbind = window.removeEventListener ? 'removeEventListener':'detachEvent',prefix = bind !== 'addEventListener' ? 'on':'';
	/** * Bind `el` event `type` to `fn`. * * @param{
	Element}
el * @param{
	String}
type * @param{
	Function}
fn * @param{
	Boolean}
capture * @return{
	Function}
* @api public */
exports.bind = function(el,type,fn,capture){
	el[bind](prefix + type,fn,capture || false);
	return fn;
}
;
	/** * Unbind `el` event `type`'s callback `fn`. * * @param{
	Element}
el * @param{
	String}
type * @param{
	Function}
fn * @param{
	Boolean}
capture * @return{
	Function}
* @api public */
exports.unbind = function(el,type,fn,capture){
	el[unbind](prefix + type,fn,capture || false);
	return fn;
}
;
}
);
	require.register("ecarter~css-emitter@0.0.1",function (exports,module){
	/** * Module Dependencies */
var events = require('component~event@0.1.4');
	// CSS eventsvar watch = [ 'transitionend','webkitTransitionEnd','oTransitionEnd','MSTransitionEnd','animationend','webkitAnimationEnd','oAnimationEnd','MSAnimationEnd'];
	/** * Expose `CSSnext` */
module.exports = CssEmitter;
	/** * Initialize a new `CssEmitter` * */
function CssEmitter(element){
	if (!(this instanceof CssEmitter)) return new CssEmitter(element);
	this.el = element;
}
/** * Bind CSS events. * * @api public */
CssEmitter.prototype.bind = function(fn){
	for (var i=0;
	i < watch.length;
	i++){
	events.bind(this.el,watch[i],fn);
}
return this;
}
;
	/** * Unbind CSS events * * @api public */
CssEmitter.prototype.unbind = function(fn){
	for (var i=0;
	i < watch.length;
	i++){
	events.unbind(this.el,watch[i],fn);
}
return this;
}
;
	/** * Fire callback only once * * @api public */
CssEmitter.prototype.once = function(fn){
	var self = this;
	function on(){
	self.unbind(on);
	fn.apply(self.el,arguments);
}
self.bind(on);
	return this;
}
;
}
);
	require.register("component~once@0.0.1",function (exports,module){
	/** * Identifier. */
var n = 0;
	/** * Global. */
var global = (function(){
	return this}
)();
	/** * Make `fn` callable only once. * * @param{
	Function}
fn * @return{
	Function}
* @api public */
module.exports = function(fn){
	var id = n++;
	function once(){
	// no receiver if (this == global){
	if (once.called) return;
	once.called = true;
	return fn.apply(this,arguments);
}
// receiver var key = '__called_' + id + '__';
	if (this[key]) return;
	this[key] = true;
	return fn.apply(this,arguments);
}
return once;
}
;
}
);
	require.register("yields~after-transition@0.0.1",function (exports,module){
	/** * dependencies */
var has = require('yields~has-transitions@1.0.0'),emitter = require('ecarter~css-emitter@0.0.1'),once = require('component~once@0.0.1');
	/** * Transition support. */
var supported = has();
	/** * Export `after` */
module.exports = after;
	/** * Invoke the given `fn` after transitions * * It will be invoked only if the browser * supports transitions __and__ * the element has transitions * set in `.style` or css. * * @param{
	Element}
el * @param{
	Function}
fn * @return{
	Function}
fn * @api public */
function after(el,fn){
	if (!supported || !has(el)) return fn();
	emitter(el).bind(fn);
	return fn;
}
;
	/** * Same as `after()` only the function is invoked once. * * @param{
	Element}
el * @param{
	Function}
fn * @return{
	Function}
* @api public */
after.once = function(el,fn){
	var callback = once(fn);
	after(el,fn = function(){
	emitter(el).unbind(fn);
	callback();
}
);
}
;
}
);
	require.register("component~emitter@1.2.0",function (exports,module){
	/** * Expose `Emitter`. */
module.exports = Emitter;
	/** * Initialize a new `Emitter`. * * @api public */
function Emitter(obj){
	if (obj) return mixin(obj);
}
;
	/** * Mixin the emitter properties. * * @param{
	Object}
obj * @return{
	Object}
* @api private */
function mixin(obj){
	for (var key in Emitter.prototype){
	obj[key] = Emitter.prototype[key];
}
return obj;
}
/** * Listen on the given `event` with `fn`. * * @param{
	String}
event * @param{
	Function}
fn * @return{
	Emitter}
* @api public */
Emitter.prototype.on =Emitter.prototype.addEventListener = function(event,fn){
	this._callbacks = this._callbacks ||{
}
;
	(this._callbacks['$' + event] = this._callbacks['$' + event] || []) .push(fn);
	return this;
}
;
	/** * Adds an `event` listener that will be invoked a single * time then automatically removed. * * @param{
	String}
event * @param{
	Function}
fn * @return{
	Emitter}
* @api public */
Emitter.prototype.once = function(event,fn){
	function on(){
	this.off(event,on);
	fn.apply(this,arguments);
}
on.fn = fn;
	this.on(event,on);
	return this;
}
;
	/** * Remove the given callback for `event` or all * registered callbacks. * * @param{
	String}
event * @param{
	Function}
fn * @return{
	Emitter}
* @api public */
Emitter.prototype.off =Emitter.prototype.removeListener =Emitter.prototype.removeAllListeners =Emitter.prototype.removeEventListener = function(event,fn){
	this._callbacks = this._callbacks ||{
}
;
	// all if (0 == arguments.length){
	this._callbacks ={
}
;
	return this;
}
// specific event var callbacks = this._callbacks['$' + event];
	if (!callbacks) return this;
	// remove all handlers if (1 == arguments.length){
	delete this._callbacks['$' + event];
	return this;
}
// remove specific handler var cb;
	for (var i = 0;
	i < callbacks.length;
	i++){
	cb = callbacks[i];
	if (cb === fn || cb.fn === fn){
	callbacks.splice(i,1);
	break;
}
}
return this;
}
;
	/** * Emit `event` with the given args. * * @param{
	String}
event * @param{
	Mixed}
... * @return{
	Emitter}
*/
Emitter.prototype.emit = function(event){
	this._callbacks = this._callbacks ||{
}
;
	var args = [].slice.call(arguments,1),callbacks = this._callbacks['$' + event];
	if (callbacks){
	callbacks = callbacks.slice(0);
	for (var i = 0,len = callbacks.length;
	i < len;
	++i){
	callbacks[i].apply(this,args);
}
}
return this;
}
;
	/** * Return array of callbacks for `event`. * * @param{
	String}
event * @return{
	Array}
* @api public */
Emitter.prototype.listeners = function(event){
	this._callbacks = this._callbacks ||{
}
;
	return this._callbacks['$' + event] || [];
}
;
	/** * Check if this emitter has `event` handlers. * * @param{
	String}
event * @return{
	Boolean}
* @api public */
Emitter.prototype.hasListeners = function(event){
	return !! this.listeners(event).length;
}
;
}
);
	require.register("yields~css-ease@0.0.1",function (exports,module){
	/** * CSS Easing functions */
module.exports ={
	'in':'ease-in','out':'ease-out','in-out':'ease-in-out','snap':'cubic-bezier(0,1,.5,1)','linear':'cubic-bezier(0.250,0.250,0.750,0.750)','ease-in-quad':'cubic-bezier(0.550,0.085,0.680,0.530)','ease-in-cubic':'cubic-bezier(0.550,0.055,0.675,0.190)','ease-in-quart':'cubic-bezier(0.895,0.030,0.685,0.220)','ease-in-quint':'cubic-bezier(0.755,0.050,0.855,0.060)','ease-in-sine':'cubic-bezier(0.470,0.000,0.745,0.715)','ease-in-expo':'cubic-bezier(0.950,0.050,0.795,0.035)','ease-in-circ':'cubic-bezier(0.600,0.040,0.980,0.335)','ease-in-back':'cubic-bezier(0.600,-0.280,0.735,0.045)','ease-out-quad':'cubic-bezier(0.250,0.460,0.450,0.940)','ease-out-cubic':'cubic-bezier(0.215,0.610,0.355,1.000)','ease-out-quart':'cubic-bezier(0.165,0.840,0.440,1.000)','ease-out-quint':'cubic-bezier(0.230,1.000,0.320,1.000)','ease-out-sine':'cubic-bezier(0.390,0.575,0.565,1.000)','ease-out-expo':'cubic-bezier(0.190,1.000,0.220,1.000)','ease-out-circ':'cubic-bezier(0.075,0.820,0.165,1.000)','ease-out-back':'cubic-bezier(0.175,0.885,0.320,1.275)','ease-out-quad':'cubic-bezier(0.455,0.030,0.515,0.955)','ease-out-cubic':'cubic-bezier(0.645,0.045,0.355,1.000)','ease-in-out-quart':'cubic-bezier(0.770,0.000,0.175,1.000)','ease-in-out-quint':'cubic-bezier(0.860,0.000,0.070,1.000)','ease-in-out-sine':'cubic-bezier(0.445,0.050,0.550,0.950)','ease-in-out-expo':'cubic-bezier(1.000,0.000,0.000,1.000)','ease-in-out-circ':'cubic-bezier(0.785,0.135,0.150,0.860)','ease-in-out-back':'cubic-bezier(0.680,-0.550,0.265,1.550)'}
;
}
);
	require.register("component~query@0.0.3",function (exports,module){
	function one(selector,el){
	return el.querySelector(selector);
}
exports = module.exports = function(selector,el){
	el = el || document;
	return one(selector,el);
}
;
	exports.all = function(selector,el){
	el = el || document;
	return el.querySelectorAll(selector);
}
;
	exports.engine = function(obj){
	if (!obj.one) throw new Error('.one callback required');
	if (!obj.all) throw new Error('.all callback required');
	one = obj.one;
	exports.all = obj.all;
	return exports;
}
;
}
);
	require.register("move",function (exports,module){
	/** * Module Dependencies. */
var Emitter = require('component~emitter@1.2.0');
	var query = require('component~query@0.0.3');
	var after = require('yields~after-transition@0.0.1');
	var has3d = require('component~has-translate3d@0.0.3');
	var ease = require('yields~css-ease@0.0.1');
	/** * CSS Translate */
var translate = has3d ? ['translate3d(',',0)']:['translate(',')'];
	/** * Export `Move` */
module.exports = Move;
	/** * Get computed style. */
var style = window.getComputedStyle || window.currentStyle;
	/** * Library version. */
Move.version = '0.5.0';
	/** * Export `ease` */
Move.ease = ease;
	/** * Defaults. * * `duration` - default duration of 500ms * */
Move.defaults ={
	duration:500}
;
	/** * Default element selection utilized by `move(selector)`. * * Override to implement your own selection,for example * with jQuery one might write:* * move.select = function(selector){
	* return jQuery(selector).get(0);
	*}
;
	* * @param{
	Object|String}
selector * @return{
	Element}
* @api public */
Move.select = function(selector){
	if ('string' != typeof selector) return selector;
	return query(selector);
}
;
	/** * Initialize a new `Move` with the given `el`. * * @param{
	Element}
el * @api public */
function Move(el){
	if (!(this instanceof Move)) return new Move(el);
	if ('string' == typeof el) el = query(el);
	if (!el) throw new TypeError('Move must be initialized with element or selector');
	this.el = el;
	this._props ={
}
;
	this._rotate = 0;
	this._transitionProps = [];
	this._transforms = [];
	this.duration(Move.defaults.duration)}
;
	/** * Inherit from `EventEmitter.prototype`. */
Emitter(Move.prototype);
	/** * Buffer `transform`. * * @param{
	String}
transform * @return{
	Move}
for chaining * @api private */
Move.prototype.transform = function(transform){
	this._transforms.push(transform);
	return this;
}
;
	/** * Skew `x` and `y`. * * @param{
	Number}
x * @param{
	Number}
y * @return{
	Move}
for chaining * @api public */
Move.prototype.skew = function(x,y){
	return this.transform('skew(' + x + 'deg,' + (y || 0) + 'deg)');
}
;
	/** * Skew x by `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.skewX = function(n){
	return this.transform('skewX(' + n + 'deg)');
}
;
	/** * Skew y by `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.skewY = function(n){
	return this.transform('skewY(' + n + 'deg)');
}
;
	/** * Translate `x` and `y` axis. * * @param{
	Number}
x * @param{
	Number}
y * @return{
	Move}
for chaining * @api public */
Move.prototype.translate =Move.prototype.to = function(x,y){
	return this.transform(translate.join('' + x +'px,' + (y || 0) + 'px'));
}
;
	/** * Translate on the x axis to `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.translateX =Move.prototype.x = function(n){
	return this.transform('translateX(' + n + 'px)');
}
;
	/** * Translate on the y axis to `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.translateY =Move.prototype.y = function(n){
	return this.transform('translateY(' + n + 'px)');
}
;
	/** * Scale the x and y axis by `x`,or * individually scale `x` and `y`. * * @param{
	Number}
x * @param{
	Number}
y * @return{
	Move}
for chaining * @api public */
Move.prototype.scale = function(x,y){
	return this.transform('scale(' + x + ',' + (y || x) + ')');
}
;
	/** * Scale x axis by `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.scaleX = function(n){
	return this.transform('scaleX(' + n + ')')}
;
	/** * Apply a matrix transformation * * @param{
	Number}
m11 A matrix coefficient * @param{
	Number}
m12 A matrix coefficient * @param{
	Number}
m21 A matrix coefficient * @param{
	Number}
m22 A matrix coefficient * @param{
	Number}
m31 A matrix coefficient * @param{
	Number}
m32 A matrix coefficient * @return{
	Move}
for chaining * @api public */
Move.prototype.matrix = function(m11,m12,m21,m22,m31,m32){
	return this.transform('matrix(' + [m11,m12,m21,m22,m31,m32].join(',') + ')');
}
;
	/** * Scale y axis by `n`. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.scaleY = function(n){
	return this.transform('scaleY(' + n + ')')}
;
	/** * Rotate `n` degrees. * * @param{
	Number}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.rotate = function(n){
	return this.transform('rotate(' + n + 'deg)');
}
;
	/** * Set transition easing function to to `fn` string. * * When:* * - null "ease" is used * - "in" "ease-in" is used * - "out" "ease-out" is used * - "in-out" "ease-in-out" is used * * @param{
	String}
fn * @return{
	Move}
for chaining * @api public */
Move.prototype.ease = function(fn){
	fn = ease[fn] || fn || 'ease';
	return this.setVendorProperty('transition-timing-function',fn);
}
;
	/** * Set animation properties * * @param{
	String}
name * @param{
	Object}
props * @return{
	Move}
for chaining * @api public */
Move.prototype.animate = function(name,props){
	for (var i in props){
	if (props.hasOwnProperty(i)){
	this.setVendorProperty('animation-' + i,props[i])}
}
return this.setVendorProperty('animation-name',name);
}
/** * Set duration to `n`. * * @param{
	Number|String}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.duration = function(n){
	n = this._duration = 'string' == typeof n ? parseFloat(n) * 1000:n;
	return this.setVendorProperty('transition-duration',n + 'ms');
}
;
	/** * Delay the animation by `n`. * * @param{
	Number|String}
n * @return{
	Move}
for chaining * @api public */
Move.prototype.delay = function(n){
	n = 'string' == typeof n ? parseFloat(n) * 1000:n;
	return this.setVendorProperty('transition-delay',n + 'ms');
}
;
	/** * Set `prop` to `val`,deferred until `.end()` is invoked. * * @param{
	String}
prop * @param{
	String}
val * @return{
	Move}
for chaining * @api public */
Move.prototype.setProperty = function(prop,val){
	this._props[prop] = val;
	return this;
}
;
	/** * Set a vendor prefixed `prop` with the given `val`. * * @param{
	String}
prop * @param{
	String}
val * @return{
	Move}
for chaining * @api public */
Move.prototype.setVendorProperty = function(prop,val){
	this.setProperty('-webkit-' + prop,val);
	this.setProperty('-moz-' + prop,val);
	this.setProperty('-ms-' + prop,val);
	this.setProperty('-o-' + prop,val);
	return this;
}
;
	/** * Set `prop` to `value`,deferred until `.end()` is invoked * and adds the property to the list of transition props. * * @param{
	String}
prop * @param{
	String}
val * @return{
	Move}
for chaining * @api public */
Move.prototype.set = function(prop,val){
	this.transition(prop);
	this._props[prop] = val;
	return this;
}
;
	/** * Increment `prop` by `val`,deferred until `.end()` is invoked * and adds the property to the list of transition props. * * @param{
	String}
prop * @param{
	Number}
val * @return{
	Move}
for chaining * @api public */
Move.prototype.add = function(prop,val){
	if (!style) return;
	var self = this;
	return this.on('start',function(){
	var curr = parseInt(self.current(prop),10);
	self.set(prop,curr + val + 'px');
}
);
}
;
	/** * Decrement `prop` by `val`,deferred until `.end()` is invoked * and adds the property to the list of transition props. * * @param{
	String}
prop * @param{
	Number}
val * @return{
	Move}
for chaining * @api public */
Move.prototype.sub = function(prop,val){
	if (!style) return;
	var self = this;
	return this.on('start',function(){
	var curr = parseInt(self.current(prop),10);
	self.set(prop,curr - val + 'px');
}
);
}
;
	/** * Get computed or "current" value of `prop`. * * @param{
	String}
prop * @return{
	String}
* @api public */
Move.prototype.current = function(prop){
	return style(this.el).getPropertyValue(prop);
}
;
	/** * Add `prop` to the list of internal transition properties. * * @param{
	String}
prop * @return{
	Move}
for chaining * @api private */
Move.prototype.transition = function(prop){
	if (!this._transitionProps.indexOf(prop)) return this;
	this._transitionProps.push(prop);
	return this;
}
;
	/** * Commit style properties,aka apply them to `el.style`. * * @return{
	Move}
for chaining * @see Move#end() * @api private */
Move.prototype.applyProperties = function(){
	for (var prop in this._props){
	this.el.style.setProperty(prop,this._props[prop],'');
}
return this;
}
;
	/** * Re-select element via `selector`,replacing * the current element. * * @param{
	String}
selector * @return{
	Move}
for chaining * @api public */
Move.prototype.move =Move.prototype.select = function(selector){
	this.el = Move.select(selector);
	return this;
}
;
	/** * Defer the given `fn` until the animation * is complete. `fn` may be one of the following:* * - a function to invoke * - an instanceof `Move` to call `.end()` * - nothing,to return a clone of this `Move` instance for chaining * * @param{
	Function|Move}
fn * @return{
	Move}
for chaining * @api public */
Move.prototype.then = function(fn){
	// invoke .end() if (fn instanceof Move){
	this.on('end',function(){
	fn.end();
}
);
	// callback}
else if ('function' == typeof fn){
	this.on('end',fn);
	// chain}
else{
	var clone = new Move(this.el);
	clone._transforms = this._transforms.slice(0);
	this.then(clone);
	clone.parent = this;
	return clone;
}
return this;
}
;
	/** * Pop the move context. * * @return{
	Move}
parent Move * @api public */
Move.prototype.pop = function(){
	return this.parent;
}
;
	/** * Reset duration. * * @return{
	Move}
* @api public */
Move.prototype.reset = function(){
	this.el.style.webkitTransitionDuration = this.el.style.mozTransitionDuration = this.el.style.msTransitionDuration = this.el.style.oTransitionDuration = '';
	return this;
}
;
	/** * Start animation,optionally calling `fn` when complete. * * @param{
	Function}
fn * @return{
	Move}
for chaining * @api public */
Move.prototype.end = function(fn){
	var self = this;
	// emit "start" event this.emit('start');
	// transforms if (this._transforms.length){
	this.setVendorProperty('transform',this._transforms.join(' '));
}
// transition properties this.setVendorProperty('transition-properties',this._transitionProps.join(','));
	this.applyProperties();
	// callback given if (fn) this.then(fn);
	// emit "end" when complete after.once(this.el,function(){
	self.reset();
	self.emit('end');
}
);
	return this;
}
;
}
);
	if (typeof exports == "object"){
	module.exports = require("move");
}
else if (typeof define == "function" && define.amd){
	define("move",[],function(){
	return require("move");
}
);
}
else{
	(this || window)["move"] = require("move");
}
}
)()

CSS代码(index.css):

*{margin:0;padding:0;}
html,body{height:100%;}
.section4{height:100%;background:url(../images/sec-bg_03.jpg) no-repeat center;}
.sec4-right{width:800px;height:900px;position:relative;left:50%;margin-left:-400px;}
.sec4-right div{position:absolute;}
.sec4-img-1{width:30px;height:30px;background:url(../images/sec4-icon-1.png) no-repeat center;left:413px;bottom:561px;}
.sec4-img-2{width:70px;height:70px;background:url(../images/sec4-icon-2.png) no-repeat center;left:30px;bottom:647px;}
.sec4-img-3{width:110px;height:110px;background:url(../images/sec4-icon-3.png) no-repeat center;right:43px;bottom:584px;}
.sec4-img-4{width:135px;height:135px;background:url(../images/sec4-icon-4.png) no-repeat center;left:289px;bottom:446px;}
.sec4-img-5{width:105px;height:105px;background:url(../images/sec4-icon-5.png) no-repeat center;left:419px;bottom:442px;}
.sec4-img-6{width:180px;height:180px;background:url(../images/sec4-icon-6.png) no-repeat center;left:475px;bottom:505px;}
.sec4-img-7{width:240px;height:240px;background:url(../images/sec4-icon-7.png) no-repeat center;left:66px;bottom:466px;}
.sec4-img-8{width:800px;height:100%;background:url(../images/sec4-img.png) no-repeat bottom right;left:0px;bottom:0px;}
.sec4-img-9{width:30px;height:42px;background:url(../images/sec4-icon-8.png) no-repeat bottom right;left:285px;bottom:460px;}
.sec4-img-10{width:60px;height:60px;background:url(../images/sec4-icon-9.png) no-repeat bottom right;left:495px;bottom:440px;}
.sec4-img-11{width:70px;height:50px;background:url(../images/sec4-icon-10.png) no-repeat bottom right;right:111px;bottom:501px;}

附件:下载该文件资源,减少时间成本(增值服务)