jQuery金币抽奖效果js代码

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

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

以下是 jQuery金币抽奖效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery金币抽奖效果代码下载</title>
<link href="css/animator.css" rel="stylesheet" />
<style type="text/css">
	.main {
		width: 200px;
		margin: 0 auto;
	}

	.item1 {
		height: 150px;
		position: relative;
		padding: 30px;
		text-align: center;
		-webkit-transition: top 1.2s linear;
		transition: top 1.2s linear;
	}

		.item1 .kodai {
			position: absolute;
			bottom: 0;
			cursor: pointer;
		}

			.item1 .kodai .full {
				display: block;
			}

			.item1 .kodai .empty {
				display: none;
			}

		.item1 .clipped-box {
			display: none;
			position: absolute;
			bottom: 40px;
			left: 80px;
			height: 540px;
			width: 980px;
		}

			.item1 .clipped-box img {
				position: absolute;
				top: auto;
				left: 0;
				bottom: 0;
				-webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
				transition: transform 1.4s ease-in;
			}
</style>

</head>
<body>

<div class="main">
	<div class="item1">
		<div class="kodai">
			<img src="images/kd2.png" class="full" />
			<img src="images/kd1.png" class="empty" />
		</div>
		<div class="clipped-box">

		</div>
	</div>
	<p id="html"></p>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>

JS代码(javascript.js):

$(document).ready(function (){
	(genClips = function (){
	$t = $('.item1');
	var amount = 5;
	var width = $t.width() / amount;
	var height = $t.height() / amount;
	var totalSquares = Math.pow(amount,2);
	var y = 0;
	var index = 1;
	for (var z = 0;
	z <= (amount * width);
	z = z + width){
	$('<img class="clipped" src="images/jb' + index + '.png" />').appendTo($('.item1 .clipped-box'));
	if (z === (amount * width) - width){
	y = y + height;
	z = -width;
}
if (index >= 5){
	index = 1;
}
index++;
	if (y === (amount * height)){
	z = 9999999;
}
}
}
)();
	function rand(min,max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
var first = false,clicked = false;
	// On click $('.item1 div.kodai').on('click',function (){
	if (clicked === false){
	$('.full').css({
	'display':'none'}
);
	$('.empty').css({
	'display':'block'}
);
	clicked = true;
	$('.item1 .clipped-box').css({
	'display':'block'}
);
	// Apply to each clipped-box div. $('.clipped-box img').each(function (){
	var v = rand(120,90),angle = rand(80,89),theta = (angle * Math.PI) / 180,g = -9.8;
	// $(this) as self var self = $(this);
	var t = 0,z,r,nx,ny,totalt =10;
	var negate = [1,-1,0],direction = negate[Math.floor(Math.random() * negate.length)];
	var randDeg = rand(-5,10),randScale = rand(0.9,1.1),randDeg2 = rand(30,5);
	// And apply those $(this).css({
	'transform':'scale(' + randScale + ') skew(' + randDeg + 'deg) rotateZ(' + randDeg2 + 'deg)'}
);
	// Set an interval z = setInterval(function (){
	var ux = (Math.cos(theta) * v) * direction;
	var uy = (Math.sin(theta) * v) - ((-g) * t);
	nx = (ux * t);
	ny = (uy * t) + (0.25 * (g) * Math.pow(t,2));
	if (ny < -40){
	ny = -40;
}
//$("#html").html("g:" + g + "bottom:" + ny + "left:" + nx + "direction:" + direction);
	$(self).css({
	'bottom':(ny) + 'px','left':(nx) + 'px'}
);
	// Increase the time by 0.10 t = t + 0.10;
	//����ѭ�� if (t > totalt){
	clicked = false;
	first = true;
	clearInterval(z);
}
}
,20);
}
);
}
}
);
	r = setInterval(function (){
	if (first === true){
	$('.empty').addClass("Shake");
	//�ζ��մ��� //TODO:�մ��ӻζ����� �͵��� ����� first = false;
}
}
,300);
}
);

CSS代码(animator.css):

/*! * Animator Beta * http://animator.ringotc.net * * Copyright 2014 RingoTC * Released under the MIT license * ringo.me@hotmail.com * * Date:2014-07-07 */
.Bounce,.Flip,.Flash,.Shake,.Wobble,.Tada,.RubberBand,.Swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.BounceIn,.BounceInT,.BounceInL,.BounceInR,.BounceInB,.FadeIn,.FadeInT,.FadeInL,.FadeInR,.FadeInB,.Flip,.FlipInX,.FlipInY,.LightSpeedIn{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
.BounceOutT,.BounceOutL,.BounceOutR,.BounceOutB,.FadeOut,.FadeOutT,.FadeOutL,.FadeOutR,.FadeOutB,.BounceOut,.FlipOutX,.FlipOutY,.LightSpeedOut{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
.Bounce{-webkit-animation-name:Bounce;-moz-animation-name:Bounce;-ms-animation-name:Bounce;animation-name:Bounce;}
.BounceIn{-webkit-animation-name:BounceIn;-moz-animation-name:BounceIn;-ms-animation-name:BounceIn;animation-name:BounceIn;}
.BounceInT{-webkit-animation-name:BounceInT;-moz-animation-name:BounceInT;-ms-animation-name:BounceInT;animation-name:BounceInT;}
.BounceInL{-webkit-animation-name:BounceInL;-moz-animation-name:BounceInL;-ms-animation-name:BounceInL;animation-name:BounceInL;}
.BounceInR{-webkit-animation-name:BounceInR;-moz-animation-name:BounceInR;-ms-animation-name:BounceInR;animation-name:BounceInR;}
.BounceInB{-webkit-animation-name:BounceInB;-moz-animation-name:BounceInB;-ms-animation-name:BounceInB;animation-name:BounceInB;}
.BounceOut{-webkit-animation-name:BounceOut;-moz-animation-name:BounceOut;-ms-animation-name:BounceOut;animation-name:BounceOut;}
.BounceOutT{-webkit-animation-name:BounceOutT;-moz-animation-name:BounceOutT;-ms-animation-name:BounceOutT;animation-name:BounceOutT;}
.BounceOutL{-webkit-animation-name:BounceOutL;-moz-animation-name:BounceOutL;-ms-animation-name:BounceOutL;animation-name:BounceOutL;}
.BounceOutR{-webkit-animation-name:BounceOutR;-moz-animation-name:BounceOutR;-ms-animation-name:BounceOutR;animation-name:BounceOutR;}
.BounceOutB{-webkit-animation-name:BounceOutB;-moz-animation-name:BounceOutB;-ms-animation-name:BounceOutB;animation-name:BounceOutB;}
.FadeIn{-webkit-animation-name:FadeIn;-moz-animation-name:FadeIn;-ms-animation-name:FadeIn;animation-name:FadeIn;}
.FadeInT{-webkit-animation-name:FadeInT;-moz-animation-name:FadeInT;-ms-animation-name:FadeInT;animation-name:FadeInT;}
.FadeInL{-webkit-animation-name:FadeInL;-moz-animation-name:FadeInL;-ms-animation-name:FadeInL;animation-name:FadeInL;}
.FadeInR{-webkit-animation-name:FadeInR;-moz-animation-name:FadeInR;-ms-animation-name:FadeInR;animation-name:FadeInR;}
.FadeInB{-webkit-animation-name:FadeInB;-moz-animation-name:FadeInB;-ms-animation-name:FadeInB;animation-name:FadeInB;}
.FadeOut{-webkit-animation-name:FadeOut;-moz-animation-name:FadeOut;-ms-animation-name:FadeOut;animation-name:FadeOut;}
.FadeOutT{-webkit-animation-name:FadeOutT;-moz-animation-name:FadeOutT;-ms-animation-name:FadeOutT;animation-name:FadeOutT;}
.FadeOutL{-webkit-animation-name:FadeOutL;-moz-animation-name:FadeOutL;-ms-animation-name:FadeOutL;animation-name:FadeOutL;}
.FadeOutR{-webkit-animation-name:FadeOutR;-moz-animation-name:FadeOutR;-ms-animation-name:FadeOutR;animation-name:FadeOutR;}
.FadeOutB{-webkit-animation-name:FadeOutB;-moz-animation-name:FadeOutB;-ms-animation-name:FadeOutB;animation-name:FadeOutB;}
.Flip{-webkit-animation-name:Flip;-moz-animation-name:Flip;-ms-animation-name:Flip;animation-name:Flip;}
.FlipInX{-webkit-animation-name:FlipInX;-moz-animation-name:FlipInX;-ms-animation-name:FlipInX;animation-name:FlipInX;}
.FlipInY{-webkit-animation-name:FlipInY;-moz-animation-name:FlipInY;-ms-animation-name:FlipInY;animation-name:FlipInY;}
.FlipOutX{-webkit-animation-name:FlipOutX;-moz-animation-name:FlipOutX;-ms-animation-name:FlipOutX;animation-name:FlipOutX;}
.FlipOut,.FlipOutY{-webkit-animation-name:FlipOutY;-moz-animation-name:FlipOutY;-ms-animation-name:FlipOutY;animation-name:FlipOutY;}
.Flash{-webkit-animation-name:Flash;-moz-animation-name:Flash;-ms-animation-name:Flash;animation-name:Flash;}
.Shake{-webkit-animation-name:Shake;-moz-animation-name:Shake;-ms-animation-name:Shake;animation-name:Shake;}
.Swing{-webkit-animation-name:Swing;-moz-animation-name:Swing;-ms-animation-name:swing;animation-name:Swing;}
.Wobble{-webkit-animation-name:Wobble;-moz-animation-name:Wobble;-ms-animation-name:Wobble;animation-name:Wobble;}
.Tada{-webkit-animation-name:Tada;-moz-animation-name:Tada;-ms-animation-name:Tada;animation-name:Tada;}
.RubberBand{-webkit-animation-name:RubberBand;-moz-animation-name:RubberBand;-ms-animation-name:RubberBand;animation-name:RubberBand;}
.LightSpeedIn{-webkit-animation-name:LightSpeedIn;-moz-animation-name:LightSpeedIn;-ms-animation-name:LightSpeedIn;animation-name:LightSpeedIn;}
.LightSpeedOut{-webkit-animation-name:LightSpeedOut;-moz-animation-name:LightSpeedOut;-ms-animation-name:LightSpeedOut;animation-name:LightSpeedOut;}
@-webkit-keyframes RubberBand{0%{-webkit-transform:scale(1);transform:scale(1);}
30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-webkit-transform:scale(1);transform:scale(1);}
}
@-moz-keyframes RubberBand{0%{-moz-transform:scale(1);transform:scale(1);}
30%{-moz-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-moz-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-moz-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-moz-transform:scale(1);transform:scale(1);}
}
@-ms-keyframes RubberBand{0%{-ms-transform:scale(1);transform:scale(1);}
30%{-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{-ms-transform:scale(1);transform:scale(1);}
}
@keyframes RubberBand{0%{transform:scale(1);transform:scale(1);}
30%{transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}
40%{transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}
60%{transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}
100%{transform:scale(1);transform:scale(1);}
}
@-webkit-keyframes LightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-ms-keyframes LightSpeedIn{0%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-moz-keyframes LightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-moz-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-moz-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@keyframes LightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-webkit-keyframes LightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@-moz-keyframes LightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@-ms-keyframes LightSpeedOut{0%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@keyframes LightSpeedOut{0%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}
100%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@-webkit-keyframes Bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes Bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes Bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
40%{-ms-transform:translateY(-30px);}
60%{-ms-transform:translateY(-15px);}
}
@keyframes Bounce{0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
@-webkit-keyframes BounceIn{0%{opacity:0;-webkit-transform:scale(0.3);}
50%{opacity:1;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(0.9);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes BounceIn{0%{opacity:0;-moz-transform:scale(0.3);}
50%{opacity:1;-moz-transform:scale(1.05);}
70%{-moz-transform:scale(0.9);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes BounceIn{0%{opacity:0;-ms-transform:scale(0.3);}
50%{opacity:1;-ms-transform:scale(1.05);}
70%{-ms-transform:scale(0.9);}
100%{-ms-transform:scale(1);}
}
@keyframes BounceIn{0%{opacity:0;transform:scale(0.3);}
50%{opacity:1;transform:scale(1.05);}
70%{transform:scale(0.9);}
100%{transform:scale(1);}
}
@-webkit-keyframes BounceInT{0%{opacity:0;-webkit-transform:translateY(-100px);}
50%{opacity:1;-webkit-transform:translateY(30px);}
70%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0px);}
}
@-moz-keyframes BounceInT{0%{opacity:0;-moz-transform:translateY(-100px);}
60%{opacity:1;-moz-transform:translateY(30px);}
80%{-moz-transform:translateY(-10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes BounceInT{0%{opacity:0;-ms-transform:translateY(-100px);}
60%{opacity:1;-ms-transform:translateY(30px);}
80%{-ms-transform:translateY(-10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes BounceInT{0%{opacity:0;transform:translateY(-100px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
@-webkit-keyframes BounceInR{0%{opacity:0;-webkit-transform:translateX(100px);}
60%{opacity:1;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes BounceInR{0%{opacity:0;-moz-transform:translateX(100px);}
60%{opacity:1;-moz-transform:translateX(-30px);}
80%{-moz-transform:translateX(10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes BounceInR{0%{opacity:0;-ms-transform:translateX(100px);}
60%{opacity:1;-ms-transform:translateX(-30px);}
80%{-ms-transform:translateX(10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes BounceInR{0%{opacity:0;transform:translateX(100px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
@-webkit-keyframes BounceInL{0%{opacity:0;-webkit-transform:translateX(-100px);}
60%{opacity:1;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes BounceInL{0%{opacity:0;-moz-transform:translateX(-100px);}
60%{opacity:1;-moz-transform:translateX(30px);}
80%{-moz-transform:translateX(-10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes BounceInL{0%{opacity:0;-ms-transform:translateX(-100px);}
60%{opacity:1;-ms-transform:translateX(30px);}
80%{-ms-transform:translateX(-10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes BounceInL{0%{opacity:0;transform:translateX(-100px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0);}
}
@-webkit-keyframes BounceInB{0%{opacity:0;-webkit-transform:translateY(100px);}
60%{opacity:1;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes BounceInB{0%{opacity:0;-moz-transform:translateY(100px);}
60%{opacity:1;-moz-transform:translateY(-30px);}
80%{-moz-transform:translateY(10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes BounceInB{0%{opacity:0;-ms-transform:translateY(100px);}
60%{opacity:1;-ms-transform:translateY(-30px);}
80%{-ms-transform:translateY(10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes BounceInB{0%{opacity:0;transform:translateY(100px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
@-webkit-keyframes BounceOut{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(0.9);}
70%{opacity:1;-webkit-transform:scale(1.05);}
100%{opacity:0;-webkit-transform:scale(0.3);}
}
@-moz-keyframes BounceOut{0%{-moz-transform:scale(1);}
50%{-moz-transform:scale(0.9);}
70%{opacity:1;-moz-transform:scale(1.05);}
100%{opacity:0;-moz-transform:scale(0.3);}
}
@-ms-keyframes BounceOut{0%{-ms-transform:scale(1);}
50%{-ms-transform:scale(0.9);}
70%{opacity:1;-ms-transform:scale(1.05);}
100%{opacity:0;-ms-transform:scale(0.3);}
}
@keyframes BounceOut{0%{transform:scale(1);}
50%{transform:scale(0.9);}
70%{opacity:1;transform:scale(1.05);}
100%{opacity:0;transform:scale(0.3);}
}
@-webkit-keyframes BounceOutT{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(20px);}
100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes BounceOutT{0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(20px);}
100%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes BounceOutT{0%{-ms-transform:translateY(0);}
20%{opacity:1;-ms-transform:translateY(20px);}
100%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes BounceOutT{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-100px);}
}
@-webkit-keyframes BounceOutR{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(-20px);}
100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes BounceOutR{0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(-20px);}
100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes BounceOutR{0%{-ms-transform:translateX(0);}
20%{opacity:1;-ms-transform:translateX(-20px);}
100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes BounceOutR{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(100px);}
}
@-webkit-keyframes BounceOutL{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(20px);}
100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes BounceOutL{0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(20px);}
100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes BounceOutL{0%{-ms-transform:translateX(0);}
20%{opacity:1;-ms-transform:translateX(20px);}
100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes BounceOutL{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-200px);}
}
@-webkit-keyframes BounceOutB{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(-20px);}
100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes BounceOutB{0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(-20px);}
100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes BounceOutB{0%{-ms-transform:translateY(0);}
20%{opacity:1;-ms-transform:translateY(-20px);}
100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes BounceOutB{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(100px);}
}
@-webkit-keyframes FadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes FadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes FadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes FadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes FadeInT{0%{opacity:0;-webkit-transform:translateY(-100px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes FadeInT{0%{opacity:0;-moz-transform:translateY(-100px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes FadeInT{0%{opacity:0;-ms-transform:translateY(-100px);}
100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes FadeInT{0%{opacity:0;transform:translateY(-100px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes FadeInL{0%{opacity:0;-webkit-transform:translateX(-100px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes FadeInL{0%{opacity:0;-moz-transform:translateX(-100px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes FadeInL{0%{opacity:0;-ms-transform:translateX(-100px);}
100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes FadeInL{0%{opacity:0;transform:translateX(-100px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes FadeInR{0%{opacity:0;-webkit-transform:translateX(100px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes FadeInR{0%{opacity:0;-moz-transform:translateX(100px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes FadeInR{0%{opacity:0;-ms-transform:translateX(100px);}
100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes FadeInR{0%{opacity:0;transform:translateX(100px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes FadeInB{0%{opacity:0;-webkit-transform:translateY(100px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes FadeInB{0%{opacity:0;-moz-transform:translateY(100px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes FadeInB{0%{opacity:0;-ms-transform:translateY(100px);}
100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes FadeInB{0%{opacity:0;transform:translateY(100px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes FadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes FadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes FadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes FadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-webkit-keyframes FadeOutT{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes FadeOutT{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes FadeOutT{0%{opacity:1;-ms-transform:translateY(0);}
100%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes FadeOutT{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-100px);}
}
@-webkit-keyframes FadeOutL{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes FadeOutL{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes FadeOutL{0%{opacity:1;-ms-transform:translateX(0);}
100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes FadeOutL{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-100px);}
}
@-webkit-keyframes FadeOutR{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes FadeOutR{0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes FadeOutR{0%{opacity:1;-ms-transform:translateX(0);}
100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes FadeOutR{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(100px);}
}
@-webkit-keyframes FadeOutB{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes FadeOutB{0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes FadeOutB{0%{opacity:1;-ms-transform:translateY(0);}
100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes FadeOutB{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(100px);}
}
@-webkit-keyframes Flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@-moz-keyframes Flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-ms-keyframes Flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
}
@keyframes Flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
@-webkit-keyframes FlipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-moz-keyframes FlipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-ms-keyframes FlipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateX(-10deg);}
70%{-ms-transform:perspective(400px) rotateX(10deg);}
100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes FlipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0);opacity:1;}
}
@-webkit-keyframes FlipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
70%{-webkit-transform:perspective(400px) rotateY(10deg);}
100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes FlipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateY(-10deg);}
70%{-moz-transform:perspective(400px) rotateY(10deg);}
100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes FlipInY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateY(-10deg);}
70%{-ms-transform:perspective(400px) rotateY(10deg);}
100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes FlipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{transform:perspective(400px) rotateY(0);opacity:1;}
}
@-webkit-keyframes FlipOutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes FlipOutX{0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-ms-keyframes FlipOutX{0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes FlipOutX{0%{transform:perspective(400px) rotateX(0);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-webkit-keyframes FlipOutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-moz-keyframes FlipOutY{0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-ms-keyframes FlipOutY{0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes FlipOutY{0%{transform:perspective(400px) rotateY(0);opacity:1;}
100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-webkit-keyframes Flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-moz-keyframes Flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-ms-keyframes Flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@keyframes Flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-webkit-keyframes Tada{0%{-webkit-transform:scale(1);transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}
}
@-moz-keyframes Tada{0%{-moz-transform:scale(1);transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}
}
@-ms-keyframes Tada{0%{-ms-transform:scale(1);transform:scale(1);}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}
}
@keyframes Tada{0%{transform:scale(1);transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0);}
}
@-webkit-keyframes Shake{0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes Shake{0%,100%{-moz-transform:translateX(0);}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes Shake{0%,100%{-ms-transform:translateX(0);}
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes Shake{0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
@-webkit-keyframes Wobble{0%{-webkit-transform:translateX(0);}
15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
30%{-webkit-transform:translateX(80px) rotate(3deg);}
45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
60%{-webkit-transform:translateX(40px) rotate(2deg);}
75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes Wobble{0%{-moz-transform:translateX(0);}
15%{-moz-transform:translateX(-100px) rotate(-5deg);}
30%{-moz-transform:translateX(80px) rotate(3deg);}
45%{-moz-transform:translateX(-65px) rotate(-3deg);}
60%{-moz-transform:translateX(40px) rotate(2deg);}
75%{-moz-transform:translateX(-20px) rotate(-1deg);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes Wobble{0%{-ms-transform:translateX(0);}
15%{-ms-transform:translateX(-100px) rotate(-5deg);}
30%{-ms-transform:translateX(80px) rotate(3deg);}
45%{-ms-transform:translateX(-65px) rotate(-3deg);}
60%{-ms-transform:translateX(40px) rotate(2deg);}
75%{-ms-transform:translateX(-20px) rotate(-1deg);}
100%{-ms-transform:translateX(0);}
}
@keyframes Wobble{0%{transform:translateX(0);}
15%{transform:translateX(-100px) rotate(-5deg);}
30%{transform:translateX(80px) rotate(3deg);}
45%{transform:translateX(-65px) rotate(-3deg);}
60%{transform:translateX(40px) rotate(2deg);}
75%{transform:translateX(-20px) rotate(-1deg);}
100%{transform:translateX(0);}
}

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