├── README.md
├── css
    ├── animate.css
    ├── reset.css
    └── style.css
├── images
    ├── aBtn.png
    ├── bg.jpg
    ├── cannot_bg.png
    ├── close.png
    ├── comfortU.png
    ├── conffimBtn.png
    ├── congr.png
    ├── dishini.png
    ├── draw_0.png
    ├── draw_1.png
    ├── draw_2.png
    ├── draw_3.png
    ├── draw_signbox1.png
    ├── draw_title.png
    ├── humidifier.png
    ├── new_03.png
    ├── roll_bg.png
    ├── roll_center.png
    ├── roll_point.png
    ├── roll_ring.png
    ├── roll_shadow.png
    ├── rule_main.png
    ├── thanksP.png
    ├── weight.jpg
    └── weight2.jpg
├── index.html
├── js
    ├── common.js
    ├── commonJs.js
    ├── index.js
    ├── jquery.min.js
    ├── jweixin-1.0.0.js
    └── qqShare.js
└── rule.html


/README.md:
--------------------------------------------------------------------------------
 1 | # [Demo演示 :blush:](https://fuxiaoqin.github.io/WeightDraw/index.html)<br>
 2 | ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
 3 |  
 4 | [![image](https://github.com/Fuxiaoqin/WeightDraw/blob/master/images/weight2.jpg?raw=true "点我演示效果")](https://fuxiaoqin.github.io/WeightDraw/index.html)
 5 | 
 6 | ## 开发说明：
 7 | ### 一、本demo使用技术栈
 8 |     1.H5：支持移动端、PC端
 9 |     2.css：使用css3高级动画，animate.css框架动画
10 |     3.Javascript：ES5语法
11 |     4.jQuery: 选择器、循环API
12 |    
13 | ### 二、本demo各功能
14 |     1.支持移动端、pc端
15 |     2.支持一次分享、二次分享
16 |     3.支持中奖名单轮播
17 |     4.支持外部分享页进入后展示下载横幅
18 |     5.支持PV人数展示
19 |     6.如若想编辑本demo代码，拉取code，在dev分支下提交您的code，我会合并至master
20 | 
21 | ### 三、开发流程
22 | #### 参数说明：
23 |     signTime: 0,//签到次数
24 |     timer: 0,//中奖名单轮播计数器
25 |     degValue: 0,//转盘旋转角度
26 |     h: 0,//中奖名单单条轮播移动的距离
27 | 
28 | #### 方法说明： 
29 | ##### 1.获取访问总数:getVisitCount()
30 |     a.后台返回的数据需操作DOM放入页面
31 |     b.$( '.peopleCount' ) 为展示pv人数的DOM
32 |     c.data.count为后台返回的pv人数
33 | ##### 2.获取签到次数，根据签到次数展示不同的进度条：checkSign()
34 |     a.根据后台返回的数据修改页面上三种进度条的图片
35 |     b.signTime = 后台返回的data.sign_times
36 |     c.$( '.rate_line' ) 为进度条img
37 | ##### 3.活动规则按钮绑定动画：actRule()
38 |     a.$( '.rule' )为弹出活动规则的button
39 |     b.popupFun()为弹出遮罩层的公用方法
40 |     c.bindCloseBtn()为关闭遮罩层的公用方法
41 | ##### 4.获取活动相关信息，通知客户端调取分享按钮(一次分享)，二次分享传入参数：getActData()
42 |     a.后台返回的data.data.state状态值：-1表示未开始，-2表示已结束，1表示正进行
43 |     b.myUserAgent()为通知客户端调出分享按钮方法
44 |     c.wxShare()为微信二次分享方法 
45 | ##### 5.开始抽奖按钮绑定动画:startRoll()
46 |     a.prizeRand()为随机生成中奖id，实际生成环境请求后台
47 |     b.通过judgeState()判断后台返回的状态码，根据不同的状态码做不同的操作
48 |     c.只有状态码为200和603、606时才可调用canRoll()旋转方法
49 | ##### 6.旋转方法(核心功能)：canRoll()  
50 |     a.旋转过程中，阻止用户滑动屏幕，阻止用户再次点击抽奖按钮
51 |     b.根据不同的award_id值计算不同的degValue值
52 |     c.设置转盘的transform的值为：'rotate(' + _this.degValue + 'deg' + ')';
53 |     d.同时设置转盘的灯逆时针旋转
54 | ##### 7.获取中奖名单并轮播: winnerList()
55 |     a.$( '.reward_list' )为展示中奖名单的容器
56 |     b.loading()将后台返回的数据循环之后拼在str字符串之后再植入页面方法
57 |     c.如果后台返回的数据大于5条，则轮播展示
58 | 
59 | ## 联系方式
60 | - `Email`：xiaoqinfu@sina.com
61 | 


--------------------------------------------------------------------------------
/css/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | /*!
   4 |  * animate.css -http://daneden.me/animate
   5 |  * Version - 3.5.1
   6 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
   7 |  *
   8 |  * Copyright (c) 2016 Daniel Eden
   9 |  */
  10 | 
  11 | .animated {
  12 | 	-webkit-animation-duration: 1s;
  13 | 	animation-duration: 1s;
  14 | 	-webkit-animation-fill-mode: both;
  15 | 	animation-fill-mode: both
  16 | }
  17 | 
  18 | .animated.infinite {
  19 | 	-webkit-animation-iteration-count: infinite;
  20 | 	animation-iteration-count: infinite
  21 | }
  22 | 
  23 | .animated.hinge {
  24 | 	-webkit-animation-duration: 2s;
  25 | 	animation-duration: 2s
  26 | }
  27 | 
  28 | .animated.flipOutX,
  29 | .animated.flipOutY,
  30 | .animated.bounceIn,
  31 | .animated.bounceOut {
  32 | 	-webkit-animation-duration: .75s;
  33 | 	animation-duration: .75s
  34 | }
  35 | 
  36 | @-webkit-keyframes bounce {
  37 | 	from,
  38 | 	20%,
  39 | 	53%,
  40 | 	80%,
  41 | 	to {
  42 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  43 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  44 | 		-webkit-transform: translate3d(0, 0, 0);
  45 | 		transform: translate3d(0, 0, 0)
  46 | 	}
  47 | 	40%,
  48 | 	43% {
  49 | 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  50 | 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  51 | 		-webkit-transform: translate3d(0, -30px, 0);
  52 | 		transform: translate3d(0, -30px, 0)
  53 | 	}
  54 | 	70% {
  55 | 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  56 | 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  57 | 		-webkit-transform: translate3d(0, -15px, 0);
  58 | 		transform: translate3d(0, -15px, 0)
  59 | 	}
  60 | 	90% {
  61 | 		-webkit-transform: translate3d(0, -4px, 0);
  62 | 		transform: translate3d(0, -4px, 0)
  63 | 	}
  64 | }
  65 | 
  66 | @keyframes bounce {
  67 | 	from,
  68 | 	20%,
  69 | 	53%,
  70 | 	80%,
  71 | 	to {
  72 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  73 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  74 | 		-webkit-transform: translate3d(0, 0, 0);
  75 | 		transform: translate3d(0, 0, 0)
  76 | 	}
  77 | 	40%,
  78 | 	43% {
  79 | 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  80 | 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  81 | 		-webkit-transform: translate3d(0, -30px, 0);
  82 | 		transform: translate3d(0, -30px, 0)
  83 | 	}
  84 | 	70% {
  85 | 		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  86 | 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  87 | 		-webkit-transform: translate3d(0, -15px, 0);
  88 | 		transform: translate3d(0, -15px, 0)
  89 | 	}
  90 | 	90% {
  91 | 		-webkit-transform: translate3d(0, -4px, 0);
  92 | 		transform: translate3d(0, -4px, 0)
  93 | 	}
  94 | }
  95 | 
  96 | .bounce {
  97 | 	-webkit-animation-name: bounce;
  98 | 	animation-name: bounce;
  99 | 	-webkit-transform-origin: center bottom;
 100 | 	transform-origin: center bottom
 101 | }
 102 | 
 103 | @-webkit-keyframes flash {
 104 | 	from,
 105 | 	50%,
 106 | 	to {
 107 | 		opacity: 1
 108 | 	}
 109 | 	25%,
 110 | 	75% {
 111 | 		opacity: 0
 112 | 	}
 113 | }
 114 | 
 115 | @keyframes flash {
 116 | 	from,
 117 | 	50%,
 118 | 	to {
 119 | 		opacity: 1
 120 | 	}
 121 | 	25%,
 122 | 	75% {
 123 | 		opacity: 0
 124 | 	}
 125 | }
 126 | 
 127 | .flash {
 128 | 	-webkit-animation-name: flash;
 129 | 	animation-name: flash
 130 | }
 131 | 
 132 | @-webkit-keyframes pulse {
 133 | 	from {
 134 | 		-webkit-transform: scale3d(1, 1, 1);
 135 | 		transform: scale3d(1, 1, 1)
 136 | 	}
 137 | 	50% {
 138 | 		-webkit-transform: scale3d(1.05, 1.05, 1.05);
 139 | 		transform: scale3d(1.05, 1.05, 1.05)
 140 | 	}
 141 | 	to {
 142 | 		-webkit-transform: scale3d(1, 1, 1);
 143 | 		transform: scale3d(1, 1, 1)
 144 | 	}
 145 | }
 146 | 
 147 | @keyframes pulse {
 148 | 	from {
 149 | 		-webkit-transform: scale3d(1, 1, 1);
 150 | 		transform: scale3d(1, 1, 1)
 151 | 	}
 152 | 	50% {
 153 | 		-webkit-transform: scale3d(1.05, 1.05, 1.05);
 154 | 		transform: scale3d(1.05, 1.05, 1.05)
 155 | 	}
 156 | 	to {
 157 | 		-webkit-transform: scale3d(1, 1, 1);
 158 | 		transform: scale3d(1, 1, 1)
 159 | 	}
 160 | }
 161 | 
 162 | .pulse {
 163 | 	-webkit-animation-name: pulse;
 164 | 	animation-name: pulse
 165 | }
 166 | 
 167 | @-webkit-keyframes rubberBand {
 168 | 	from {
 169 | 		-webkit-transform: scale3d(1, 1, 1);
 170 | 		transform: scale3d(1, 1, 1)
 171 | 	}
 172 | 	30% {
 173 | 		-webkit-transform: scale3d(1.25, 0.75, 1);
 174 | 		transform: scale3d(1.25, 0.75, 1)
 175 | 	}
 176 | 	40% {
 177 | 		-webkit-transform: scale3d(0.75, 1.25, 1);
 178 | 		transform: scale3d(0.75, 1.25, 1)
 179 | 	}
 180 | 	50% {
 181 | 		-webkit-transform: scale3d(1.15, 0.85, 1);
 182 | 		transform: scale3d(1.15, 0.85, 1)
 183 | 	}
 184 | 	65% {
 185 | 		-webkit-transform: scale3d(.95, 1.05, 1);
 186 | 		transform: scale3d(.95, 1.05, 1)
 187 | 	}
 188 | 	75% {
 189 | 		-webkit-transform: scale3d(1.05, .95, 1);
 190 | 		transform: scale3d(1.05, .95, 1)
 191 | 	}
 192 | 	to {
 193 | 		-webkit-transform: scale3d(1, 1, 1);
 194 | 		transform: scale3d(1, 1, 1)
 195 | 	}
 196 | }
 197 | 
 198 | @keyframes rubberBand {
 199 | 	from {
 200 | 		-webkit-transform: scale3d(1, 1, 1);
 201 | 		transform: scale3d(1, 1, 1)
 202 | 	}
 203 | 	30% {
 204 | 		-webkit-transform: scale3d(1.25, 0.75, 1);
 205 | 		transform: scale3d(1.25, 0.75, 1)
 206 | 	}
 207 | 	40% {
 208 | 		-webkit-transform: scale3d(0.75, 1.25, 1);
 209 | 		transform: scale3d(0.75, 1.25, 1)
 210 | 	}
 211 | 	50% {
 212 | 		-webkit-transform: scale3d(1.15, 0.85, 1);
 213 | 		transform: scale3d(1.15, 0.85, 1)
 214 | 	}
 215 | 	65% {
 216 | 		-webkit-transform: scale3d(.95, 1.05, 1);
 217 | 		transform: scale3d(.95, 1.05, 1)
 218 | 	}
 219 | 	75% {
 220 | 		-webkit-transform: scale3d(1.05, .95, 1);
 221 | 		transform: scale3d(1.05, .95, 1)
 222 | 	}
 223 | 	to {
 224 | 		-webkit-transform: scale3d(1, 1, 1);
 225 | 		transform: scale3d(1, 1, 1)
 226 | 	}
 227 | }
 228 | 
 229 | .rubberBand {
 230 | 	-webkit-animation-name: rubberBand;
 231 | 	animation-name: rubberBand
 232 | }
 233 | 
 234 | @-webkit-keyframes shake {
 235 | 	from,
 236 | 	to {
 237 | 		-webkit-transform: translate3d(0, 0, 0);
 238 | 		transform: translate3d(0, 0, 0)
 239 | 	}
 240 | 	10%,
 241 | 	30%,
 242 | 	50%,
 243 | 	70%,
 244 | 	90% {
 245 | 		-webkit-transform: translate3d(-10px, 0, 0);
 246 | 		transform: translate3d(-10px, 0, 0)
 247 | 	}
 248 | 	20%,
 249 | 	40%,
 250 | 	60%,
 251 | 	80% {
 252 | 		-webkit-transform: translate3d(10px, 0, 0);
 253 | 		transform: translate3d(10px, 0, 0)
 254 | 	}
 255 | }
 256 | 
 257 | @keyframes shake {
 258 | 	from,
 259 | 	to {
 260 | 		-webkit-transform: translate3d(0, 0, 0);
 261 | 		transform: translate3d(0, 0, 0)
 262 | 	}
 263 | 	10%,
 264 | 	30%,
 265 | 	50%,
 266 | 	70%,
 267 | 	90% {
 268 | 		-webkit-transform: translate3d(-10px, 0, 0);
 269 | 		transform: translate3d(-10px, 0, 0)
 270 | 	}
 271 | 	20%,
 272 | 	40%,
 273 | 	60%,
 274 | 	80% {
 275 | 		-webkit-transform: translate3d(10px, 0, 0);
 276 | 		transform: translate3d(10px, 0, 0)
 277 | 	}
 278 | }
 279 | 
 280 | .shake {
 281 | 	-webkit-animation-name: shake;
 282 | 	animation-name: shake
 283 | }
 284 | 
 285 | @-webkit-keyframes headShake {
 286 | 	0% {
 287 | 		-webkit-transform: translateX(0);
 288 | 		transform: translateX(0)
 289 | 	}
 290 | 	6.5% {
 291 | 		-webkit-transform: translateX(-6px) rotateY(-9deg);
 292 | 		transform: translateX(-6px) rotateY(-9deg)
 293 | 	}
 294 | 	18.5% {
 295 | 		-webkit-transform: translateX(5px) rotateY(7deg);
 296 | 		transform: translateX(5px) rotateY(7deg)
 297 | 	}
 298 | 	31.5% {
 299 | 		-webkit-transform: translateX(-3px) rotateY(-5deg);
 300 | 		transform: translateX(-3px) rotateY(-5deg)
 301 | 	}
 302 | 	43.5% {
 303 | 		-webkit-transform: translateX(2px) rotateY(3deg);
 304 | 		transform: translateX(2px) rotateY(3deg)
 305 | 	}
 306 | 	50% {
 307 | 		-webkit-transform: translateX(0);
 308 | 		transform: translateX(0)
 309 | 	}
 310 | }
 311 | 
 312 | @keyframes headShake {
 313 | 	0% {
 314 | 		-webkit-transform: translateX(0);
 315 | 		transform: translateX(0)
 316 | 	}
 317 | 	6.5% {
 318 | 		-webkit-transform: translateX(-6px) rotateY(-9deg);
 319 | 		transform: translateX(-6px) rotateY(-9deg)
 320 | 	}
 321 | 	18.5% {
 322 | 		-webkit-transform: translateX(5px) rotateY(7deg);
 323 | 		transform: translateX(5px) rotateY(7deg)
 324 | 	}
 325 | 	31.5% {
 326 | 		-webkit-transform: translateX(-3px) rotateY(-5deg);
 327 | 		transform: translateX(-3px) rotateY(-5deg)
 328 | 	}
 329 | 	43.5% {
 330 | 		-webkit-transform: translateX(2px) rotateY(3deg);
 331 | 		transform: translateX(2px) rotateY(3deg)
 332 | 	}
 333 | 	50% {
 334 | 		-webkit-transform: translateX(0);
 335 | 		transform: translateX(0)
 336 | 	}
 337 | }
 338 | 
 339 | .headShake {
 340 | 	-webkit-animation-timing-function: ease-in-out;
 341 | 	animation-timing-function: ease-in-out;
 342 | 	-webkit-animation-name: headShake;
 343 | 	animation-name: headShake
 344 | }
 345 | 
 346 | @-webkit-keyframes swing {
 347 | 	20% {
 348 | 		-webkit-transform: rotate3d(0, 0, 1, 15deg);
 349 | 		transform: rotate3d(0, 0, 1, 15deg)
 350 | 	}
 351 | 	40% {
 352 | 		-webkit-transform: rotate3d(0, 0, 1, -10deg);
 353 | 		transform: rotate3d(0, 0, 1, -10deg)
 354 | 	}
 355 | 	60% {
 356 | 		-webkit-transform: rotate3d(0, 0, 1, 5deg);
 357 | 		transform: rotate3d(0, 0, 1, 5deg)
 358 | 	}
 359 | 	80% {
 360 | 		-webkit-transform: rotate3d(0, 0, 1, -5deg);
 361 | 		transform: rotate3d(0, 0, 1, -5deg)
 362 | 	}
 363 | 	to {
 364 | 		-webkit-transform: rotate3d(0, 0, 1, 0deg);
 365 | 		transform: rotate3d(0, 0, 1, 0deg)
 366 | 	}
 367 | }
 368 | 
 369 | @keyframes swing {
 370 | 	20% {
 371 | 		-webkit-transform: rotate3d(0, 0, 1, 15deg);
 372 | 		transform: rotate3d(0, 0, 1, 15deg)
 373 | 	}
 374 | 	40% {
 375 | 		-webkit-transform: rotate3d(0, 0, 1, -10deg);
 376 | 		transform: rotate3d(0, 0, 1, -10deg)
 377 | 	}
 378 | 	60% {
 379 | 		-webkit-transform: rotate3d(0, 0, 1, 5deg);
 380 | 		transform: rotate3d(0, 0, 1, 5deg)
 381 | 	}
 382 | 	80% {
 383 | 		-webkit-transform: rotate3d(0, 0, 1, -5deg);
 384 | 		transform: rotate3d(0, 0, 1, -5deg)
 385 | 	}
 386 | 	to {
 387 | 		-webkit-transform: rotate3d(0, 0, 1, 0deg);
 388 | 		transform: rotate3d(0, 0, 1, 0deg)
 389 | 	}
 390 | }
 391 | 
 392 | .swing {
 393 | 	-webkit-transform-origin: top center;
 394 | 	transform-origin: top center;
 395 | 	-webkit-animation-name: swing;
 396 | 	animation-name: swing
 397 | }
 398 | 
 399 | @-webkit-keyframes tada {
 400 | 	from {
 401 | 		-webkit-transform: scale3d(1, 1, 1);
 402 | 		transform: scale3d(1, 1, 1)
 403 | 	}
 404 | 	10%,
 405 | 	20% {
 406 | 		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 407 | 		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
 408 | 	}
 409 | 	30%,
 410 | 	50%,
 411 | 	70%,
 412 | 	90% {
 413 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 414 | 		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
 415 | 	}
 416 | 	40%,
 417 | 	60%,
 418 | 	80% {
 419 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 420 | 		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
 421 | 	}
 422 | 	to {
 423 | 		-webkit-transform: scale3d(1, 1, 1);
 424 | 		transform: scale3d(1, 1, 1)
 425 | 	}
 426 | }
 427 | 
 428 | @keyframes tada {
 429 | 	from {
 430 | 		-webkit-transform: scale3d(1, 1, 1);
 431 | 		transform: scale3d(1, 1, 1)
 432 | 	}
 433 | 	10%,
 434 | 	20% {
 435 | 		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 436 | 		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
 437 | 	}
 438 | 	30%,
 439 | 	50%,
 440 | 	70%,
 441 | 	90% {
 442 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 443 | 		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
 444 | 	}
 445 | 	40%,
 446 | 	60%,
 447 | 	80% {
 448 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 449 | 		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
 450 | 	}
 451 | 	to {
 452 | 		-webkit-transform: scale3d(1, 1, 1);
 453 | 		transform: scale3d(1, 1, 1)
 454 | 	}
 455 | }
 456 | 
 457 | .tada {
 458 | 	-webkit-animation-name: tada;
 459 | 	animation-name: tada
 460 | }
 461 | 
 462 | @-webkit-keyframes wobble {
 463 | 	from {
 464 | 		-webkit-transform: none;
 465 | 		transform: none
 466 | 	}
 467 | 	15% {
 468 | 		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 469 | 		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
 470 | 	}
 471 | 	30% {
 472 | 		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 473 | 		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
 474 | 	}
 475 | 	45% {
 476 | 		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 477 | 		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
 478 | 	}
 479 | 	60% {
 480 | 		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 481 | 		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
 482 | 	}
 483 | 	75% {
 484 | 		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 485 | 		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
 486 | 	}
 487 | 	to {
 488 | 		-webkit-transform: none;
 489 | 		transform: none
 490 | 	}
 491 | }
 492 | 
 493 | @keyframes wobble {
 494 | 	from {
 495 | 		-webkit-transform: none;
 496 | 		transform: none
 497 | 	}
 498 | 	15% {
 499 | 		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 500 | 		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
 501 | 	}
 502 | 	30% {
 503 | 		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 504 | 		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
 505 | 	}
 506 | 	45% {
 507 | 		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 508 | 		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
 509 | 	}
 510 | 	60% {
 511 | 		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 512 | 		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
 513 | 	}
 514 | 	75% {
 515 | 		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 516 | 		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
 517 | 	}
 518 | 	to {
 519 | 		-webkit-transform: none;
 520 | 		transform: none
 521 | 	}
 522 | }
 523 | 
 524 | .wobble {
 525 | 	-webkit-animation-name: wobble;
 526 | 	animation-name: wobble
 527 | }
 528 | 
 529 | @-webkit-keyframes jello {
 530 | 	from,
 531 | 	11.1%,
 532 | 	to {
 533 | 		-webkit-transform: none;
 534 | 		transform: none
 535 | 	}
 536 | 	22.2% {
 537 | 		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 538 | 		transform: skewX(-12.5deg) skewY(-12.5deg)
 539 | 	}
 540 | 	33.3% {
 541 | 		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
 542 | 		transform: skewX(6.25deg) skewY(6.25deg)
 543 | 	}
 544 | 	44.4% {
 545 | 		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 546 | 		transform: skewX(-3.125deg) skewY(-3.125deg)
 547 | 	}
 548 | 	55.5% {
 549 | 		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 550 | 		transform: skewX(1.5625deg) skewY(1.5625deg)
 551 | 	}
 552 | 	66.6% {
 553 | 		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 554 | 		transform: skewX(-0.78125deg) skewY(-0.78125deg)
 555 | 	}
 556 | 	77.7% {
 557 | 		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 558 | 		transform: skewX(0.390625deg) skewY(0.390625deg)
 559 | 	}
 560 | 	88.8% {
 561 | 		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 562 | 		transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
 563 | 	}
 564 | }
 565 | 
 566 | @keyframes jello {
 567 | 	from,
 568 | 	11.1%,
 569 | 	to {
 570 | 		-webkit-transform: none;
 571 | 		transform: none
 572 | 	}
 573 | 	22.2% {
 574 | 		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 575 | 		transform: skewX(-12.5deg) skewY(-12.5deg)
 576 | 	}
 577 | 	33.3% {
 578 | 		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
 579 | 		transform: skewX(6.25deg) skewY(6.25deg)
 580 | 	}
 581 | 	44.4% {
 582 | 		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 583 | 		transform: skewX(-3.125deg) skewY(-3.125deg)
 584 | 	}
 585 | 	55.5% {
 586 | 		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 587 | 		transform: skewX(1.5625deg) skewY(1.5625deg)
 588 | 	}
 589 | 	66.6% {
 590 | 		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 591 | 		transform: skewX(-0.78125deg) skewY(-0.78125deg)
 592 | 	}
 593 | 	77.7% {
 594 | 		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 595 | 		transform: skewX(0.390625deg) skewY(0.390625deg)
 596 | 	}
 597 | 	88.8% {
 598 | 		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 599 | 		transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
 600 | 	}
 601 | }
 602 | 
 603 | .jello {
 604 | 	-webkit-animation-name: jello;
 605 | 	animation-name: jello;
 606 | 	-webkit-transform-origin: center;
 607 | 	transform-origin: center
 608 | }
 609 | 
 610 | @-webkit-keyframes bounceIn {
 611 | 	from,
 612 | 	20%,
 613 | 	40%,
 614 | 	60%,
 615 | 	80%,
 616 | 	to {
 617 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 618 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 619 | 	}
 620 | 	0% {
 621 | 		opacity: 0;
 622 | 		-webkit-transform: scale3d(.3, .3, .3);
 623 | 		transform: scale3d(.3, .3, .3)
 624 | 	}
 625 | 	20% {
 626 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1);
 627 | 		transform: scale3d(1.1, 1.1, 1.1)
 628 | 	}
 629 | 	40% {
 630 | 		-webkit-transform: scale3d(.9, .9, .9);
 631 | 		transform: scale3d(.9, .9, .9)
 632 | 	}
 633 | 	60% {
 634 | 		opacity: 1;
 635 | 		-webkit-transform: scale3d(1.03, 1.03, 1.03);
 636 | 		transform: scale3d(1.03, 1.03, 1.03)
 637 | 	}
 638 | 	80% {
 639 | 		-webkit-transform: scale3d(.97, .97, .97);
 640 | 		transform: scale3d(.97, .97, .97)
 641 | 	}
 642 | 	to {
 643 | 		opacity: 1;
 644 | 		-webkit-transform: scale3d(1, 1, 1);
 645 | 		transform: scale3d(1, 1, 1)
 646 | 	}
 647 | }
 648 | 
 649 | @keyframes bounceIn {
 650 | 	from,
 651 | 	20%,
 652 | 	40%,
 653 | 	60%,
 654 | 	80%,
 655 | 	to {
 656 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 657 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 658 | 	}
 659 | 	0% {
 660 | 		opacity: 0;
 661 | 		-webkit-transform: scale3d(.3, .3, .3);
 662 | 		transform: scale3d(.3, .3, .3)
 663 | 	}
 664 | 	20% {
 665 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1);
 666 | 		transform: scale3d(1.1, 1.1, 1.1)
 667 | 	}
 668 | 	40% {
 669 | 		-webkit-transform: scale3d(.9, .9, .9);
 670 | 		transform: scale3d(.9, .9, .9)
 671 | 	}
 672 | 	60% {
 673 | 		opacity: 1;
 674 | 		-webkit-transform: scale3d(1.03, 1.03, 1.03);
 675 | 		transform: scale3d(1.03, 1.03, 1.03)
 676 | 	}
 677 | 	80% {
 678 | 		-webkit-transform: scale3d(.97, .97, .97);
 679 | 		transform: scale3d(.97, .97, .97)
 680 | 	}
 681 | 	to {
 682 | 		opacity: 1;
 683 | 		-webkit-transform: scale3d(1, 1, 1);
 684 | 		transform: scale3d(1, 1, 1)
 685 | 	}
 686 | }
 687 | 
 688 | .bounceIn {
 689 | 	-webkit-animation-name: bounceIn;
 690 | 	animation-name: bounceIn
 691 | }
 692 | 
 693 | @-webkit-keyframes bounceInDown {
 694 | 	from,
 695 | 	60%,
 696 | 	75%,
 697 | 	90%,
 698 | 	to {
 699 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 700 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 701 | 	}
 702 | 	0% {
 703 | 		opacity: 0;
 704 | 		-webkit-transform: translate3d(0, -3000px, 0);
 705 | 		transform: translate3d(0, -3000px, 0)
 706 | 	}
 707 | 	60% {
 708 | 		opacity: 1;
 709 | 		-webkit-transform: translate3d(0, 25px, 0);
 710 | 		transform: translate3d(0, 25px, 0)
 711 | 	}
 712 | 	75% {
 713 | 		-webkit-transform: translate3d(0, -10px, 0);
 714 | 		transform: translate3d(0, -10px, 0)
 715 | 	}
 716 | 	90% {
 717 | 		-webkit-transform: translate3d(0, 5px, 0);
 718 | 		transform: translate3d(0, 5px, 0)
 719 | 	}
 720 | 	to {
 721 | 		-webkit-transform: none;
 722 | 		transform: none
 723 | 	}
 724 | }
 725 | 
 726 | @keyframes bounceInDown {
 727 | 	from,
 728 | 	60%,
 729 | 	75%,
 730 | 	90%,
 731 | 	to {
 732 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 733 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 734 | 	}
 735 | 	0% {
 736 | 		opacity: 0;
 737 | 		-webkit-transform: translate3d(0, -3000px, 0);
 738 | 		transform: translate3d(0, -3000px, 0)
 739 | 	}
 740 | 	60% {
 741 | 		opacity: 1;
 742 | 		-webkit-transform: translate3d(0, 25px, 0);
 743 | 		transform: translate3d(0, 25px, 0)
 744 | 	}
 745 | 	75% {
 746 | 		-webkit-transform: translate3d(0, -10px, 0);
 747 | 		transform: translate3d(0, -10px, 0)
 748 | 	}
 749 | 	90% {
 750 | 		-webkit-transform: translate3d(0, 5px, 0);
 751 | 		transform: translate3d(0, 5px, 0)
 752 | 	}
 753 | 	to {
 754 | 		-webkit-transform: none;
 755 | 		transform: none
 756 | 	}
 757 | }
 758 | 
 759 | .bounceInDown {
 760 | 	-webkit-animation-name: bounceInDown;
 761 | 	animation-name: bounceInDown
 762 | }
 763 | 
 764 | @-webkit-keyframes bounceInLeft {
 765 | 	from,
 766 | 	60%,
 767 | 	75%,
 768 | 	90%,
 769 | 	to {
 770 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 771 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 772 | 	}
 773 | 	0% {
 774 | 		opacity: 0;
 775 | 		-webkit-transform: translate3d(-3000px, 0, 0);
 776 | 		transform: translate3d(-3000px, 0, 0)
 777 | 	}
 778 | 	60% {
 779 | 		opacity: 1;
 780 | 		-webkit-transform: translate3d(25px, 0, 0);
 781 | 		transform: translate3d(25px, 0, 0)
 782 | 	}
 783 | 	75% {
 784 | 		-webkit-transform: translate3d(-10px, 0, 0);
 785 | 		transform: translate3d(-10px, 0, 0)
 786 | 	}
 787 | 	90% {
 788 | 		-webkit-transform: translate3d(5px, 0, 0);
 789 | 		transform: translate3d(5px, 0, 0)
 790 | 	}
 791 | 	to {
 792 | 		-webkit-transform: none;
 793 | 		transform: none
 794 | 	}
 795 | }
 796 | 
 797 | @keyframes bounceInLeft {
 798 | 	from,
 799 | 	60%,
 800 | 	75%,
 801 | 	90%,
 802 | 	to {
 803 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 804 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 805 | 	}
 806 | 	0% {
 807 | 		opacity: 0;
 808 | 		-webkit-transform: translate3d(-3000px, 0, 0);
 809 | 		transform: translate3d(-3000px, 0, 0)
 810 | 	}
 811 | 	60% {
 812 | 		opacity: 1;
 813 | 		-webkit-transform: translate3d(25px, 0, 0);
 814 | 		transform: translate3d(25px, 0, 0)
 815 | 	}
 816 | 	75% {
 817 | 		-webkit-transform: translate3d(-10px, 0, 0);
 818 | 		transform: translate3d(-10px, 0, 0)
 819 | 	}
 820 | 	90% {
 821 | 		-webkit-transform: translate3d(5px, 0, 0);
 822 | 		transform: translate3d(5px, 0, 0)
 823 | 	}
 824 | 	to {
 825 | 		-webkit-transform: none;
 826 | 		transform: none
 827 | 	}
 828 | }
 829 | 
 830 | .bounceInLeft {
 831 | 	-webkit-animation-name: bounceInLeft;
 832 | 	animation-name: bounceInLeft
 833 | }
 834 | 
 835 | @-webkit-keyframes bounceInRight {
 836 | 	from,
 837 | 	60%,
 838 | 	75%,
 839 | 	90%,
 840 | 	to {
 841 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 842 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 843 | 	}
 844 | 	from {
 845 | 		opacity: 0;
 846 | 		-webkit-transform: translate3d(3000px, 0, 0);
 847 | 		transform: translate3d(3000px, 0, 0)
 848 | 	}
 849 | 	60% {
 850 | 		opacity: 1;
 851 | 		-webkit-transform: translate3d(-25px, 0, 0);
 852 | 		transform: translate3d(-25px, 0, 0)
 853 | 	}
 854 | 	75% {
 855 | 		-webkit-transform: translate3d(10px, 0, 0);
 856 | 		transform: translate3d(10px, 0, 0)
 857 | 	}
 858 | 	90% {
 859 | 		-webkit-transform: translate3d(-5px, 0, 0);
 860 | 		transform: translate3d(-5px, 0, 0)
 861 | 	}
 862 | 	to {
 863 | 		-webkit-transform: none;
 864 | 		transform: none
 865 | 	}
 866 | }
 867 | 
 868 | @keyframes bounceInRight {
 869 | 	from,
 870 | 	60%,
 871 | 	75%,
 872 | 	90%,
 873 | 	to {
 874 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 875 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 876 | 	}
 877 | 	from {
 878 | 		opacity: 0;
 879 | 		-webkit-transform: translate3d(3000px, 0, 0);
 880 | 		transform: translate3d(3000px, 0, 0)
 881 | 	}
 882 | 	60% {
 883 | 		opacity: 1;
 884 | 		-webkit-transform: translate3d(-25px, 0, 0);
 885 | 		transform: translate3d(-25px, 0, 0)
 886 | 	}
 887 | 	75% {
 888 | 		-webkit-transform: translate3d(10px, 0, 0);
 889 | 		transform: translate3d(10px, 0, 0)
 890 | 	}
 891 | 	90% {
 892 | 		-webkit-transform: translate3d(-5px, 0, 0);
 893 | 		transform: translate3d(-5px, 0, 0)
 894 | 	}
 895 | 	to {
 896 | 		-webkit-transform: none;
 897 | 		transform: none
 898 | 	}
 899 | }
 900 | 
 901 | .bounceInRight {
 902 | 	-webkit-animation-name: bounceInRight;
 903 | 	animation-name: bounceInRight
 904 | }
 905 | 
 906 | @-webkit-keyframes bounceInUp {
 907 | 	from,
 908 | 	60%,
 909 | 	75%,
 910 | 	90%,
 911 | 	to {
 912 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 913 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 914 | 	}
 915 | 	from {
 916 | 		opacity: 0;
 917 | 		-webkit-transform: translate3d(0, 3000px, 0);
 918 | 		transform: translate3d(0, 3000px, 0)
 919 | 	}
 920 | 	60% {
 921 | 		opacity: 1;
 922 | 		-webkit-transform: translate3d(0, -20px, 0);
 923 | 		transform: translate3d(0, -20px, 0)
 924 | 	}
 925 | 	75% {
 926 | 		-webkit-transform: translate3d(0, 10px, 0);
 927 | 		transform: translate3d(0, 10px, 0)
 928 | 	}
 929 | 	90% {
 930 | 		-webkit-transform: translate3d(0, -5px, 0);
 931 | 		transform: translate3d(0, -5px, 0)
 932 | 	}
 933 | 	to {
 934 | 		-webkit-transform: translate3d(0, 0, 0);
 935 | 		transform: translate3d(0, 0, 0)
 936 | 	}
 937 | }
 938 | 
 939 | @keyframes bounceInUp {
 940 | 	from,
 941 | 	60%,
 942 | 	75%,
 943 | 	90%,
 944 | 	to {
 945 | 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 946 | 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
 947 | 	}
 948 | 	from {
 949 | 		opacity: 0;
 950 | 		-webkit-transform: translate3d(0, 3000px, 0);
 951 | 		transform: translate3d(0, 3000px, 0)
 952 | 	}
 953 | 	60% {
 954 | 		opacity: 1;
 955 | 		-webkit-transform: translate3d(0, -20px, 0);
 956 | 		transform: translate3d(0, -20px, 0)
 957 | 	}
 958 | 	75% {
 959 | 		-webkit-transform: translate3d(0, 10px, 0);
 960 | 		transform: translate3d(0, 10px, 0)
 961 | 	}
 962 | 	90% {
 963 | 		-webkit-transform: translate3d(0, -5px, 0);
 964 | 		transform: translate3d(0, -5px, 0)
 965 | 	}
 966 | 	to {
 967 | 		-webkit-transform: translate3d(0, 0, 0);
 968 | 		transform: translate3d(0, 0, 0)
 969 | 	}
 970 | }
 971 | 
 972 | .bounceInUp {
 973 | 	-webkit-animation-name: bounceInUp;
 974 | 	animation-name: bounceInUp
 975 | }
 976 | 
 977 | @-webkit-keyframes bounceOut {
 978 | 	20% {
 979 | 		-webkit-transform: scale3d(.9, .9, .9);
 980 | 		transform: scale3d(.9, .9, .9)
 981 | 	}
 982 | 	50%,
 983 | 	55% {
 984 | 		opacity: 1;
 985 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1);
 986 | 		transform: scale3d(1.1, 1.1, 1.1)
 987 | 	}
 988 | 	to {
 989 | 		opacity: 0;
 990 | 		-webkit-transform: scale3d(.3, .3, .3);
 991 | 		transform: scale3d(.3, .3, .3)
 992 | 	}
 993 | }
 994 | 
 995 | @keyframes bounceOut {
 996 | 	20% {
 997 | 		-webkit-transform: scale3d(.9, .9, .9);
 998 | 		transform: scale3d(.9, .9, .9)
 999 | 	}
1000 | 	50%,
1001 | 	55% {
1002 | 		opacity: 1;
1003 | 		-webkit-transform: scale3d(1.1, 1.1, 1.1);
1004 | 		transform: scale3d(1.1, 1.1, 1.1)
1005 | 	}
1006 | 	to {
1007 | 		opacity: 0;
1008 | 		-webkit-transform: scale3d(.3, .3, .3);
1009 | 		transform: scale3d(.3, .3, .3)
1010 | 	}
1011 | }
1012 | 
1013 | .bounceOut {
1014 | 	-webkit-animation-name: bounceOut;
1015 | 	animation-name: bounceOut
1016 | }
1017 | 
1018 | @-webkit-keyframes bounceOutDown {
1019 | 	20% {
1020 | 		-webkit-transform: translate3d(0, 10px, 0);
1021 | 		transform: translate3d(0, 10px, 0)
1022 | 	}
1023 | 	40%,
1024 | 	45% {
1025 | 		opacity: 1;
1026 | 		-webkit-transform: translate3d(0, -20px, 0);
1027 | 		transform: translate3d(0, -20px, 0)
1028 | 	}
1029 | 	to {
1030 | 		opacity: 0;
1031 | 		-webkit-transform: translate3d(0, 2000px, 0);
1032 | 		transform: translate3d(0, 2000px, 0)
1033 | 	}
1034 | }
1035 | 
1036 | @keyframes bounceOutDown {
1037 | 	20% {
1038 | 		-webkit-transform: translate3d(0, 10px, 0);
1039 | 		transform: translate3d(0, 10px, 0)
1040 | 	}
1041 | 	40%,
1042 | 	45% {
1043 | 		opacity: 1;
1044 | 		-webkit-transform: translate3d(0, -20px, 0);
1045 | 		transform: translate3d(0, -20px, 0)
1046 | 	}
1047 | 	to {
1048 | 		opacity: 0;
1049 | 		-webkit-transform: translate3d(0, 2000px, 0);
1050 | 		transform: translate3d(0, 2000px, 0)
1051 | 	}
1052 | }
1053 | 
1054 | .bounceOutDown {
1055 | 	-webkit-animation-name: bounceOutDown;
1056 | 	animation-name: bounceOutDown
1057 | }
1058 | 
1059 | @-webkit-keyframes bounceOutLeft {
1060 | 	20% {
1061 | 		opacity: 1;
1062 | 		-webkit-transform: translate3d(20px, 0, 0);
1063 | 		transform: translate3d(20px, 0, 0)
1064 | 	}
1065 | 	to {
1066 | 		opacity: 0;
1067 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1068 | 		transform: translate3d(-2000px, 0, 0)
1069 | 	}
1070 | }
1071 | 
1072 | @keyframes bounceOutLeft {
1073 | 	20% {
1074 | 		opacity: 1;
1075 | 		-webkit-transform: translate3d(20px, 0, 0);
1076 | 		transform: translate3d(20px, 0, 0)
1077 | 	}
1078 | 	to {
1079 | 		opacity: 0;
1080 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1081 | 		transform: translate3d(-2000px, 0, 0)
1082 | 	}
1083 | }
1084 | 
1085 | .bounceOutLeft {
1086 | 	-webkit-animation-name: bounceOutLeft;
1087 | 	animation-name: bounceOutLeft
1088 | }
1089 | 
1090 | @-webkit-keyframes bounceOutRight {
1091 | 	20% {
1092 | 		opacity: 1;
1093 | 		-webkit-transform: translate3d(-20px, 0, 0);
1094 | 		transform: translate3d(-20px, 0, 0)
1095 | 	}
1096 | 	to {
1097 | 		opacity: 0;
1098 | 		-webkit-transform: translate3d(2000px, 0, 0);
1099 | 		transform: translate3d(2000px, 0, 0)
1100 | 	}
1101 | }
1102 | 
1103 | @keyframes bounceOutRight {
1104 | 	20% {
1105 | 		opacity: 1;
1106 | 		-webkit-transform: translate3d(-20px, 0, 0);
1107 | 		transform: translate3d(-20px, 0, 0)
1108 | 	}
1109 | 	to {
1110 | 		opacity: 0;
1111 | 		-webkit-transform: translate3d(2000px, 0, 0);
1112 | 		transform: translate3d(2000px, 0, 0)
1113 | 	}
1114 | }
1115 | 
1116 | .bounceOutRight {
1117 | 	-webkit-animation-name: bounceOutRight;
1118 | 	animation-name: bounceOutRight
1119 | }
1120 | 
1121 | @-webkit-keyframes bounceOutUp {
1122 | 	20% {
1123 | 		-webkit-transform: translate3d(0, -10px, 0);
1124 | 		transform: translate3d(0, -10px, 0)
1125 | 	}
1126 | 	40%,
1127 | 	45% {
1128 | 		opacity: 1;
1129 | 		-webkit-transform: translate3d(0, 20px, 0);
1130 | 		transform: translate3d(0, 20px, 0)
1131 | 	}
1132 | 	to {
1133 | 		opacity: 0;
1134 | 		-webkit-transform: translate3d(0, -2000px, 0);
1135 | 		transform: translate3d(0, -2000px, 0)
1136 | 	}
1137 | }
1138 | 
1139 | @keyframes bounceOutUp {
1140 | 	20% {
1141 | 		-webkit-transform: translate3d(0, -10px, 0);
1142 | 		transform: translate3d(0, -10px, 0)
1143 | 	}
1144 | 	40%,
1145 | 	45% {
1146 | 		opacity: 1;
1147 | 		-webkit-transform: translate3d(0, 20px, 0);
1148 | 		transform: translate3d(0, 20px, 0)
1149 | 	}
1150 | 	to {
1151 | 		opacity: 0;
1152 | 		-webkit-transform: translate3d(0, -2000px, 0);
1153 | 		transform: translate3d(0, -2000px, 0)
1154 | 	}
1155 | }
1156 | 
1157 | .bounceOutUp {
1158 | 	-webkit-animation-name: bounceOutUp;
1159 | 	animation-name: bounceOutUp
1160 | }
1161 | 
1162 | @-webkit-keyframes fadeIn {
1163 | 	from {
1164 | 		opacity: 0
1165 | 	}
1166 | 	to {
1167 | 		opacity: 1
1168 | 	}
1169 | }
1170 | 
1171 | @keyframes fadeIn {
1172 | 	from {
1173 | 		opacity: 0
1174 | 	}
1175 | 	to {
1176 | 		opacity: 1
1177 | 	}
1178 | }
1179 | 
1180 | .fadeIn {
1181 | 	-webkit-animation-name: fadeIn;
1182 | 	animation-name: fadeIn
1183 | }
1184 | 
1185 | @-webkit-keyframes fadeInDown {
1186 | 	from {
1187 | 		opacity: 0;
1188 | 		-webkit-transform: translate3d(0, -100%, 0);
1189 | 		transform: translate3d(0, -100%, 0)
1190 | 	}
1191 | 	to {
1192 | 		opacity: 1;
1193 | 		-webkit-transform: none;
1194 | 		transform: none
1195 | 	}
1196 | }
1197 | 
1198 | @keyframes fadeInDown {
1199 | 	from {
1200 | 		opacity: 0;
1201 | 		-webkit-transform: translate3d(0, -100%, 0);
1202 | 		transform: translate3d(0, -100%, 0)
1203 | 	}
1204 | 	to {
1205 | 		opacity: 1;
1206 | 		-webkit-transform: none;
1207 | 		transform: none
1208 | 	}
1209 | }
1210 | 
1211 | .fadeInDown {
1212 | 	-webkit-animation-name: fadeInDown;
1213 | 	animation-name: fadeInDown
1214 | }
1215 | 
1216 | @-webkit-keyframes fadeInDownBig {
1217 | 	from {
1218 | 		opacity: 0;
1219 | 		-webkit-transform: translate3d(0, -2000px, 0);
1220 | 		transform: translate3d(0, -2000px, 0)
1221 | 	}
1222 | 	to {
1223 | 		opacity: 1;
1224 | 		-webkit-transform: none;
1225 | 		transform: none
1226 | 	}
1227 | }
1228 | 
1229 | @keyframes fadeInDownBig {
1230 | 	from {
1231 | 		opacity: 0;
1232 | 		-webkit-transform: translate3d(0, -2000px, 0);
1233 | 		transform: translate3d(0, -2000px, 0)
1234 | 	}
1235 | 	to {
1236 | 		opacity: 1;
1237 | 		-webkit-transform: none;
1238 | 		transform: none
1239 | 	}
1240 | }
1241 | 
1242 | .fadeInDownBig {
1243 | 	-webkit-animation-name: fadeInDownBig;
1244 | 	animation-name: fadeInDownBig
1245 | }
1246 | 
1247 | @-webkit-keyframes fadeInLeft {
1248 | 	from {
1249 | 		opacity: 0;
1250 | 		-webkit-transform: translate3d(-100%, 0, 0);
1251 | 		transform: translate3d(-100%, 0, 0)
1252 | 	}
1253 | 	to {
1254 | 		opacity: 1;
1255 | 		-webkit-transform: none;
1256 | 		transform: none
1257 | 	}
1258 | }
1259 | 
1260 | @keyframes fadeInLeft {
1261 | 	from {
1262 | 		opacity: 0;
1263 | 		-webkit-transform: translate3d(-100%, 0, 0);
1264 | 		transform: translate3d(-100%, 0, 0)
1265 | 	}
1266 | 	to {
1267 | 		opacity: 1;
1268 | 		-webkit-transform: none;
1269 | 		transform: none
1270 | 	}
1271 | }
1272 | 
1273 | .fadeInLeft {
1274 | 	-webkit-animation-name: fadeInLeft;
1275 | 	animation-name: fadeInLeft
1276 | }
1277 | 
1278 | @-webkit-keyframes fadeInLeftBig {
1279 | 	from {
1280 | 		opacity: 0;
1281 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1282 | 		transform: translate3d(-2000px, 0, 0)
1283 | 	}
1284 | 	to {
1285 | 		opacity: 1;
1286 | 		-webkit-transform: none;
1287 | 		transform: none
1288 | 	}
1289 | }
1290 | 
1291 | @keyframes fadeInLeftBig {
1292 | 	from {
1293 | 		opacity: 0;
1294 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1295 | 		transform: translate3d(-2000px, 0, 0)
1296 | 	}
1297 | 	to {
1298 | 		opacity: 1;
1299 | 		-webkit-transform: none;
1300 | 		transform: none
1301 | 	}
1302 | }
1303 | 
1304 | .fadeInLeftBig {
1305 | 	-webkit-animation-name: fadeInLeftBig;
1306 | 	animation-name: fadeInLeftBig
1307 | }
1308 | 
1309 | @-webkit-keyframes fadeInRight {
1310 | 	from {
1311 | 		opacity: 0;
1312 | 		-webkit-transform: translate3d(100%, 0, 0);
1313 | 		transform: translate3d(100%, 0, 0)
1314 | 	}
1315 | 	to {
1316 | 		opacity: 1;
1317 | 		-webkit-transform: none;
1318 | 		transform: none
1319 | 	}
1320 | }
1321 | 
1322 | @keyframes fadeInRight {
1323 | 	from {
1324 | 		opacity: 0;
1325 | 		-webkit-transform: translate3d(100%, 0, 0);
1326 | 		transform: translate3d(100%, 0, 0)
1327 | 	}
1328 | 	to {
1329 | 		opacity: 1;
1330 | 		-webkit-transform: none;
1331 | 		transform: none
1332 | 	}
1333 | }
1334 | 
1335 | .fadeInRight {
1336 | 	-webkit-animation-name: fadeInRight;
1337 | 	animation-name: fadeInRight
1338 | }
1339 | 
1340 | @-webkit-keyframes fadeInRightBig {
1341 | 	from {
1342 | 		opacity: 0;
1343 | 		-webkit-transform: translate3d(2000px, 0, 0);
1344 | 		transform: translate3d(2000px, 0, 0)
1345 | 	}
1346 | 	to {
1347 | 		opacity: 1;
1348 | 		-webkit-transform: none;
1349 | 		transform: none
1350 | 	}
1351 | }
1352 | 
1353 | @keyframes fadeInRightBig {
1354 | 	from {
1355 | 		opacity: 0;
1356 | 		-webkit-transform: translate3d(2000px, 0, 0);
1357 | 		transform: translate3d(2000px, 0, 0)
1358 | 	}
1359 | 	to {
1360 | 		opacity: 1;
1361 | 		-webkit-transform: none;
1362 | 		transform: none
1363 | 	}
1364 | }
1365 | 
1366 | .fadeInRightBig {
1367 | 	-webkit-animation-name: fadeInRightBig;
1368 | 	animation-name: fadeInRightBig
1369 | }
1370 | 
1371 | @-webkit-keyframes fadeInUp {
1372 | 	from {
1373 | 		opacity: 0;
1374 | 		-webkit-transform: translate3d(0, 100%, 0);
1375 | 		transform: translate3d(0, 100%, 0)
1376 | 	}
1377 | 	to {
1378 | 		opacity: 1;
1379 | 		-webkit-transform: none;
1380 | 		transform: none
1381 | 	}
1382 | }
1383 | 
1384 | @keyframes fadeInUp {
1385 | 	from {
1386 | 		opacity: 0;
1387 | 		-webkit-transform: translate3d(0, 100%, 0);
1388 | 		transform: translate3d(0, 100%, 0)
1389 | 	}
1390 | 	to {
1391 | 		opacity: 1;
1392 | 		-webkit-transform: none;
1393 | 		transform: none
1394 | 	}
1395 | }
1396 | 
1397 | .fadeInUp {
1398 | 	-webkit-animation-name: fadeInUp;
1399 | 	animation-name: fadeInUp
1400 | }
1401 | 
1402 | @-webkit-keyframes fadeInUpBig {
1403 | 	from {
1404 | 		opacity: 0;
1405 | 		-webkit-transform: translate3d(0, 2000px, 0);
1406 | 		transform: translate3d(0, 2000px, 0)
1407 | 	}
1408 | 	to {
1409 | 		opacity: 1;
1410 | 		-webkit-transform: none;
1411 | 		transform: none
1412 | 	}
1413 | }
1414 | 
1415 | @keyframes fadeInUpBig {
1416 | 	from {
1417 | 		opacity: 0;
1418 | 		-webkit-transform: translate3d(0, 2000px, 0);
1419 | 		transform: translate3d(0, 2000px, 0)
1420 | 	}
1421 | 	to {
1422 | 		opacity: 1;
1423 | 		-webkit-transform: none;
1424 | 		transform: none
1425 | 	}
1426 | }
1427 | 
1428 | .fadeInUpBig {
1429 | 	-webkit-animation-name: fadeInUpBig;
1430 | 	animation-name: fadeInUpBig
1431 | }
1432 | 
1433 | @-webkit-keyframes fadeOut {
1434 | 	from {
1435 | 		opacity: 1
1436 | 	}
1437 | 	to {
1438 | 		opacity: 0
1439 | 	}
1440 | }
1441 | 
1442 | @keyframes fadeOut {
1443 | 	from {
1444 | 		opacity: 1
1445 | 	}
1446 | 	to {
1447 | 		opacity: 0
1448 | 	}
1449 | }
1450 | 
1451 | .fadeOut {
1452 | 	-webkit-animation-name: fadeOut;
1453 | 	animation-name: fadeOut
1454 | }
1455 | 
1456 | @-webkit-keyframes fadeOutDown {
1457 | 	from {
1458 | 		opacity: 1
1459 | 	}
1460 | 	to {
1461 | 		opacity: 0;
1462 | 		-webkit-transform: translate3d(0, 100%, 0);
1463 | 		transform: translate3d(0, 100%, 0)
1464 | 	}
1465 | }
1466 | 
1467 | @keyframes fadeOutDown {
1468 | 	from {
1469 | 		opacity: 1
1470 | 	}
1471 | 	to {
1472 | 		opacity: 0;
1473 | 		-webkit-transform: translate3d(0, 100%, 0);
1474 | 		transform: translate3d(0, 100%, 0)
1475 | 	}
1476 | }
1477 | 
1478 | .fadeOutDown {
1479 | 	-webkit-animation-name: fadeOutDown;
1480 | 	animation-name: fadeOutDown
1481 | }
1482 | 
1483 | @-webkit-keyframes fadeOutDownBig {
1484 | 	from {
1485 | 		opacity: 1
1486 | 	}
1487 | 	to {
1488 | 		opacity: 0;
1489 | 		-webkit-transform: translate3d(0, 2000px, 0);
1490 | 		transform: translate3d(0, 2000px, 0)
1491 | 	}
1492 | }
1493 | 
1494 | @keyframes fadeOutDownBig {
1495 | 	from {
1496 | 		opacity: 1
1497 | 	}
1498 | 	to {
1499 | 		opacity: 0;
1500 | 		-webkit-transform: translate3d(0, 2000px, 0);
1501 | 		transform: translate3d(0, 2000px, 0)
1502 | 	}
1503 | }
1504 | 
1505 | .fadeOutDownBig {
1506 | 	-webkit-animation-name: fadeOutDownBig;
1507 | 	animation-name: fadeOutDownBig
1508 | }
1509 | 
1510 | @-webkit-keyframes fadeOutLeft {
1511 | 	from {
1512 | 		opacity: 1
1513 | 	}
1514 | 	to {
1515 | 		opacity: 0;
1516 | 		-webkit-transform: translate3d(-100%, 0, 0);
1517 | 		transform: translate3d(-100%, 0, 0)
1518 | 	}
1519 | }
1520 | 
1521 | @keyframes fadeOutLeft {
1522 | 	from {
1523 | 		opacity: 1
1524 | 	}
1525 | 	to {
1526 | 		opacity: 0;
1527 | 		-webkit-transform: translate3d(-100%, 0, 0);
1528 | 		transform: translate3d(-100%, 0, 0)
1529 | 	}
1530 | }
1531 | 
1532 | .fadeOutLeft {
1533 | 	-webkit-animation-name: fadeOutLeft;
1534 | 	animation-name: fadeOutLeft
1535 | }
1536 | 
1537 | @-webkit-keyframes fadeOutLeftBig {
1538 | 	from {
1539 | 		opacity: 1
1540 | 	}
1541 | 	to {
1542 | 		opacity: 0;
1543 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1544 | 		transform: translate3d(-2000px, 0, 0)
1545 | 	}
1546 | }
1547 | 
1548 | @keyframes fadeOutLeftBig {
1549 | 	from {
1550 | 		opacity: 1
1551 | 	}
1552 | 	to {
1553 | 		opacity: 0;
1554 | 		-webkit-transform: translate3d(-2000px, 0, 0);
1555 | 		transform: translate3d(-2000px, 0, 0)
1556 | 	}
1557 | }
1558 | 
1559 | .fadeOutLeftBig {
1560 | 	-webkit-animation-name: fadeOutLeftBig;
1561 | 	animation-name: fadeOutLeftBig
1562 | }
1563 | 
1564 | @-webkit-keyframes fadeOutRight {
1565 | 	from {
1566 | 		opacity: 1
1567 | 	}
1568 | 	to {
1569 | 		opacity: 0;
1570 | 		-webkit-transform: translate3d(100%, 0, 0);
1571 | 		transform: translate3d(100%, 0, 0)
1572 | 	}
1573 | }
1574 | 
1575 | @keyframes fadeOutRight {
1576 | 	from {
1577 | 		opacity: 1
1578 | 	}
1579 | 	to {
1580 | 		opacity: 0;
1581 | 		-webkit-transform: translate3d(100%, 0, 0);
1582 | 		transform: translate3d(100%, 0, 0)
1583 | 	}
1584 | }
1585 | 
1586 | .fadeOutRight {
1587 | 	-webkit-animation-name: fadeOutRight;
1588 | 	animation-name: fadeOutRight
1589 | }
1590 | 
1591 | @-webkit-keyframes fadeOutRightBig {
1592 | 	from {
1593 | 		opacity: 1
1594 | 	}
1595 | 	to {
1596 | 		opacity: 0;
1597 | 		-webkit-transform: translate3d(2000px, 0, 0);
1598 | 		transform: translate3d(2000px, 0, 0)
1599 | 	}
1600 | }
1601 | 
1602 | @keyframes fadeOutRightBig {
1603 | 	from {
1604 | 		opacity: 1
1605 | 	}
1606 | 	to {
1607 | 		opacity: 0;
1608 | 		-webkit-transform: translate3d(2000px, 0, 0);
1609 | 		transform: translate3d(2000px, 0, 0)
1610 | 	}
1611 | }
1612 | 
1613 | .fadeOutRightBig {
1614 | 	-webkit-animation-name: fadeOutRightBig;
1615 | 	animation-name: fadeOutRightBig
1616 | }
1617 | 
1618 | @-webkit-keyframes fadeOutUp {
1619 | 	from {
1620 | 		opacity: 1
1621 | 	}
1622 | 	to {
1623 | 		opacity: 0;
1624 | 		-webkit-transform: translate3d(0, -100%, 0);
1625 | 		transform: translate3d(0, -100%, 0)
1626 | 	}
1627 | }
1628 | 
1629 | @keyframes fadeOutUp {
1630 | 	from {
1631 | 		opacity: 1
1632 | 	}
1633 | 	to {
1634 | 		opacity: 0;
1635 | 		-webkit-transform: translate3d(0, -100%, 0);
1636 | 		transform: translate3d(0, -100%, 0)
1637 | 	}
1638 | }
1639 | 
1640 | .fadeOutUp {
1641 | 	-webkit-animation-name: fadeOutUp;
1642 | 	animation-name: fadeOutUp
1643 | }
1644 | 
1645 | @-webkit-keyframes fadeOutUpBig {
1646 | 	from {
1647 | 		opacity: 1
1648 | 	}
1649 | 	to {
1650 | 		opacity: 0;
1651 | 		-webkit-transform: translate3d(0, -2000px, 0);
1652 | 		transform: translate3d(0, -2000px, 0)
1653 | 	}
1654 | }
1655 | 
1656 | @keyframes fadeOutUpBig {
1657 | 	from {
1658 | 		opacity: 1
1659 | 	}
1660 | 	to {
1661 | 		opacity: 0;
1662 | 		-webkit-transform: translate3d(0, -2000px, 0);
1663 | 		transform: translate3d(0, -2000px, 0)
1664 | 	}
1665 | }
1666 | 
1667 | .fadeOutUpBig {
1668 | 	-webkit-animation-name: fadeOutUpBig;
1669 | 	animation-name: fadeOutUpBig
1670 | }
1671 | 
1672 | @-webkit-keyframes flip {
1673 | 	from {
1674 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1675 | 		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1676 | 		-webkit-animation-timing-function: ease-out;
1677 | 		animation-timing-function: ease-out
1678 | 	}
1679 | 	40% {
1680 | 		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1681 | 		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1682 | 		-webkit-animation-timing-function: ease-out;
1683 | 		animation-timing-function: ease-out
1684 | 	}
1685 | 	50% {
1686 | 		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1687 | 		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1688 | 		-webkit-animation-timing-function: ease-in;
1689 | 		animation-timing-function: ease-in
1690 | 	}
1691 | 	80% {
1692 | 		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1693 | 		transform: perspective(400px) scale3d(.95, .95, .95);
1694 | 		-webkit-animation-timing-function: ease-in;
1695 | 		animation-timing-function: ease-in
1696 | 	}
1697 | 	to {
1698 | 		-webkit-transform: perspective(400px);
1699 | 		transform: perspective(400px);
1700 | 		-webkit-animation-timing-function: ease-in;
1701 | 		animation-timing-function: ease-in
1702 | 	}
1703 | }
1704 | 
1705 | @keyframes flip {
1706 | 	from {
1707 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1708 | 		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1709 | 		-webkit-animation-timing-function: ease-out;
1710 | 		animation-timing-function: ease-out
1711 | 	}
1712 | 	40% {
1713 | 		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1714 | 		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1715 | 		-webkit-animation-timing-function: ease-out;
1716 | 		animation-timing-function: ease-out
1717 | 	}
1718 | 	50% {
1719 | 		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1720 | 		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1721 | 		-webkit-animation-timing-function: ease-in;
1722 | 		animation-timing-function: ease-in
1723 | 	}
1724 | 	80% {
1725 | 		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1726 | 		transform: perspective(400px) scale3d(.95, .95, .95);
1727 | 		-webkit-animation-timing-function: ease-in;
1728 | 		animation-timing-function: ease-in
1729 | 	}
1730 | 	to {
1731 | 		-webkit-transform: perspective(400px);
1732 | 		transform: perspective(400px);
1733 | 		-webkit-animation-timing-function: ease-in;
1734 | 		animation-timing-function: ease-in
1735 | 	}
1736 | }
1737 | 
1738 | .animated.flip {
1739 | 	-webkit-backface-visibility: visible;
1740 | 	backface-visibility: visible;
1741 | 	-webkit-animation-name: flip;
1742 | 	animation-name: flip
1743 | }
1744 | 
1745 | @-webkit-keyframes flipInX {
1746 | 	from {
1747 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1748 | 		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1749 | 		-webkit-animation-timing-function: ease-in;
1750 | 		animation-timing-function: ease-in;
1751 | 		opacity: 0
1752 | 	}
1753 | 	40% {
1754 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1755 | 		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1756 | 		-webkit-animation-timing-function: ease-in;
1757 | 		animation-timing-function: ease-in
1758 | 	}
1759 | 	60% {
1760 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1761 | 		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1762 | 		opacity: 1
1763 | 	}
1764 | 	80% {
1765 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1766 | 		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
1767 | 	}
1768 | 	to {
1769 | 		-webkit-transform: perspective(400px);
1770 | 		transform: perspective(400px)
1771 | 	}
1772 | }
1773 | 
1774 | @keyframes flipInX {
1775 | 	from {
1776 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1777 | 		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1778 | 		-webkit-animation-timing-function: ease-in;
1779 | 		animation-timing-function: ease-in;
1780 | 		opacity: 0
1781 | 	}
1782 | 	40% {
1783 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1784 | 		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1785 | 		-webkit-animation-timing-function: ease-in;
1786 | 		animation-timing-function: ease-in
1787 | 	}
1788 | 	60% {
1789 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1790 | 		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1791 | 		opacity: 1
1792 | 	}
1793 | 	80% {
1794 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1795 | 		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
1796 | 	}
1797 | 	to {
1798 | 		-webkit-transform: perspective(400px);
1799 | 		transform: perspective(400px)
1800 | 	}
1801 | }
1802 | 
1803 | .flipInX {
1804 | 	-webkit-backface-visibility: visible!important;
1805 | 	backface-visibility: visible!important;
1806 | 	-webkit-animation-name: flipInX;
1807 | 	animation-name: flipInX
1808 | }
1809 | 
1810 | @-webkit-keyframes flipInY {
1811 | 	from {
1812 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1813 | 		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1814 | 		-webkit-animation-timing-function: ease-in;
1815 | 		animation-timing-function: ease-in;
1816 | 		opacity: 0
1817 | 	}
1818 | 	40% {
1819 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1820 | 		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1821 | 		-webkit-animation-timing-function: ease-in;
1822 | 		animation-timing-function: ease-in
1823 | 	}
1824 | 	60% {
1825 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1826 | 		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1827 | 		opacity: 1
1828 | 	}
1829 | 	80% {
1830 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1831 | 		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
1832 | 	}
1833 | 	to {
1834 | 		-webkit-transform: perspective(400px);
1835 | 		transform: perspective(400px)
1836 | 	}
1837 | }
1838 | 
1839 | @keyframes flipInY {
1840 | 	from {
1841 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1842 | 		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1843 | 		-webkit-animation-timing-function: ease-in;
1844 | 		animation-timing-function: ease-in;
1845 | 		opacity: 0
1846 | 	}
1847 | 	40% {
1848 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1849 | 		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1850 | 		-webkit-animation-timing-function: ease-in;
1851 | 		animation-timing-function: ease-in
1852 | 	}
1853 | 	60% {
1854 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1855 | 		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1856 | 		opacity: 1
1857 | 	}
1858 | 	80% {
1859 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1860 | 		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
1861 | 	}
1862 | 	to {
1863 | 		-webkit-transform: perspective(400px);
1864 | 		transform: perspective(400px)
1865 | 	}
1866 | }
1867 | 
1868 | .flipInY {
1869 | 	-webkit-backface-visibility: visible!important;
1870 | 	backface-visibility: visible!important;
1871 | 	-webkit-animation-name: flipInY;
1872 | 	animation-name: flipInY
1873 | }
1874 | 
1875 | @-webkit-keyframes flipOutX {
1876 | 	from {
1877 | 		-webkit-transform: perspective(400px);
1878 | 		transform: perspective(400px)
1879 | 	}
1880 | 	30% {
1881 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1882 | 		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1883 | 		opacity: 1
1884 | 	}
1885 | 	to {
1886 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1887 | 		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1888 | 		opacity: 0
1889 | 	}
1890 | }
1891 | 
1892 | @keyframes flipOutX {
1893 | 	from {
1894 | 		-webkit-transform: perspective(400px);
1895 | 		transform: perspective(400px)
1896 | 	}
1897 | 	30% {
1898 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1899 | 		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1900 | 		opacity: 1
1901 | 	}
1902 | 	to {
1903 | 		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1904 | 		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1905 | 		opacity: 0
1906 | 	}
1907 | }
1908 | 
1909 | .flipOutX {
1910 | 	-webkit-animation-name: flipOutX;
1911 | 	animation-name: flipOutX;
1912 | 	-webkit-backface-visibility: visible!important;
1913 | 	backface-visibility: visible!important
1914 | }
1915 | 
1916 | @-webkit-keyframes flipOutY {
1917 | 	from {
1918 | 		-webkit-transform: perspective(400px);
1919 | 		transform: perspective(400px)
1920 | 	}
1921 | 	30% {
1922 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1923 | 		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1924 | 		opacity: 1
1925 | 	}
1926 | 	to {
1927 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1928 | 		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1929 | 		opacity: 0
1930 | 	}
1931 | }
1932 | 
1933 | @keyframes flipOutY {
1934 | 	from {
1935 | 		-webkit-transform: perspective(400px);
1936 | 		transform: perspective(400px)
1937 | 	}
1938 | 	30% {
1939 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1940 | 		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1941 | 		opacity: 1
1942 | 	}
1943 | 	to {
1944 | 		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1945 | 		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1946 | 		opacity: 0
1947 | 	}
1948 | }
1949 | 
1950 | .flipOutY {
1951 | 	-webkit-backface-visibility: visible!important;
1952 | 	backface-visibility: visible!important;
1953 | 	-webkit-animation-name: flipOutY;
1954 | 	animation-name: flipOutY
1955 | }
1956 | 
1957 | @-webkit-keyframes lightSpeedIn {
1958 | 	from {
1959 | 		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1960 | 		transform: translate3d(100%, 0, 0) skewX(-30deg);
1961 | 		opacity: 0
1962 | 	}
1963 | 	60% {
1964 | 		-webkit-transform: skewX(20deg);
1965 | 		transform: skewX(20deg);
1966 | 		opacity: 1
1967 | 	}
1968 | 	80% {
1969 | 		-webkit-transform: skewX(-5deg);
1970 | 		transform: skewX(-5deg);
1971 | 		opacity: 1
1972 | 	}
1973 | 	to {
1974 | 		-webkit-transform: none;
1975 | 		transform: none;
1976 | 		opacity: 1
1977 | 	}
1978 | }
1979 | 
1980 | @keyframes lightSpeedIn {
1981 | 	from {
1982 | 		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1983 | 		transform: translate3d(100%, 0, 0) skewX(-30deg);
1984 | 		opacity: 0
1985 | 	}
1986 | 	60% {
1987 | 		-webkit-transform: skewX(20deg);
1988 | 		transform: skewX(20deg);
1989 | 		opacity: 1
1990 | 	}
1991 | 	80% {
1992 | 		-webkit-transform: skewX(-5deg);
1993 | 		transform: skewX(-5deg);
1994 | 		opacity: 1
1995 | 	}
1996 | 	to {
1997 | 		-webkit-transform: none;
1998 | 		transform: none;
1999 | 		opacity: 1
2000 | 	}
2001 | }
2002 | 
2003 | .lightSpeedIn {
2004 | 	-webkit-animation-name: lightSpeedIn;
2005 | 	animation-name: lightSpeedIn;
2006 | 	-webkit-animation-timing-function: ease-out;
2007 | 	animation-timing-function: ease-out
2008 | }
2009 | 
2010 | @-webkit-keyframes lightSpeedOut {
2011 | 	from {
2012 | 		opacity: 1
2013 | 	}
2014 | 	to {
2015 | 		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2016 | 		transform: translate3d(100%, 0, 0) skewX(30deg);
2017 | 		opacity: 0
2018 | 	}
2019 | }
2020 | 
2021 | @keyframes lightSpeedOut {
2022 | 	from {
2023 | 		opacity: 1
2024 | 	}
2025 | 	to {
2026 | 		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2027 | 		transform: translate3d(100%, 0, 0) skewX(30deg);
2028 | 		opacity: 0
2029 | 	}
2030 | }
2031 | 
2032 | .lightSpeedOut {
2033 | 	-webkit-animation-name: lightSpeedOut;
2034 | 	animation-name: lightSpeedOut;
2035 | 	-webkit-animation-timing-function: ease-in;
2036 | 	animation-timing-function: ease-in
2037 | }
2038 | 
2039 | @-webkit-keyframes rotateIn {
2040 | 	from {
2041 | 		-webkit-transform-origin: center;
2042 | 		transform-origin: center;
2043 | 		-webkit-transform: rotate3d(0, 0, 1, -200deg);
2044 | 		transform: rotate3d(0, 0, 1, -200deg);
2045 | 		opacity: 0
2046 | 	}
2047 | 	to {
2048 | 		-webkit-transform-origin: center;
2049 | 		transform-origin: center;
2050 | 		-webkit-transform: none;
2051 | 		transform: none;
2052 | 		opacity: 1
2053 | 	}
2054 | }
2055 | 
2056 | @keyframes rotateIn {
2057 | 	from {
2058 | 		-webkit-transform-origin: center;
2059 | 		transform-origin: center;
2060 | 		-webkit-transform: rotate3d(0, 0, 1, -200deg);
2061 | 		transform: rotate3d(0, 0, 1, -200deg);
2062 | 		opacity: 0
2063 | 	}
2064 | 	to {
2065 | 		-webkit-transform-origin: center;
2066 | 		transform-origin: center;
2067 | 		-webkit-transform: none;
2068 | 		transform: none;
2069 | 		opacity: 1
2070 | 	}
2071 | }
2072 | 
2073 | .rotateIn {
2074 | 	-webkit-animation-name: rotateIn;
2075 | 	animation-name: rotateIn
2076 | }
2077 | 
2078 | @-webkit-keyframes rotateInDownLeft {
2079 | 	from {
2080 | 		-webkit-transform-origin: left bottom;
2081 | 		transform-origin: left bottom;
2082 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2083 | 		transform: rotate3d(0, 0, 1, -45deg);
2084 | 		opacity: 0
2085 | 	}
2086 | 	to {
2087 | 		-webkit-transform-origin: left bottom;
2088 | 		transform-origin: left bottom;
2089 | 		-webkit-transform: none;
2090 | 		transform: none;
2091 | 		opacity: 1
2092 | 	}
2093 | }
2094 | 
2095 | @keyframes rotateInDownLeft {
2096 | 	from {
2097 | 		-webkit-transform-origin: left bottom;
2098 | 		transform-origin: left bottom;
2099 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2100 | 		transform: rotate3d(0, 0, 1, -45deg);
2101 | 		opacity: 0
2102 | 	}
2103 | 	to {
2104 | 		-webkit-transform-origin: left bottom;
2105 | 		transform-origin: left bottom;
2106 | 		-webkit-transform: none;
2107 | 		transform: none;
2108 | 		opacity: 1
2109 | 	}
2110 | }
2111 | 
2112 | .rotateInDownLeft {
2113 | 	-webkit-animation-name: rotateInDownLeft;
2114 | 	animation-name: rotateInDownLeft
2115 | }
2116 | 
2117 | @-webkit-keyframes rotateInDownRight {
2118 | 	from {
2119 | 		-webkit-transform-origin: right bottom;
2120 | 		transform-origin: right bottom;
2121 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2122 | 		transform: rotate3d(0, 0, 1, 45deg);
2123 | 		opacity: 0
2124 | 	}
2125 | 	to {
2126 | 		-webkit-transform-origin: right bottom;
2127 | 		transform-origin: right bottom;
2128 | 		-webkit-transform: none;
2129 | 		transform: none;
2130 | 		opacity: 1
2131 | 	}
2132 | }
2133 | 
2134 | @keyframes rotateInDownRight {
2135 | 	from {
2136 | 		-webkit-transform-origin: right bottom;
2137 | 		transform-origin: right bottom;
2138 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2139 | 		transform: rotate3d(0, 0, 1, 45deg);
2140 | 		opacity: 0
2141 | 	}
2142 | 	to {
2143 | 		-webkit-transform-origin: right bottom;
2144 | 		transform-origin: right bottom;
2145 | 		-webkit-transform: none;
2146 | 		transform: none;
2147 | 		opacity: 1
2148 | 	}
2149 | }
2150 | 
2151 | .rotateInDownRight {
2152 | 	-webkit-animation-name: rotateInDownRight;
2153 | 	animation-name: rotateInDownRight
2154 | }
2155 | 
2156 | @-webkit-keyframes rotateInUpLeft {
2157 | 	from {
2158 | 		-webkit-transform-origin: left bottom;
2159 | 		transform-origin: left bottom;
2160 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2161 | 		transform: rotate3d(0, 0, 1, 45deg);
2162 | 		opacity: 0
2163 | 	}
2164 | 	to {
2165 | 		-webkit-transform-origin: left bottom;
2166 | 		transform-origin: left bottom;
2167 | 		-webkit-transform: none;
2168 | 		transform: none;
2169 | 		opacity: 1
2170 | 	}
2171 | }
2172 | 
2173 | @keyframes rotateInUpLeft {
2174 | 	from {
2175 | 		-webkit-transform-origin: left bottom;
2176 | 		transform-origin: left bottom;
2177 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2178 | 		transform: rotate3d(0, 0, 1, 45deg);
2179 | 		opacity: 0
2180 | 	}
2181 | 	to {
2182 | 		-webkit-transform-origin: left bottom;
2183 | 		transform-origin: left bottom;
2184 | 		-webkit-transform: none;
2185 | 		transform: none;
2186 | 		opacity: 1
2187 | 	}
2188 | }
2189 | 
2190 | .rotateInUpLeft {
2191 | 	-webkit-animation-name: rotateInUpLeft;
2192 | 	animation-name: rotateInUpLeft
2193 | }
2194 | 
2195 | @-webkit-keyframes rotateInUpRight {
2196 | 	from {
2197 | 		-webkit-transform-origin: right bottom;
2198 | 		transform-origin: right bottom;
2199 | 		-webkit-transform: rotate3d(0, 0, 1, -90deg);
2200 | 		transform: rotate3d(0, 0, 1, -90deg);
2201 | 		opacity: 0
2202 | 	}
2203 | 	to {
2204 | 		-webkit-transform-origin: right bottom;
2205 | 		transform-origin: right bottom;
2206 | 		-webkit-transform: none;
2207 | 		transform: none;
2208 | 		opacity: 1
2209 | 	}
2210 | }
2211 | 
2212 | @keyframes rotateInUpRight {
2213 | 	from {
2214 | 		-webkit-transform-origin: right bottom;
2215 | 		transform-origin: right bottom;
2216 | 		-webkit-transform: rotate3d(0, 0, 1, -90deg);
2217 | 		transform: rotate3d(0, 0, 1, -90deg);
2218 | 		opacity: 0
2219 | 	}
2220 | 	to {
2221 | 		-webkit-transform-origin: right bottom;
2222 | 		transform-origin: right bottom;
2223 | 		-webkit-transform: none;
2224 | 		transform: none;
2225 | 		opacity: 1
2226 | 	}
2227 | }
2228 | 
2229 | .rotateInUpRight {
2230 | 	-webkit-animation-name: rotateInUpRight;
2231 | 	animation-name: rotateInUpRight
2232 | }
2233 | 
2234 | @-webkit-keyframes rotateOut {
2235 | 	from {
2236 | 		-webkit-transform-origin: center;
2237 | 		transform-origin: center;
2238 | 		opacity: 1
2239 | 	}
2240 | 	to {
2241 | 		-webkit-transform-origin: center;
2242 | 		transform-origin: center;
2243 | 		-webkit-transform: rotate3d(0, 0, 1, 200deg);
2244 | 		transform: rotate3d(0, 0, 1, 200deg);
2245 | 		opacity: 0
2246 | 	}
2247 | }
2248 | 
2249 | @keyframes rotateOut {
2250 | 	from {
2251 | 		-webkit-transform-origin: center;
2252 | 		transform-origin: center;
2253 | 		opacity: 1
2254 | 	}
2255 | 	to {
2256 | 		-webkit-transform-origin: center;
2257 | 		transform-origin: center;
2258 | 		-webkit-transform: rotate3d(0, 0, 1, 200deg);
2259 | 		transform: rotate3d(0, 0, 1, 200deg);
2260 | 		opacity: 0
2261 | 	}
2262 | }
2263 | 
2264 | .rotateOut {
2265 | 	-webkit-animation-name: rotateOut;
2266 | 	animation-name: rotateOut
2267 | }
2268 | 
2269 | @-webkit-keyframes rotateOutDownLeft {
2270 | 	from {
2271 | 		-webkit-transform-origin: left bottom;
2272 | 		transform-origin: left bottom;
2273 | 		opacity: 1
2274 | 	}
2275 | 	to {
2276 | 		-webkit-transform-origin: left bottom;
2277 | 		transform-origin: left bottom;
2278 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2279 | 		transform: rotate3d(0, 0, 1, 45deg);
2280 | 		opacity: 0
2281 | 	}
2282 | }
2283 | 
2284 | @keyframes rotateOutDownLeft {
2285 | 	from {
2286 | 		-webkit-transform-origin: left bottom;
2287 | 		transform-origin: left bottom;
2288 | 		opacity: 1
2289 | 	}
2290 | 	to {
2291 | 		-webkit-transform-origin: left bottom;
2292 | 		transform-origin: left bottom;
2293 | 		-webkit-transform: rotate3d(0, 0, 1, 45deg);
2294 | 		transform: rotate3d(0, 0, 1, 45deg);
2295 | 		opacity: 0
2296 | 	}
2297 | }
2298 | 
2299 | .rotateOutDownLeft {
2300 | 	-webkit-animation-name: rotateOutDownLeft;
2301 | 	animation-name: rotateOutDownLeft
2302 | }
2303 | 
2304 | @-webkit-keyframes rotateOutDownRight {
2305 | 	from {
2306 | 		-webkit-transform-origin: right bottom;
2307 | 		transform-origin: right bottom;
2308 | 		opacity: 1
2309 | 	}
2310 | 	to {
2311 | 		-webkit-transform-origin: right bottom;
2312 | 		transform-origin: right bottom;
2313 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2314 | 		transform: rotate3d(0, 0, 1, -45deg);
2315 | 		opacity: 0
2316 | 	}
2317 | }
2318 | 
2319 | @keyframes rotateOutDownRight {
2320 | 	from {
2321 | 		-webkit-transform-origin: right bottom;
2322 | 		transform-origin: right bottom;
2323 | 		opacity: 1
2324 | 	}
2325 | 	to {
2326 | 		-webkit-transform-origin: right bottom;
2327 | 		transform-origin: right bottom;
2328 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2329 | 		transform: rotate3d(0, 0, 1, -45deg);
2330 | 		opacity: 0
2331 | 	}
2332 | }
2333 | 
2334 | .rotateOutDownRight {
2335 | 	-webkit-animation-name: rotateOutDownRight;
2336 | 	animation-name: rotateOutDownRight
2337 | }
2338 | 
2339 | @-webkit-keyframes rotateOutUpLeft {
2340 | 	from {
2341 | 		-webkit-transform-origin: left bottom;
2342 | 		transform-origin: left bottom;
2343 | 		opacity: 1
2344 | 	}
2345 | 	to {
2346 | 		-webkit-transform-origin: left bottom;
2347 | 		transform-origin: left bottom;
2348 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2349 | 		transform: rotate3d(0, 0, 1, -45deg);
2350 | 		opacity: 0
2351 | 	}
2352 | }
2353 | 
2354 | @keyframes rotateOutUpLeft {
2355 | 	from {
2356 | 		-webkit-transform-origin: left bottom;
2357 | 		transform-origin: left bottom;
2358 | 		opacity: 1
2359 | 	}
2360 | 	to {
2361 | 		-webkit-transform-origin: left bottom;
2362 | 		transform-origin: left bottom;
2363 | 		-webkit-transform: rotate3d(0, 0, 1, -45deg);
2364 | 		transform: rotate3d(0, 0, 1, -45deg);
2365 | 		opacity: 0
2366 | 	}
2367 | }
2368 | 
2369 | .rotateOutUpLeft {
2370 | 	-webkit-animation-name: rotateOutUpLeft;
2371 | 	animation-name: rotateOutUpLeft
2372 | }
2373 | 
2374 | @-webkit-keyframes rotateOutUpRight {
2375 | 	from {
2376 | 		-webkit-transform-origin: right bottom;
2377 | 		transform-origin: right bottom;
2378 | 		opacity: 1
2379 | 	}
2380 | 	to {
2381 | 		-webkit-transform-origin: right bottom;
2382 | 		transform-origin: right bottom;
2383 | 		-webkit-transform: rotate3d(0, 0, 1, 90deg);
2384 | 		transform: rotate3d(0, 0, 1, 90deg);
2385 | 		opacity: 0
2386 | 	}
2387 | }
2388 | 
2389 | @keyframes rotateOutUpRight {
2390 | 	from {
2391 | 		-webkit-transform-origin: right bottom;
2392 | 		transform-origin: right bottom;
2393 | 		opacity: 1
2394 | 	}
2395 | 	to {
2396 | 		-webkit-transform-origin: right bottom;
2397 | 		transform-origin: right bottom;
2398 | 		-webkit-transform: rotate3d(0, 0, 1, 90deg);
2399 | 		transform: rotate3d(0, 0, 1, 90deg);
2400 | 		opacity: 0
2401 | 	}
2402 | }
2403 | 
2404 | .rotateOutUpRight {
2405 | 	-webkit-animation-name: rotateOutUpRight;
2406 | 	animation-name: rotateOutUpRight
2407 | }
2408 | 
2409 | @-webkit-keyframes hinge {
2410 | 	0% {
2411 | 		-webkit-transform-origin: top left;
2412 | 		transform-origin: top left;
2413 | 		-webkit-animation-timing-function: ease-in-out;
2414 | 		animation-timing-function: ease-in-out
2415 | 	}
2416 | 	20%,
2417 | 	60% {
2418 | 		-webkit-transform: rotate3d(0, 0, 1, 80deg);
2419 | 		transform: rotate3d(0, 0, 1, 80deg);
2420 | 		-webkit-transform-origin: top left;
2421 | 		transform-origin: top left;
2422 | 		-webkit-animation-timing-function: ease-in-out;
2423 | 		animation-timing-function: ease-in-out
2424 | 	}
2425 | 	40%,
2426 | 	80% {
2427 | 		-webkit-transform: rotate3d(0, 0, 1, 60deg);
2428 | 		transform: rotate3d(0, 0, 1, 60deg);
2429 | 		-webkit-transform-origin: top left;
2430 | 		transform-origin: top left;
2431 | 		-webkit-animation-timing-function: ease-in-out;
2432 | 		animation-timing-function: ease-in-out;
2433 | 		opacity: 1
2434 | 	}
2435 | 	to {
2436 | 		-webkit-transform: translate3d(0, 700px, 0);
2437 | 		transform: translate3d(0, 700px, 0);
2438 | 		opacity: 0
2439 | 	}
2440 | }
2441 | 
2442 | @keyframes hinge {
2443 | 	0% {
2444 | 		-webkit-transform-origin: top left;
2445 | 		transform-origin: top left;
2446 | 		-webkit-animation-timing-function: ease-in-out;
2447 | 		animation-timing-function: ease-in-out
2448 | 	}
2449 | 	20%,
2450 | 	60% {
2451 | 		-webkit-transform: rotate3d(0, 0, 1, 80deg);
2452 | 		transform: rotate3d(0, 0, 1, 80deg);
2453 | 		-webkit-transform-origin: top left;
2454 | 		transform-origin: top left;
2455 | 		-webkit-animation-timing-function: ease-in-out;
2456 | 		animation-timing-function: ease-in-out
2457 | 	}
2458 | 	40%,
2459 | 	80% {
2460 | 		-webkit-transform: rotate3d(0, 0, 1, 60deg);
2461 | 		transform: rotate3d(0, 0, 1, 60deg);
2462 | 		-webkit-transform-origin: top left;
2463 | 		transform-origin: top left;
2464 | 		-webkit-animation-timing-function: ease-in-out;
2465 | 		animation-timing-function: ease-in-out;
2466 | 		opacity: 1
2467 | 	}
2468 | 	to {
2469 | 		-webkit-transform: translate3d(0, 700px, 0);
2470 | 		transform: translate3d(0, 700px, 0);
2471 | 		opacity: 0
2472 | 	}
2473 | }
2474 | 
2475 | .hinge {
2476 | 	-webkit-animation-name: hinge;
2477 | 	animation-name: hinge
2478 | }
2479 | 
2480 | @-webkit-keyframes rollIn {
2481 | 	from {
2482 | 		opacity: 0;
2483 | 		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2484 | 		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
2485 | 	}
2486 | 	to {
2487 | 		opacity: 1;
2488 | 		-webkit-transform: none;
2489 | 		transform: none
2490 | 	}
2491 | }
2492 | 
2493 | @keyframes rollIn {
2494 | 	from {
2495 | 		opacity: 0;
2496 | 		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2497 | 		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
2498 | 	}
2499 | 	to {
2500 | 		opacity: 1;
2501 | 		-webkit-transform: none;
2502 | 		transform: none
2503 | 	}
2504 | }
2505 | 
2506 | .rollIn {
2507 | 	-webkit-animation-name: rollIn;
2508 | 	animation-name: rollIn
2509 | }
2510 | 
2511 | @-webkit-keyframes rollOut {
2512 | 	from {
2513 | 		opacity: 1
2514 | 	}
2515 | 	to {
2516 | 		opacity: 0;
2517 | 		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2518 | 		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
2519 | 	}
2520 | }
2521 | 
2522 | @keyframes rollOut {
2523 | 	from {
2524 | 		opacity: 1
2525 | 	}
2526 | 	to {
2527 | 		opacity: 0;
2528 | 		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2529 | 		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
2530 | 	}
2531 | }
2532 | 
2533 | .rollOut {
2534 | 	-webkit-animation-name: rollOut;
2535 | 	animation-name: rollOut
2536 | }
2537 | 
2538 | @-webkit-keyframes zoomIn {
2539 | 	from {
2540 | 		opacity: 0;
2541 | 		-webkit-transform: scale3d(.3, .3, .3);
2542 | 		transform: scale3d(.3, .3, .3)
2543 | 	}
2544 | 	50% {
2545 | 		opacity: 1
2546 | 	}
2547 | }
2548 | 
2549 | @keyframes zoomIn {
2550 | 	from {
2551 | 		opacity: 0;
2552 | 		-webkit-transform: scale3d(.3, .3, .3);
2553 | 		transform: scale3d(.3, .3, .3)
2554 | 	}
2555 | 	50% {
2556 | 		opacity: 1
2557 | 	}
2558 | }
2559 | 
2560 | .zoomIn {
2561 | 	-webkit-animation-name: zoomIn;
2562 | 	animation-name: zoomIn
2563 | }
2564 | 
2565 | @-webkit-keyframes zoomInDown {
2566 | 	from {
2567 | 		opacity: 0;
2568 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2569 | 		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2570 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2571 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2572 | 	}
2573 | 	60% {
2574 | 		opacity: 1;
2575 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2576 | 		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2577 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2578 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2579 | 	}
2580 | }
2581 | 
2582 | @keyframes zoomInDown {
2583 | 	from {
2584 | 		opacity: 0;
2585 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2586 | 		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2587 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2588 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2589 | 	}
2590 | 	60% {
2591 | 		opacity: 1;
2592 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2593 | 		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2594 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2595 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2596 | 	}
2597 | }
2598 | 
2599 | .zoomInDown {
2600 | 	-webkit-animation-name: zoomInDown;
2601 | 	animation-name: zoomInDown
2602 | }
2603 | 
2604 | @-webkit-keyframes zoomInLeft {
2605 | 	from {
2606 | 		opacity: 0;
2607 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2608 | 		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2609 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2610 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2611 | 	}
2612 | 	60% {
2613 | 		opacity: 1;
2614 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2615 | 		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2616 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2617 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2618 | 	}
2619 | }
2620 | 
2621 | @keyframes zoomInLeft {
2622 | 	from {
2623 | 		opacity: 0;
2624 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2625 | 		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2626 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2627 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2628 | 	}
2629 | 	60% {
2630 | 		opacity: 1;
2631 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2632 | 		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2633 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2634 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2635 | 	}
2636 | }
2637 | 
2638 | .zoomInLeft {
2639 | 	-webkit-animation-name: zoomInLeft;
2640 | 	animation-name: zoomInLeft
2641 | }
2642 | 
2643 | @-webkit-keyframes zoomInRight {
2644 | 	from {
2645 | 		opacity: 0;
2646 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2647 | 		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2648 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2649 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2650 | 	}
2651 | 	60% {
2652 | 		opacity: 1;
2653 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2654 | 		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2655 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2656 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2657 | 	}
2658 | }
2659 | 
2660 | @keyframes zoomInRight {
2661 | 	from {
2662 | 		opacity: 0;
2663 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2664 | 		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2665 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2666 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2667 | 	}
2668 | 	60% {
2669 | 		opacity: 1;
2670 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2671 | 		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2672 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2673 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2674 | 	}
2675 | }
2676 | 
2677 | .zoomInRight {
2678 | 	-webkit-animation-name: zoomInRight;
2679 | 	animation-name: zoomInRight
2680 | }
2681 | 
2682 | @-webkit-keyframes zoomInUp {
2683 | 	from {
2684 | 		opacity: 0;
2685 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2686 | 		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2687 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2688 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2689 | 	}
2690 | 	60% {
2691 | 		opacity: 1;
2692 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2693 | 		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2694 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2695 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2696 | 	}
2697 | }
2698 | 
2699 | @keyframes zoomInUp {
2700 | 	from {
2701 | 		opacity: 0;
2702 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2703 | 		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2704 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2705 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2706 | 	}
2707 | 	60% {
2708 | 		opacity: 1;
2709 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2710 | 		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2711 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2712 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2713 | 	}
2714 | }
2715 | 
2716 | .zoomInUp {
2717 | 	-webkit-animation-name: zoomInUp;
2718 | 	animation-name: zoomInUp
2719 | }
2720 | 
2721 | @-webkit-keyframes zoomOut {
2722 | 	from {
2723 | 		opacity: 1
2724 | 	}
2725 | 	50% {
2726 | 		opacity: 0;
2727 | 		-webkit-transform: scale3d(.3, .3, .3);
2728 | 		transform: scale3d(.3, .3, .3)
2729 | 	}
2730 | 	to {
2731 | 		opacity: 0
2732 | 	}
2733 | }
2734 | 
2735 | @keyframes zoomOut {
2736 | 	from {
2737 | 		opacity: 1
2738 | 	}
2739 | 	50% {
2740 | 		opacity: 0;
2741 | 		-webkit-transform: scale3d(.3, .3, .3);
2742 | 		transform: scale3d(.3, .3, .3)
2743 | 	}
2744 | 	to {
2745 | 		opacity: 0
2746 | 	}
2747 | }
2748 | 
2749 | .zoomOut {
2750 | 	-webkit-animation-name: zoomOut;
2751 | 	animation-name: zoomOut
2752 | }
2753 | 
2754 | @-webkit-keyframes zoomOutDown {
2755 | 	40% {
2756 | 		opacity: 1;
2757 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2758 | 		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2759 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2760 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2761 | 	}
2762 | 	to {
2763 | 		opacity: 0;
2764 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2765 | 		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2766 | 		-webkit-transform-origin: center bottom;
2767 | 		transform-origin: center bottom;
2768 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2769 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2770 | 	}
2771 | }
2772 | 
2773 | @keyframes zoomOutDown {
2774 | 	40% {
2775 | 		opacity: 1;
2776 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2777 | 		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2778 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2779 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2780 | 	}
2781 | 	to {
2782 | 		opacity: 0;
2783 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2784 | 		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2785 | 		-webkit-transform-origin: center bottom;
2786 | 		transform-origin: center bottom;
2787 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2788 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2789 | 	}
2790 | }
2791 | 
2792 | .zoomOutDown {
2793 | 	-webkit-animation-name: zoomOutDown;
2794 | 	animation-name: zoomOutDown
2795 | }
2796 | 
2797 | @-webkit-keyframes zoomOutLeft {
2798 | 	40% {
2799 | 		opacity: 1;
2800 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2801 | 		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
2802 | 	}
2803 | 	to {
2804 | 		opacity: 0;
2805 | 		-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2806 | 		transform: scale(.1) translate3d(-2000px, 0, 0);
2807 | 		-webkit-transform-origin: left center;
2808 | 		transform-origin: left center
2809 | 	}
2810 | }
2811 | 
2812 | @keyframes zoomOutLeft {
2813 | 	40% {
2814 | 		opacity: 1;
2815 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2816 | 		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
2817 | 	}
2818 | 	to {
2819 | 		opacity: 0;
2820 | 		-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2821 | 		transform: scale(.1) translate3d(-2000px, 0, 0);
2822 | 		-webkit-transform-origin: left center;
2823 | 		transform-origin: left center
2824 | 	}
2825 | }
2826 | 
2827 | .zoomOutLeft {
2828 | 	-webkit-animation-name: zoomOutLeft;
2829 | 	animation-name: zoomOutLeft
2830 | }
2831 | 
2832 | @-webkit-keyframes zoomOutRight {
2833 | 	40% {
2834 | 		opacity: 1;
2835 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2836 | 		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
2837 | 	}
2838 | 	to {
2839 | 		opacity: 0;
2840 | 		-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2841 | 		transform: scale(.1) translate3d(2000px, 0, 0);
2842 | 		-webkit-transform-origin: right center;
2843 | 		transform-origin: right center
2844 | 	}
2845 | }
2846 | 
2847 | @keyframes zoomOutRight {
2848 | 	40% {
2849 | 		opacity: 1;
2850 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2851 | 		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
2852 | 	}
2853 | 	to {
2854 | 		opacity: 0;
2855 | 		-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2856 | 		transform: scale(.1) translate3d(2000px, 0, 0);
2857 | 		-webkit-transform-origin: right center;
2858 | 		transform-origin: right center
2859 | 	}
2860 | }
2861 | 
2862 | .zoomOutRight {
2863 | 	-webkit-animation-name: zoomOutRight;
2864 | 	animation-name: zoomOutRight
2865 | }
2866 | 
2867 | @-webkit-keyframes zoomOutUp {
2868 | 	40% {
2869 | 		opacity: 1;
2870 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2871 | 		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2872 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2873 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2874 | 	}
2875 | 	to {
2876 | 		opacity: 0;
2877 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2878 | 		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2879 | 		-webkit-transform-origin: center bottom;
2880 | 		transform-origin: center bottom;
2881 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2882 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2883 | 	}
2884 | }
2885 | 
2886 | @keyframes zoomOutUp {
2887 | 	40% {
2888 | 		opacity: 1;
2889 | 		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2890 | 		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2891 | 		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2892 | 		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
2893 | 	}
2894 | 	to {
2895 | 		opacity: 0;
2896 | 		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2897 | 		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2898 | 		-webkit-transform-origin: center bottom;
2899 | 		transform-origin: center bottom;
2900 | 		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2901 | 		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
2902 | 	}
2903 | }
2904 | 
2905 | .zoomOutUp {
2906 | 	-webkit-animation-name: zoomOutUp;
2907 | 	animation-name: zoomOutUp
2908 | }
2909 | 
2910 | @-webkit-keyframes slideInDown {
2911 | 	from {
2912 | 		-webkit-transform: translate3d(0, -100%, 0);
2913 | 		transform: translate3d(0, -100%, 0);
2914 | 		visibility: visible
2915 | 	}
2916 | 	to {
2917 | 		-webkit-transform: translate3d(0, 0, 0);
2918 | 		transform: translate3d(0, 0, 0)
2919 | 	}
2920 | }
2921 | 
2922 | @keyframes slideInDown {
2923 | 	from {
2924 | 		-webkit-transform: translate3d(0, -100%, 0);
2925 | 		transform: translate3d(0, -100%, 0);
2926 | 		visibility: visible
2927 | 	}
2928 | 	to {
2929 | 		-webkit-transform: translate3d(0, 0, 0);
2930 | 		transform: translate3d(0, 0, 0)
2931 | 	}
2932 | }
2933 | 
2934 | .slideInDown {
2935 | 	-webkit-animation-name: slideInDown;
2936 | 	animation-name: slideInDown
2937 | }
2938 | 
2939 | @-webkit-keyframes slideInLeft {
2940 | 	from {
2941 | 		-webkit-transform: translate3d(-100%, 0, 0);
2942 | 		transform: translate3d(-100%, 0, 0);
2943 | 		visibility: visible
2944 | 	}
2945 | 	to {
2946 | 		-webkit-transform: translate3d(0, 0, 0);
2947 | 		transform: translate3d(0, 0, 0)
2948 | 	}
2949 | }
2950 | 
2951 | @keyframes slideInLeft {
2952 | 	from {
2953 | 		-webkit-transform: translate3d(-100%, 0, 0);
2954 | 		transform: translate3d(-100%, 0, 0);
2955 | 		visibility: visible
2956 | 	}
2957 | 	to {
2958 | 		-webkit-transform: translate3d(0, 0, 0);
2959 | 		transform: translate3d(0, 0, 0)
2960 | 	}
2961 | }
2962 | 
2963 | .slideInLeft {
2964 | 	-webkit-animation-name: slideInLeft;
2965 | 	animation-name: slideInLeft
2966 | }
2967 | 
2968 | @-webkit-keyframes slideInRight {
2969 | 	from {
2970 | 		-webkit-transform: translate3d(100%, 0, 0);
2971 | 		transform: translate3d(100%, 0, 0);
2972 | 		visibility: visible
2973 | 	}
2974 | 	to {
2975 | 		-webkit-transform: translate3d(0, 0, 0);
2976 | 		transform: translate3d(0, 0, 0)
2977 | 	}
2978 | }
2979 | 
2980 | @keyframes slideInRight {
2981 | 	from {
2982 | 		-webkit-transform: translate3d(100%, 0, 0);
2983 | 		transform: translate3d(100%, 0, 0);
2984 | 		visibility: visible
2985 | 	}
2986 | 	to {
2987 | 		-webkit-transform: translate3d(0, 0, 0);
2988 | 		transform: translate3d(0, 0, 0)
2989 | 	}
2990 | }
2991 | 
2992 | .slideInRight {
2993 | 	-webkit-animation-name: slideInRight;
2994 | 	animation-name: slideInRight
2995 | }
2996 | 
2997 | @-webkit-keyframes slideInUp {
2998 | 	from {
2999 | 		-webkit-transform: translate3d(0, 100%, 0);
3000 | 		transform: translate3d(0, 100%, 0);
3001 | 		visibility: visible
3002 | 	}
3003 | 	to {
3004 | 		-webkit-transform: translate3d(0, 0, 0);
3005 | 		transform: translate3d(0, 0, 0)
3006 | 	}
3007 | }
3008 | 
3009 | @keyframes slideInUp {
3010 | 	from {
3011 | 		-webkit-transform: translate3d(0, 100%, 0);
3012 | 		transform: translate3d(0, 100%, 0);
3013 | 		visibility: visible
3014 | 	}
3015 | 	to {
3016 | 		-webkit-transform: translate3d(0, 0, 0);
3017 | 		transform: translate3d(0, 0, 0)
3018 | 	}
3019 | }
3020 | 
3021 | .slideInUp {
3022 | 	-webkit-animation-name: slideInUp;
3023 | 	animation-name: slideInUp
3024 | }
3025 | 
3026 | @-webkit-keyframes slideOutDown {
3027 | 	from {
3028 | 		-webkit-transform: translate3d(0, 0, 0);
3029 | 		transform: translate3d(0, 0, 0)
3030 | 	}
3031 | 	to {
3032 | 		visibility: hidden;
3033 | 		-webkit-transform: translate3d(0, 100%, 0);
3034 | 		transform: translate3d(0, 100%, 0)
3035 | 	}
3036 | }
3037 | 
3038 | @keyframes slideOutDown {
3039 | 	from {
3040 | 		-webkit-transform: translate3d(0, 0, 0);
3041 | 		transform: translate3d(0, 0, 0)
3042 | 	}
3043 | 	to {
3044 | 		visibility: hidden;
3045 | 		-webkit-transform: translate3d(0, 100%, 0);
3046 | 		transform: translate3d(0, 100%, 0)
3047 | 	}
3048 | }
3049 | 
3050 | .slideOutDown {
3051 | 	-webkit-animation-name: slideOutDown;
3052 | 	animation-name: slideOutDown
3053 | }
3054 | 
3055 | @-webkit-keyframes slideOutLeft {
3056 | 	from {
3057 | 		-webkit-transform: translate3d(0, 0, 0);
3058 | 		transform: translate3d(0, 0, 0)
3059 | 	}
3060 | 	to {
3061 | 		visibility: hidden;
3062 | 		-webkit-transform: translate3d(-100%, 0, 0);
3063 | 		transform: translate3d(-100%, 0, 0)
3064 | 	}
3065 | }
3066 | 
3067 | @keyframes slideOutLeft {
3068 | 	from {
3069 | 		-webkit-transform: translate3d(0, 0, 0);
3070 | 		transform: translate3d(0, 0, 0)
3071 | 	}
3072 | 	to {
3073 | 		visibility: hidden;
3074 | 		-webkit-transform: translate3d(-100%, 0, 0);
3075 | 		transform: translate3d(-100%, 0, 0)
3076 | 	}
3077 | }
3078 | 
3079 | .slideOutLeft {
3080 | 	-webkit-animation-name: slideOutLeft;
3081 | 	animation-name: slideOutLeft
3082 | }
3083 | 
3084 | @-webkit-keyframes slideOutRight {
3085 | 	from {
3086 | 		-webkit-transform: translate3d(0, 0, 0);
3087 | 		transform: translate3d(0, 0, 0)
3088 | 	}
3089 | 	to {
3090 | 		visibility: hidden;
3091 | 		-webkit-transform: translate3d(100%, 0, 0);
3092 | 		transform: translate3d(100%, 0, 0)
3093 | 	}
3094 | }
3095 | 
3096 | @keyframes slideOutRight {
3097 | 	from {
3098 | 		-webkit-transform: translate3d(0, 0, 0);
3099 | 		transform: translate3d(0, 0, 0)
3100 | 	}
3101 | 	to {
3102 | 		visibility: hidden;
3103 | 		-webkit-transform: translate3d(100%, 0, 0);
3104 | 		transform: translate3d(100%, 0, 0)
3105 | 	}
3106 | }
3107 | 
3108 | .slideOutRight {
3109 | 	-webkit-animation-name: slideOutRight;
3110 | 	animation-name: slideOutRight
3111 | }
3112 | 
3113 | @-webkit-keyframes slideOutUp {
3114 | 	from {
3115 | 		-webkit-transform: translate3d(0, 0, 0);
3116 | 		transform: translate3d(0, 0, 0)
3117 | 	}
3118 | 	to {
3119 | 		visibility: hidden;
3120 | 		-webkit-transform: translate3d(0, -100%, 0);
3121 | 		transform: translate3d(0, -100%, 0)
3122 | 	}
3123 | }
3124 | 
3125 | @keyframes slideOutUp {
3126 | 	from {
3127 | 		-webkit-transform: translate3d(0, 0, 0);
3128 | 		transform: translate3d(0, 0, 0)
3129 | 	}
3130 | 	to {
3131 | 		visibility: hidden;
3132 | 		-webkit-transform: translate3d(0, -100%, 0);
3133 | 		transform: translate3d(0, -100%, 0)
3134 | 	}
3135 | }
3136 | 
3137 | .slideOutUp {
3138 | 	-webkit-animation-name: slideOutUp;
3139 | 	animation-name: slideOutUp
3140 | }


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
  1 | /*reset*/
  2 | *{margin:0;padding: 0;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,0);font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei",arial,"\5b8b\4f53",sans-serif,tahoma;}
  3 | li{list-style: none;}
  4 | a{text-decoration: none;}
  5 | img{display: block;}
  6 | em{font-style: normal;}
  7 | input{-webkit-user-select:auto;}
  8 | input::-webkit-outer-spin-button,
  9 | input::-webkit-inner-spin-button{
 10 |   -webkit-appearance: none !important;
 11 | }
 12 | /*global*/
 13 | .clearfix:after{
 14 | 	content: ""; 
 15 | 	display: block; 
 16 | 	clear: both;
 17 | }
 18 | .clearfix{
 19 | 	zoom:1;
 20 | }
 21 | .emptybox{position: relative;width: 100%;height: 5rem;margin-top: -.5rem;}
 22 | .common_tip{padding: 16px 22px; color: #fff; background: #000; opacity: 0.7; position:fixed; left:10%; top: 40%; font-size: 14px; border-radius:8px; display: none; z-index: 10000;margin-left: -45px}
 23 | .common_tip2{width:16em; padding: 16px 22px; color: #fff; background: #000; opacity: 0.7; position:fixed; left:10%; top: 40%; font-size: 14px; border-radius:8px; display: none; z-index: 10000;margin-left: -45px}
 24 | .toast_tip{
 25 |   padding: 16px 28px;
 26 |   color: #282828; 
 27 |   background: #FFF; 
 28 |   position:fixed; 
 29 |   left:10%; 
 30 |   top: 40%; 
 31 |   font-size: 14px;
 32 |   border-top: 5px #555c61 solid;
 33 |   border-bottom-left-radius:8px; 
 34 |   border-bottom-right-radius:8px;
 35 |   display: none; 
 36 |   z-index: 10000;
 37 |   margin-left: -45px;
 38 |   box-shadow: 0px 10px 10px rgba(0,0,0,.5);
 39 | }
 40 | /*分享页面css*/
 41 | .d_foot{
 42 |   /*display: none;*/
 43 |   width: 100%;
 44 |   position: fixed;
 45 |   left:0;
 46 |   bottom:0;
 47 |   z-index: 105;
 48 | }
 49 | .d_foot .colse{
 50 |   width: 13px;
 51 |   height: 13px;
 52 |   background: url('https://raw.githubusercontent.com/Fuxiaoqin/Assets/master/img/img/colse.png') left top no-repeat;
 53 |   background-size: 100%;
 54 |   position: absolute;
 55 |   right: 7px;
 56 |   top:8px;
 57 |   z-index: 22;
 58 | }
 59 | .d_foot_bg{
 60 |   width: 100%;
 61 |   height: 100%;
 62 |   background:#000;
 63 |   position: absolute;
 64 |   left: 0;
 65 |   top: 0;
 66 |   z-index: 9;
 67 |   opacity: 0.75;
 68 | }
 69 | .d_foot .d_foot_main{
 70 |   padding: 11px 30px 7px 15px;
 71 |   height: 41px;
 72 |   position: relative;
 73 |   z-index: 10;
 74 | }
 75 | .d_foot .left{
 76 |   width: 41px;
 77 |   height: 41px;
 78 |   background:url('https://raw.githubusercontent.com/Fuxiaoqin/Assets/master/img/img/foot-logo.png') left top no-repeat;
 79 |   background-size: 100%;
 80 |   float:left;
 81 |   margin-right: 7px;
 82 | }
 83 | .d_foot .text{
 84 |   height: 40px;
 85 |   line-height: 40px;
 86 |   color: #fff;
 87 |   font-size: 18px;
 88 |   float:left;
 89 | }
 90 | .d_foot a{
 91 |   width:110px;
 92 |   height: 34px;
 93 |   line-height: 34px;
 94 |   margin-top:2px;
 95 |   text-align: center;
 96 |   background: #fff;
 97 |   float: right;
 98 |   color:#39d9ab;
 99 |   font-size:14px;
100 |   border-radius: 22px;
101 | }
102 | .d_foot .share-img{
103 |   position: absolute;
104 |   right: 5px;
105 |   top: -44px;
106 | }
107 | .notice{
108 |   width: 100%;
109 |   text-align: center;
110 |   position: absolute;
111 |   bottom: 0;
112 |   font-size: 10px;
113 |   /*line-height: 14px;*/
114 | }
115 | /*animate*/
116 | @keyframes slowroll {
117 | 0% {
118 |    	transform:rotate(0deg);
119 |  }
120 |  100% {
121 |    	transform:rotate(-360deg);
122 |  }
123 | }
124 | @keyframes quickroll {
125 | 0% {
126 |    	transform:rotate(0deg);
127 |  }
128 |  100% {
129 |    	transform:rotate(-2160deg);
130 |  }
131 | }
132 | /*页面加载图*/
133 | .stressing{
134 |   width: 100%;
135 |   height: 100%;
136 |   position: fixed;
137 |   left: 0;
138 |   top: 0;
139 |   background: #fff;
140 |   z-index: 9999999999999;
141 | }
142 | .stressing span{
143 |   width: 100px;
144 |   height: 120px;
145 |   background: url('https://raw.githubusercontent.com/Fuxiaoqin/Assets/master/img/img/zx-loading.gif') left top no-repeat;
146 |   background-size: 100px;
147 |   position: absolute;
148 |   left: 50%;
149 |   top: 45%;
150 |   margin-left: -50px;
151 |   margin-top: -60px;
152 | }
153 | .pv{
154 |     z-index:5; 
155 |     position: absolute;
156 |     right: 0;
157 |     top: 8px;
158 |     background-color: #FFFFFF;
159 |     border-top: 2px solid #17b3ca;
160 |     border-bottom: 2px solid #17b3ca;
161 |     border-left: 2px solid #17b3ca;
162 |     border-top-left-radius: 5px;
163 |     border-bottom-left-radius: 5px;
164 |     font-size: 10px;
165 | }
166 | .pv p{
167 |     font-size: 10px;
168 | }


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /*reset*/
  2 | html,body{vertical-align: baseline;font-weight: inherit; font-family:"微软雅黑"; font-style: inherit;font-size: 100%;outline: 0;padding: 0;margin: 0;border: 0;}
  3 | div,p,span,form,iframe,table,td,th,input,textarea,button,label,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0;}
  4 | h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
  5 | ul,ol,li,dl {list-style-type: none;}
  6 | em,i,dfn,cite,strong,small {font-style: normal;}
  7 | fieldset,button,input,select,option {vertical-align: middle;font: 12px/18px "", arial, sans-serif;}
  8 | table {border-collapse: collapse;border-spacing: 0;}
  9 | img {border: 0;}
 10 | textarea {resize: none;}
 11 | label {cursor: pointer;}
 12 | /*color*/
 13 | a {text-decoration: none;   }
 14 | a:hover {text-decoration: none;}
 15 | a img, :link img, :visited img {border:0px;} 
 16 | a,img,button,input,textarea,div{-webkit-tap-highlight-color:rgba(255,255,255,0);}
 17 | 
 18 | /*global*/
 19 | body{
 20 |     background-image: url('../images/bg.jpg');
 21 |     background-repeat: no-repeat;
 22 |     background-size:100%;
 23 |     background-position: top;
 24 |     /*height: 46.666666rem;*/
 25 |     width: 20rem;
 26 |     min-width: 100%;
 27 |     /*min-width: 300px;*/
 28 | }
 29 | /*.index_warp{
 30 |     height:90%;
 31 | }*/
 32 | .title_box{
 33 |     background-image: url('../images/draw_title.png');
 34 |     background-repeat: no-repeat;
 35 |     background-size: 100%;
 36 |     background-position: center;
 37 |     position: relative;
 38 |     height: 12rem;
 39 |     width: 20rem;
 40 |     min-width: 100%;
 41 | }
 42 | .draw_people{
 43 |     position: absolute;
 44 |     right: 0;
 45 |     top: 8px;
 46 |     background-color: #FFFFFF;
 47 |     border-top: 2px solid #17b3ca;
 48 |     border-bottom: 2px solid #17b3ca;
 49 |     border-left: 2px solid #17b3ca;
 50 |     border-top-left-radius: 5px;
 51 |     border-bottom-left-radius: 5px;
 52 | }
 53 | .draw_people p{
 54 |     font-size: 10px;
 55 | } 
 56 | .sign_box{
 57 |     width: 19.1rem;
 58 |     height: 8.5rem;
 59 |     margin: 0 auto;
 60 |     position: relative;
 61 |     background-image: url('../images/draw_signbox1.png');
 62 |     background-repeat: no-repeat;
 63 |     background-size: 100%;
 64 |     background-position: center;
 65 | }
 66 | .sign_btn img{
 67 |     width: 3.067rem;
 68 |     height: 0.96rem;
 69 |     position: absolute;
 70 |     top:2.75rem;
 71 |     left: calc(50% - 1.5rem);
 72 |     cursor: pointer;
 73 | }
 74 | .rate_box{
 75 |     width: 16rem;
 76 |     height: 1.09rem;
 77 |     position: absolute;
 78 |     top:3.6rem;
 79 |     left: calc(50% - 8rem);
 80 |     cursor: pointer;
 81 |     text-align: center;
 82 | }
 83 | .rate_box p {
 84 |     font-size: 0.32rem;
 85 |     margin-top: 5px;
 86 | }
 87 | .rate_line{
 88 |     width: 100%
 89 | } 
 90 | .rate_num{
 91 |     color: #f26262;
 92 |     font-size: 0.373rem;
 93 | }
 94 | .roll_box{
 95 |     height: 16rem;
 96 |     position: relative;
 97 |     background-image: url('../images/roll_bg.png');
 98 |     background-repeat: no-repeat;
 99 |     background-size: 100%;
100 |     background-position: center;
101 | }
102 | #go_roll{
103 |     width: 3.47rem;
104 |     height: 4.32rem;
105 |     position: absolute;
106 |     left: calc(50% - 1.7rem);
107 |     top: 5.4rem;
108 |     z-index: 5;
109 |     background-color: rgba(255, 255, 255, 0);
110 |     border: none;
111 |     outline: none;
112 | }
113 | .rule{
114 |     position: absolute;
115 |     top: .5rem;
116 |     right: 1rem;
117 |     font-size: .62rem;
118 |     color: #FFFFFF;
119 |     background-color: rgba(51,51,51,1);
120 |     border-radius: 5px;
121 |     padding: .15rem .6rem;
122 |     cursor: pointer;
123 | }
124 | .roll_shadow{
125 |     width: 7.8rem;
126 |     height: 1.39rem;
127 |     position: absolute;
128 |     left: calc(50% - 3.8rem);
129 |     top: 14rem;
130 |     z-index: -1;
131 |     background-image: url('../images/roll_shadow.png');
132 |     background-repeat: no-repeat;
133 |     background-size: 100%;
134 |     background-position: center;
135 | }
136 | .roll_reward{
137 |     width: 11.47rem;
138 |     height: 11.47rem;
139 |     position: absolute;
140 |     left: calc(50% - 5.73rem);
141 |     top: 2rem;
142 |     z-index: 2;
143 |     background-image: url('../images/roll_center.png');
144 |     background-repeat: no-repeat;
145 |     background-size: 100%;
146 |     background-position: center;
147 |     transition: transform 12s;
148 |     transition-timing-function: ease;
149 |     -moz-transition-timing-function: ease; /* Firefox 4 */
150 |     -webkit-transition-timing-function: ease; /* Safari 和 Chrome */
151 | }
152 | .roll_ring{
153 |     width: 13.36rem;
154 |     height: 13.36em;
155 |     position: absolute;
156 |     left: calc(50% - 6.7rem);
157 |     top: 1.1rem;
158 |     z-index: 1;
159 |     background-image: url('../images/roll_ring.png');
160 |     background-repeat: no-repeat;
161 |     background-size: 100%;
162 |     background-position: center;
163 |     animation:slowroll 30s infinite linear;
164 | }
165 | .roll_point{
166 |     width: 3.47rem;
167 |     height: 4.32rem;
168 |     position: absolute;
169 |     left: calc(50% - 1.7rem);
170 |     top: 5.4rem;
171 |     z-index: 5;
172 |     background-image: url('../images/roll_point.png');
173 |     background-repeat: no-repeat;
174 |     background-size: 100%;
175 |     background-position: center;
176 | }
177 | .reward_list_box{
178 |     width: 90%;
179 |     position: relative;
180 |     margin: 0 auto;
181 |     background-color: #FFF;
182 |     border-radius: 7px;
183 |     padding: 1.3rem 0 .8rem 0;
184 |     top: .5rem;
185 | }
186 | .reward_list_box img.zwardImg{
187 |     display: block;
188 |     width: 50%;
189 |     position: absolute;
190 |     left: 50%;
191 |     margin-left: -25%;
192 |     top: -1.4rem;
193 | }
194 | 
195 | .reward_list{
196 |     width: 100%;
197 |     overflow: hidden;
198 | }
199 | .reward_list li{
200 |     width: calc(100%-1.5rem);
201 |     /*display: flex;*/
202 |     justify-content: flex-end;
203 |     padding-left: 2rem;
204 |     position:relative;
205 |     top:0;
206 |     overflow:hidden;
207 | }
208 | .reward_list li p{
209 |     font-size: .7rem;
210 |     /*display: block;*/
211 |     /*flex-grow: 1;*/
212 |     width:5.9rem;
213 |     text-align: left;
214 |     float:left;         
215 | }
216 | .reward_list_box .reward_list li p:nth-child(2){
217 |     width:4rem;
218 |     /*text-align: center;*/
219 | }
220 | p.copyright{
221 |     text-align: center;
222 |     color: #FFFFFF;
223 |     width: 100%;
224 |     font-size: .7rem;
225 |     position: absolute;
226 |     bottom: -2rem;
227 | }
228 | 
229 | .frame{
230 |     display: none;
231 |     position: absolute;
232 |     z-index: 100;
233 |     top: 0;
234 |     left: 0;
235 |     height: 46.666666rem;
236 |     width: 20rem;
237 |     background-color: rgba(0,0,0,0.8);
238 | }
239 | .rule_frame{
240 |     display: none;
241 |     height: 15.57rem;
242 |     width: 14.35rem;
243 |     position: fixed;
244 |     z-index: 101;
245 |     top: 10rem;
246 |     left: calc(50% - 7.1725rem);
247 |     background-image: url('../images/rule_main.png');
248 |     background-repeat: no-repeat;
249 |     background-size: 100%;
250 |     background-position: center;
251 | }
252 | .close_btn{
253 |     height: 1.1rem;
254 |     width: 1.1rem;
255 |     top: .6rem;
256 |     right: .6rem;
257 |     position: absolute;
258 |     background-image: url('../images/close.png');
259 |     background-repeat: no-repeat;
260 |     background-size: 100%;
261 |     background-position: center;
262 |     cursor: pointer;
263 | }
264 | .rule_frame .close_btn{
265 |     top:1.9rem;
266 | }
267 | .drawtime{
268 |     color: #ea8505;
269 | }
270 | 
271 | .child_frame{
272 |     display: none;
273 |     height: 15.57rem;
274 |     width: 11.8rem;
275 |     position: fixed;
276 |     z-index: 101;
277 |     top: 9rem;
278 |     left: calc(50% - 5.9rem);
279 |     
280 | }
281 | .cannot_frame{
282 |     background-image: url('../images/cannot_bg.png');
283 |     background-repeat: no-repeat;
284 |     background-size: 100%;
285 |     background-position: center;
286 | }
287 | .cannot_frame p:nth-child(2){
288 |     text-align: center;
289 |     margin: 6.5rem 0 0 0;
290 |     font-size: 1.28rem
291 | }
292 | .cannot_frame p:nth-child(3){
293 |     text-align: center;
294 |     margin: .25rem 0 0 0;
295 |     font-size: .62rem;
296 |     color: #898989;
297 | }
298 | .cannot_frame span{
299 |     color:orange;
300 | }
301 | .can_frame{
302 |     background-image: url('../images/congr.png');
303 |     background-repeat: no-repeat;
304 |     background-size: 100%;
305 |     background-position: center; 
306 |     width:14.8rem;
307 |     left:calc(50% - 6.9rem);
308 | }
309 | .can_frame .close_btn{
310 |     right: 6.7rem;
311 |     top:-1rem;
312 | }
313 | 
314 | .cannot_backbtn{
315 |     height: 2rem;
316 |     width: 7.28rem;
317 |     margin: 1.2rem auto 0 auto;
318 |     background-image: url('../images/conffimBtn.png');
319 |     background-repeat: no-repeat;
320 |     background-size: 100%;
321 |     background-position: center;
322 | }
323 | .can_frame .cannot_backbtn{
324 |     margin: 6.2rem auto 0 auto;
325 |     width:6.28rem;
326 | }
327 | .can_frame.child_frame p{
328 |     text-align: center;
329 |     font-size: 0.6rem;
330 |     margin-top: 3.5rem;
331 | }
332 | .can_frame.child_frame p:nth-child(2){
333 |     color:orange;
334 | }
335 | .can_frame.child_frame p:nth-child(3){
336 |     margin-top: 0rem;
337 | }
338 | .can_frame .awardImg img{
339 |     width: 3rem;
340 |     position: absolute;
341 |     left: 50%;
342 |     margin-left: -1.5rem;
343 |     margin-top: .5rem;
344 | }
345 | 
346 | /*animate*/
347 | @keyframes slowroll {
348 | 0% {
349 |     transform:rotate(0deg);
350 |  }
351 |  100% {
352 |     transform:rotate(-360deg);
353 |  }
354 | }
355 | @keyframes quickroll {
356 | 0% {
357 |     transform:rotate(0deg);
358 |  }
359 |  100% {
360 |     transform:rotate(-2160deg);
361 |  }
362 | }
363 | .page_1_foot{
364 |     width: 100%;
365 |     /* border-radius: 5px; */
366 |     height: 40px;
367 |     line-height: 40px;
368 |     font-size: 16px;
369 |      color: #fff; 
370 |     text-align: center;
371 |     background: #4ebdcd;
372 |     position: fixed;
373 |     bottom: -8px;
374 |     z-index: 100; 
375 |     display:none; 
376 | }
377 | .d_foot{
378 |     display:none;
379 | }
380 | .thanksP{
381 |     background-image:url("../images/thanksP.png");;
382 |     background-repeat: no-repeat;
383 |     background-size: 100%;
384 |     background-position: center;
385 | }
386 | .thanksP .close_btn{
387 |     top:1.6rem;
388 | } 
389 | .thanksP .cannot_backbtn{
390 |     margin-top:9.2rem;
391 | }  


--------------------------------------------------------------------------------
/images/aBtn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/aBtn.png


--------------------------------------------------------------------------------
/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/bg.jpg


--------------------------------------------------------------------------------
/images/cannot_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/cannot_bg.png


--------------------------------------------------------------------------------
/images/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/close.png


--------------------------------------------------------------------------------
/images/comfortU.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/comfortU.png


--------------------------------------------------------------------------------
/images/conffimBtn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/conffimBtn.png


--------------------------------------------------------------------------------
/images/congr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/congr.png


--------------------------------------------------------------------------------
/images/dishini.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/dishini.png


--------------------------------------------------------------------------------
/images/draw_0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_0.png


--------------------------------------------------------------------------------
/images/draw_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_1.png


--------------------------------------------------------------------------------
/images/draw_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_2.png


--------------------------------------------------------------------------------
/images/draw_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_3.png


--------------------------------------------------------------------------------
/images/draw_signbox1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_signbox1.png


--------------------------------------------------------------------------------
/images/draw_title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/draw_title.png


--------------------------------------------------------------------------------
/images/humidifier.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/humidifier.png


--------------------------------------------------------------------------------
/images/new_03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/new_03.png


--------------------------------------------------------------------------------
/images/roll_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/roll_bg.png


--------------------------------------------------------------------------------
/images/roll_center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/roll_center.png


--------------------------------------------------------------------------------
/images/roll_point.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/roll_point.png


--------------------------------------------------------------------------------
/images/roll_ring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/roll_ring.png


--------------------------------------------------------------------------------
/images/roll_shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/roll_shadow.png


--------------------------------------------------------------------------------
/images/rule_main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/rule_main.png


--------------------------------------------------------------------------------
/images/thanksP.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/thanksP.png


--------------------------------------------------------------------------------
/images/weight.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/weight.jpg


--------------------------------------------------------------------------------
/images/weight2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Fuxiaoqin/WeightDraw/09210dca44e196ffdaf46e7d1847886f74b2966d/images/weight2.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" style="height: auto; overflow: auto; min-height:100%;">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1, maximum-scale=1, user-scalable=no">
 7 |     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 8 |     <meta name="apple-mobile-web-app-title" content=""/>
 9 |     <meta name="apple-touch-fullscreen" content="YES" />
10 |     <meta name="apple-mobile-web-app-capable" content="yes" />
11 |     <meta name="format-detection" content="telephone=no" />
12 |     <meta name="HandheldFriendly" content="true" />
13 |     <meta http-equiv="x-rim-auto-match" content="none" />
14 |     <meta itemprop="name" content="" id="qqShareContent">
15 |     <meta itemprop="description" content="" id="qqShareDes">
16 |     <meta itemprop="image" content="" id="qqShareImg">
17 |     <title>天天称重抽大奖-test</title>
18 |     <link rel="stylesheet" href="css/reset.css"/>
19 |     <link rel="stylesheet" href="css/style.css">
20 |     <link rel="stylesheet" href="css/animate.css">
21 |     
22 | </head>
23 | <body>
24 |     <div class="index_warp">
25 |         <div class="title_box">
26 |             <div class="draw_people">
27 |                 <p><span class="peopleCount">10000</span>人参与</p>
28 |             </div>
29 |         </div>
30 |         <div class="sign_box">
31 |             <div class="rate_box">
32 |                 <img src="images/draw_0.png" alt="签到进度" class="rate_line noday">
33 |             </div>
34 |         </div>
35 |         <div class="roll_box">
36 |             <div class="rule"><p>活动规则</p></div>
37 |             <div class="roll_mian">
38 |                 <div class="roll_reward"></div>
39 |                 <div class="roll_ring"></div>
40 |                 <div class="roll_point"></div>
41 |                 <button id="go_roll" class="cannot"></button>
42 |             </div>
43 |             <div class="roll_shadow"></div>
44 |         </div>
45 |         <div class="reward_list_box">
46 |             <img class="zwardImg" src="images/new_03.png" alt="">
47 |             <ul class="reward_list"></ul>
48 |             <p class="copyright">活动最终解释权归本人所有 本活动与苹果公司无关</p>
49 |         </div> 
50 |     </div>
51 |     <div class="common_tip"></div>
52 |     <div class="d_foot" >
53 |         <span class="colse"></span>
54 |         <div class="d_foot_bg"></div>
55 |         <div class="d_foot_main">
56 |             <div class="left"></div>
57 |             <div class="text">XXX,专业瘦</div>
58 |             <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kufeng.hj.enjoy">下载APP</a>
59 |         </div>
60 |     </div>
61 | 
62 |     <!--蒙版-->
63 |     <div class="frame">
64 |         <!--规则弹窗-->
65 |         <div class="rule_frame child_frame"><div class="close_btn"></div></div>
66 |         <!--未抽中奖弹窗-->
67 |         <div class="cannot_frame child_frame">
68 |             <div class="close_btn"></div>
69 |             <p>很可惜没中奖</p>
70 |             <p>您还有次<span > 1 </span>次中奖机会！</p>
71 |             <div class="cannot_backbtn"></div>
72 |         </div>
73 |         <!--谢谢参与弹窗-->
74 |         <div class="thanksP child_frame">
75 |             <div class="close_btn"></div>
76 |             <div class="cannot_backbtn";></div>
77 |         </div>
78 |         <!-- 抽中弹窗 -->
79 |         <div class="can_frame child_frame">
80 |             <div class="close_btn"></div>
81 |             <p>获得一个迪士尼保温杯</p>
82 |             <p>我们会尽快联系您确认邮寄信息</p>
83 |             <div class="awardImg"><img src="" alt=""></div>
84 |             <div class="cannot_backbtn"></div>
85 |         </div>
86 |     </div>
87 |     <div class="page_1_foot">活动已结束了</div>
88 | </body>
89 | <script src="js/jquery.min.js"></script>
90 | <script src="js/commonJs.js"></script>
91 | <script src="js/jweixin-1.0.0.js"></script>
92 | <script src="js/common.js"></script>
93 | <script src="js/index.js"></script>
94 | </html>


--------------------------------------------------------------------------------
/js/common.js:
--------------------------------------------------------------------------------
  1 | ;
  2 | //判断是否测试环境
  3 | var _HOST = 'https://app.hxsapp.com';
  4 | var _ACTHOST = 'https://act.hxsapp.com';
  5 | var _SHOST='https://app.hxsapp.com'; //分享链接头部
  6 | var _ACTSHOST = 'https://act.hxsapp.com'; //固定http
  7 | // if (window.location.href.indexOf('121.41.83.91') !== -1) {
  8 | //     _HOST = 'http://121.41.83.91';
  9 | //     _ACTHOST = 'http://121.41.83.91';
 10 | //     _SHOST = 'http://app.hxsapp.com';
 11 | // }else{
 12 | //     //2.8版本 客户端随身听所需音频信息
 13 | //     moreMyUserAgent(function(Version){
 14 | //       if(Version >= 2.8 && Version){
 15 | //         _HOST = 'https://app.hxsapp.com';
 16 | //         _ACTHOST = 'https://act.hxsapp.com';
 17 | //         _SHOST = 'https://app.hxsapp.com';
 18 | //       }else{
 19 | //         _HOST = 'https://app.hxsapp.com';
 20 | //         _ACTHOST = 'https://act.hxsapp.com';
 21 | //         _SHOST = 'https://app.hxsapp.com';
 22 | //       }
 23 | //     });
 24 | // }
 25 | 
 26 | var modelIdfa = $_GET('model_idfa');
 27 | var CallBack = '?callback=?' + '&model_idfa=' + modelIdfa;
 28 | 
 29 | /**
 30 |  * [种cookie]
 31 |  */
 32 | $(function(){
 33 |     var sess_token = $_GET('sess_token');
 34 |     if (sess_token) {
 35 |         if ($.cookie('ci_session')) {
 36 |             $.removeCookie('ci_session', {path:'/'});
 37 |         }
 38 | 
 39 |         var date = new Date();
 40 |         date.setTime(date.getTime() + (86400 * 1000)); //sec秒
 41 |         $.cookie('ci_session', sess_token, { path: '/', expires: date });
 42 |     }
 43 | });
 44 | /**
 45 |  * [$_GET 从url取参数值]
 46 |  * @param  {[type]} key [description]
 47 |  * @return {[type]}     [description]
 48 |  */
 49 | function $_GET(key){
 50 |     var p = window.location.href.split('?'),
 51 |         v = '';
 52 |     if (p.length < 2) {
 53 |       return false;
 54 |     }
 55 | 
 56 |     p = p[1].split('&');
 57 |     p.map(function(item){
 58 |       var temp = item.split('=');
 59 |       if( temp[0] == key ){
 60 |       	if (temp.length > 2) {
 61 |       		for (var i in temp) {
 62 |       			if (i > 0) {
 63 |       				if (i > 1) {
 64 |       					v += ('=' + temp[i]);
 65 |       				}else{
 66 |       					v += temp[i];
 67 |       				}
 68 |       			}
 69 |       		}
 70 |       	}else{
 71 |       		v = temp[1];
 72 |       	}
 73 |       }
 74 |     });
 75 |     return v;
 76 | }
 77 | //判断页面是否加载完毕
 78 | function preLoading(id, fn){
 79 |     document.onreadystatechange = function(){
 80 |         if(document.readyState == 'complete' || document.readyState == 'loaded'){
 81 |             finish(fn);
 82 |         }
 83 |     }
 84 |     function finish(fn){
 85 |       setTimeout(function(){
 86 |         document.getElementById(id).style.display = 'none';
 87 |         $('html,body').css({
 88 |           height: 'auto',
 89 |           overflow: 'auto'
 90 |         });
 91 |         if(fn){
 92 |           fn();
 93 |         }
 94 |       },1000);
 95 |     }
 96 | 
 97 |   $('#' + id).on('touchstart',function(){
 98 |     return false;
 99 |   });
100 | }
101 | //模拟hover效果
102 | function setHover(seletor, sClass, target) {
103 | 
104 |         if (!seletor) return;
105 |         var sClass = sClass || 'hover';
106 |         $(document).on('touchstart', seletor, function() {
107 |             if (target == 'parent') {
108 |                 $(this).parent().addClass(sClass);
109 |                 hoverObj = {obj: $(this).parent(), class: sClass};
110 |             } else if (target) {
111 |                 $(target).addClass(sClass);
112 |                 hoverObj = {obj: $(target), class: sClass};
113 |             } else {
114 |                 $(this).addClass(sClass);
115 |                 hoverObj = {obj: $(this), class: sClass};
116 |             }
117 |         });
118 | 
119 |         var ua = window.navigator.userAgent;
120 | 
121 |         if (ua.indexOf('Android') != -1) {
122 |             $(document).on('touchmove', seletor, function() {
123 |                 hoverObj.obj.removeClass(hoverObj.class);
124 |             });
125 |         }
126 | 
127 |         $(document).on('touchend', seletor, function() {
128 |             hoverObj.obj.removeClass(hoverObj.class);
129 |         });
130 |     }
131 | //根据时间戳生成的时间对象
132 |   function changeTime(data1,type){
133 |       function todub(nun){
134 |           if(nun < 10){
135 |                nun = '0' + nun;
136 |           }
137 |           return nun;
138 |       }
139 | 
140 |       var date = data1;
141 |       date = date.substring(0,19);
142 |       date = date.replace(/-/g,'/');
143 |       var timestamp = new Date(date).getTime();
144 |       var d = new Date(timestamp);
145 |       var data = '';
146 |       console.log(date);
147 |       if(type == '0'){
148 |           data = (d.getFullYear()) + "年" +
149 |          (todub(d.getMonth() + 1)) + "月" +
150 |          (todub(d.getDate())) + "日";
151 |       }else if(type== '1'){
152 |          data = (todub(d.getMonth() + 1)) + "月" +
153 |          (todub(d.getDate())) + "日" + (todub(d.getHours())) + ":" + (todub(d.getMinutes())) + ":" + (todub(d.getSeconds()));
154 |       }
155 |       return data;
156 |   }
157 | 
158 | 
159 | 
160 | /*!
161 |  * jQuery Cookie Plugin v1.4.1
162 |  * https://github.com/carhartl/jquery-cookie
163 |  *
164 |  * Copyright 2013 Klaus Hartl
165 |  * Released under the MIT license
166 |  */
167 | //  //判断好享瘦版本
168 | // var UserAgent = window.navigator.userAgent;
169 | // function myUserAgent(fn, state){
170 | //     var hxsVersion = '';
171 | //     if(UserAgent){
172 | //         var uaParameter = UserAgent.split('hxsapp-version-');
173 | //         hxsVersion = parseFloat(uaParameter[uaParameter.length-1]);
174 | //     }
175 | //     if(fn){
176 | //       fn(hxsVersion);
177 | //     }
178 | // }
179 |  //判断好享瘦版本
180 | var UserAgent = window.navigator.userAgent;
181 | function myUserAgent(fn, state){
182 |     var hxsVersion = '';
183 |     if(UserAgent){
184 |         var uaParameter = UserAgent.split('hxsapp-version-');
185 |         hxsVersion = uaParameter[uaParameter.length-1];
186 |         if(hxsVersion.length >=5){
187 |             var arr = hxsVersion.split('.');
188 |             hxsVersion = parseFloat(arr[0] + '.' + arr[1] + arr[2]);
189 |         }else{
190 |             hxsVersion = parseFloat(hxsVersion);
191 |         }
192 |     }
193 |     // var hxsVersion = getHsxAppVersion()
194 |     if(fn){
195 |       fn(hxsVersion);
196 |     }
197 | }
198 | //多位判断 如2.7.1
199 | function moreMyUserAgent(fn, state){
200 |     var hxsVersion = '';
201 |     if(UserAgent){
202 |         var uaParameter = UserAgent.split('hxsapp-version-');
203 |         hxsVersion = uaParameter[uaParameter.length-1];
204 |         if(hxsVersion.length >=5){
205 |             var arr = hxsVersion.split('.');
206 |             hxsVersion = parseFloat(arr[0] + '.' + arr[1] + arr[2]);
207 |         }else{
208 |             hxsVersion = parseFloat(hxsVersion);
209 |         }
210 |     }
211 |     // var hxsVersion = getHsxAppVersion()
212 |     if(fn){
213 |       fn(hxsVersion);
214 |     }
215 | }
216 | function getHsxAppVersion (){
217 |   //获取版本号
218 |   var UserAgent = window.navigator.userAgent;
219 |   var windowLocation = window.location.href;
220 |   var __version = UserAgent.split('hxsapp-version-')[1] ? UserAgent.split('hxsapp-version-')[1].split("&")[0] : "0.0.0";
221 |   function __get_dian(str){
222 |     var num = 0 ;
223 |     for (var i = 0; i < str.length; i++) {
224 |       if (str[i]== ".") {
225 |         num ++;
226 |       }
227 |     }
228 |     return num
229 |   }
230 | 
231 |   //先补零操作
232 |   //例如 2.10 ＝> 2.10.0
233 |   //例如 2.10.1 不会补零操作
234 | 
235 |   if(__get_dian(__version) == 1 ){
236 |     __version = __version + ".0"
237 |   }
238 |   return __version
239 | 
240 | }
241 | 
242 | 
243 | 
244 | function compareAppVersion (new_str,old_str){
245 | 
246 |   //new_str > old_str
247 |   // compareVersionEle("2.10.0","2.9.0") ture
248 | 
249 |   if (typeof new_str != "string" || typeof old_str != "string" ) {
250 |     console.log("参数类型必须微字符串：string ")
251 |     return;
252 |   }
253 |   if ( new_str.indexOf(".") < 0 || old_str.indexOf(".") < 0  ) {
254 |     console.log("版本号传入有错误")
255 |     return;
256 |   }
257 | 
258 |   function __get_dian(str){
259 |     var num = 0 ;
260 |     for (var i = 0; i < str.length; i++) {
261 |       if (str[i]== ".") {
262 |         num ++;
263 |       }
264 |     }
265 |     return num
266 |   }
267 | 
268 |   var __new_str = new_str;
269 |   var __old_str = old_str;
270 | 
271 |   //先补零操作
272 |   if(__get_dian(new_str) == 1 ){
273 |     __new_str = new_str + ".0"
274 |   }
275 |   if(__get_dian(old_str) == 1 ){
276 |     __old_str = old_str + ".0"
277 |   }
278 | 
279 |   // debugger
280 | 
281 |   var new_str_split = __new_str.split(".");
282 |   var old_str_split = __old_str.split(".");
283 | 
284 |   //比较第一位
285 |   if (  new_str_split[0] ===  old_str_split[0] ) {
286 | 
287 |     //比较第二位
288 |     if ( new_str_split[1] ===  old_str_split[1] ) {
289 | 
290 |       //比较第三位
291 |       if ( parseInt(new_str_split[2]) >= parseInt( old_str_split[2]) ) {
292 |        return true
293 |       }else if ( parseInt(new_str_split[2]) < parseInt( old_str_split[2]) ) {
294 |          return false
295 |       }
296 |     }else if ( parseInt(new_str_split[1]) > parseInt( old_str_split[1]) ) {
297 |       return true
298 |     }else if ( parseInt( new_str_split[1] ) < parseInt( old_str_split[1]) ) {
299 |       return false
300 |     }
301 | 
302 |   }else if ( parseInt(new_str_split[0]) > parseInt( old_str_split[0]) ) {
303 |      return true
304 |   }else if ( parseInt(new_str_split[0]) < parseInt( old_str_split[0]) ) {
305 |      return false
306 |   }
307 | 
308 | }
309 | //2.5未登录状态调用登录框(接口返回401判断)
310 | function showLoginPage(code, type, obj, msg){
311 |   if(code == 401){
312 |     myUserAgent(function(Version){
313 |         if(Version && Version >= 2.5){
314 |           window.location.href = 'https://hxsapp_showloginpage';
315 |         }
316 |     })
317 |   }
318 |   if(type){
319 |     if(code != 401){
320 |         msgTip(obj, msg);
321 |     }
322 |   }
323 | }
324 | 
325 | //2.5未登录状态调用登录框(点击类)
326 | function locationCheckSessToken(obj, type){
327 |     var token = $_GET('sess_token');
328 |     var locationType = window.location.search.indexOf('sess_token');
329 |     if(token && token.length < 10 || (locationType != -1 && !token)){
330 |         if(type){
331 |           $(obj).show();
332 |         }
333 |         $(document).on('click', obj, function(){
334 |           myUserAgent(function(Version){
335 |             if(Version && Version >= 2.5){
336 |               window.location.href = 'https://hxsapp_showloginpage';
337 |             }
338 |           })
339 |           return false;
340 |         });
341 |     }
342 | }
343 | 
344 |  //提示消息框
345 |   function msgTip(obj, msg){
346 |     if(!msg)return;
347 |       var target = $(obj);
348 |       //var width = $(obj).css()
349 |       target.text(msg);
350 |       target.css({
351 |         'left':'50%',
352 |         'marginLeft': - target.width()/2 - 16,
353 |       })
354 |       target.show();
355 |       setTimeout(function(){
356 |           target.hide();
357 |       },1000);
358 |   }
359 |   function msgTip2(obj, msg){
360 |     if(!msg)return;
361 |       var target = $(obj);
362 |       //var width = $(obj).css()
363 |       target.text(msg);
364 |       target.css({
365 |         'left':'50%',
366 |         'marginLeft': - target.width()/2 - 16,
367 |       })
368 |       target.show();
369 |       setTimeout(function(){
370 |           target.hide();
371 |       },2500);
372 |   }
373 |   function toastTip(obj, msg, time){
374 |       if(!msg)return;
375 |       if(!time){time=1000};
376 |         var target = $(obj);
377 |         var sliceLength = 16;
378 |         sliceRate = Math.ceil(msg.length/16);
379 |         if(msg.length>sliceLength){
380 |           var msg2='';
381 |           for(var i=0;i<sliceRate;i++){
382 |               msg2+=msg.slice(sliceLength*i,sliceLength*(i+1))+'<br>'
383 |           }
384 |           msg=msg2
385 |         }
386 |         target.html(msg);
387 |         target.css({'left':'50%','marginLeft': -target.width()/2 -22})
388 |         target.show();
389 |         setTimeout(function(){
390 |             target.hide();
391 |         },time);
392 |   }
393 | 
394 |   //字符串超出部分显示省略号
395 |   function subStlength(str, maxLength, targetLength){
396 |     if(str){
397 |       var reg= /^[A-Za-z]+$/;
398 |       var re =  /^[0-9a-zA-Z]*$/g;
399 |       if (reg.test(str) || re.test(str)){
400 |         if(str.length > 2 * maxLength )str = str.substring(0, 2 * targetLength) + '...';
401 |       }else{
402 |         if(str.length > maxLength )str = str.substring(0,targetLength) + '...';
403 |       }
404 | 
405 |     }
406 |       return str;
407 |   }
408 | 
409 | (function (factory) {
410 |   if (typeof define === 'function' && define.amd) {
411 |     // AMD
412 |     define(['jquery'], factory);
413 |   } else if (typeof exports === 'object') {
414 |     // CommonJS
415 |     factory(require('jquery'));
416 |   } else {
417 |     // Browser globals
418 |     factory(jQuery);
419 |   }
420 | }(function ($) {
421 | 
422 |   var pluses = /\+/g;
423 | 
424 |   function encode(s) {
425 |     return config.raw ? s : encodeURIComponent(s);
426 |   }
427 | 
428 |   function decode(s) {
429 |     return config.raw ? s : decodeURIComponent(s);
430 |   }
431 | 
432 |   function stringifyCookieValue(value) {
433 |     return encode(config.json ? JSON.stringify(value) : String(value));
434 |   }
435 | 
436 |   function parseCookieValue(s) {
437 |     if (s.indexOf('"') === 0) {
438 |       // This is a quoted cookie as according to RFC2068, unescape...
439 |       s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
440 |     }
441 | 
442 |     try {
443 |       // Replace server-side written pluses with spaces.
444 |       // If we can't decode the cookie, ignore it, it's unusable.
445 |       // If we can't parse the cookie, ignore it, it's unusable.
446 |       s = decodeURIComponent(s.replace(pluses, ' '));
447 |       return config.json ? JSON.parse(s) : s;
448 |     } catch(e) {}
449 |   }
450 | 
451 |   function read(s, converter) {
452 |     var value = config.raw ? s : parseCookieValue(s);
453 |     return $.isFunction(converter) ? converter(value) : value;
454 |   }
455 | 
456 |   var config = $.cookie = function (key, value, options) {
457 | 
458 |     // Write
459 | 
460 |     if (value !== undefined && !$.isFunction(value)) {
461 |       options = $.extend({}, config.defaults, options);
462 | 
463 |       if (typeof options.expires === 'number') {
464 |         var days = options.expires, t = options.expires = new Date();
465 |         t.setTime(+t + days * 864e+5);
466 |       }
467 | 
468 |       return (document.cookie = [
469 |         encode(key), '=', stringifyCookieValue(value),
470 |         options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
471 |         options.path    ? '; path=' + options.path : '',
472 |         options.domain  ? '; domain=' + options.domain : '',
473 |         options.secure  ? '; secure' : ''
474 |       ].join(''));
475 |     }
476 | 
477 |     // Read
478 | 
479 |     var result = key ? undefined : {};
480 | 
481 |     // To prevent the for loop in the first place assign an empty array
482 |     // in case there are no cookies at all. Also prevents odd result when
483 |     // calling $.cookie().
484 |     var cookies = document.cookie ? document.cookie.split('; ') : [];
485 | 
486 |     for (var i = 0, l = cookies.length; i < l; i++) {
487 |       var parts = cookies[i].split('=');
488 |       var name = decode(parts.shift());
489 |       var cookie = parts.join('=');
490 | 
491 |       if (key && key === name) {
492 |         // If second argument (value) is a function it's a converter...
493 |         result = read(cookie, value);
494 |         break;
495 |       }
496 | 
497 |       // Prevent storing a cookie that we couldn't decode.
498 |       if (!key && (cookie = read(cookie)) !== undefined) {
499 |         result[name] = cookie;
500 |       }
501 |     }
502 | 
503 |     return result;
504 |   };
505 | 
506 |   config.defaults = {};
507 | 
508 |   $.removeCookie = function (key, options) {
509 |     if ($.cookie(key) === undefined) {
510 |       return false;
511 |     }
512 | 
513 |     // Must not alter options, thus extending a fresh object...
514 |     $.cookie(key, '', $.extend({}, options, { expires: -1 }));
515 |     return !$.cookie(key);
516 |   };
517 | 
518 | }));
519 | 
520 | //下载链接
521 | var href = 'https://www.hxsapp.com/download';
522 | //hxsDownload('.d_foot a');
523 | //好享瘦down链接
524 | function hxsDownload(obj,shareImg,objpadding){
525 |     var ua = window.navigator.userAgent;
526 |     var IsAndroid = new RegExp('Android').test(ua);
527 |     var isAndroidQQ = new RegExp('Mobile MQQBrowser').test(ua);
528 |     var MicroMessenger = new RegExp('MicroMessenger').test(ua);
529 | 
530 |     var isIos = new RegExp('iPhone').test(ua);
531 |     var isIpad = new RegExp('iPad').test(ua);
532 |     var isIosQQ = new RegExp(' QQ/').test(ua);
533 |     if(isIos || isIpad){
534 |         $(obj).attr('href','https://at.umeng.com/5viObq');
535 |     }else if(IsAndroid){
536 |         $(obj).attr('href','https://at.umeng.com/aCKnSD');
537 |     }
538 | 
539 |     if((IsAndroid && isAndroidQQ && !MicroMessenger) || (isIos && isIosQQ) || (isIpad && isIosQQ)){
540 |         $(obj).attr('href','https://www.hxsapp.com/download');
541 |     }
542 | 
543 |     if($(shareImg).length >= 1){
544 |       $.getJSON(_HOST + '/base/common/getAdListByType' + CallBack, {keywords: 'down_load_btn_ad'}, function(data){
545 |         var data = data.data[0];
546 | 
547 |         if(!data.image){
548 |           $(shareImg).hide();
549 |           return false;
550 |         }
551 |         $(shareImg).css({
552 |           width:parseInt(data.width)/2,
553 |           height:parseInt(data.height)/2,
554 |           background: 'url(' + data.image + ') left top no-repeat',
555 |           'background-size': '100%',
556 |           top: -parseInt(data.height)/2
557 |         });
558 | 
559 |         $(shareImg).click(function(){
560 |           window.location.href = data.link;
561 |         });
562 |         $(objpadding).css('padding-bottom',59 + parseInt(data.height)/2);
563 |       })
564 |     }
565 | }
566 | 
567 | //二次分享
568 | function wxSecShare(tit,describe,href,img){
569 |     $('body').append('<script src="../common/jweixin-1.0.0.js"></script>');
570 |     $('body').append('<script src="../common/qqShare.js"></script>');
571 | 
572 |     // QQ二次分享
573 |     setShareInfo({
574 |        title: tit,
575 |        summary: describe,
576 |        pic: img,
577 |        url: href
578 |     });
579 | 
580 |     // 微信二次分享
581 |     $.getJSON(_HOST+'/base/common/getWxShareJsApiSignature?callback=?', {share_url: window.location.href} ,function(data){
582 |       //console.log(data);
583 |       wx.config({
584 |           debug: false,
585 |           appId: data.data.appId,
586 |           timestamp: data.data.timestamp, // 必填，生成签名的时间戳
587 |           nonceStr: data.data.noncestr, // 必填，生成签名的随机串
588 |           signature: data.data.signature,// 必填，签名，见附录1
589 |           jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo','onMenuShareQZone']
590 |       });
591 |       wx.ready(function(){
592 |           wx.onMenuShareTimeline({ //微信分享到朋友圈
593 |               title: tit,
594 |               link: href,
595 |               imgUrl: img,
596 |               success: function () {
597 |               },
598 |               cancel: function () {
599 |               }
600 |           });
601 | 
602 |           wx.onMenuShareAppMessage({ //微信分享给朋友
603 |               title: tit,
604 |               desc: describe,
605 |               link: href,
606 |               imgUrl: img,
607 |               type: '', // 分享类型,music、video或link，不填默认为link
608 |               dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
609 |               success: function () {
610 |               },
611 |               cancel: function () {
612 |               }
613 |           });
614 | 
615 |           wx.onMenuShareQQ({//分享到qq
616 |               title: tit,
617 |               desc: describe,
618 |               link: href,
619 |               imgUrl: img,
620 |               success: function () {
621 |               },
622 |               cancel: function () {
623 |               }
624 |           });
625 | 
626 |           wx.onMenuShareWeibo({//分享到qq微博
627 |               title: tit,
628 |               desc: describe,
629 |               link: href,
630 |               imgUrl: img,
631 |               success: function () {
632 |               },
633 |               cancel: function () {
634 |               }
635 |           });
636 | 
637 |           wx.onMenuShareQZone({ //分享到qq空间
638 |               title: tit,
639 |               desc: describe,
640 |               link: href,
641 |               imgUrl: img,
642 |               success: function () {
643 |               },
644 |               cancel: function () {
645 |               }
646 |           });
647 |       });
648 |     })
649 | }
650 | 
651 | //埋点统计
652 | //ua参数获取
653 | function getUaparen(key){
654 |     var p = window.navigator.userAgent;
655 |     var v = '';
656 |     p = p.split('&');
657 |     p.map(function(item){
658 |         var temp = item.split('-');
659 |         if( temp[0] == key ){
660 |             if (temp.length > 2) {
661 |                 for (var i in temp) {
662 |                     if (i > 0) {
663 |                         if (i > 1) {
664 |                             v += ('-' + temp[i]);
665 |                         }else{
666 |                             v += temp[i];
667 |                         }
668 |                     }
669 |                 }
670 |             }else{
671 |                 v = temp[1];
672 |             }
673 |         }
674 |     });
675 |     return v;
676 | }
677 | 
678 | var newMobileSystem = getUaparen('mobile_system');
679 | var newBrand = getUaparen('brand');
680 | var newModel = getUaparen('model');
681 | var newSystemResolution = getUaparen('system_resolution');
682 | var newChannelNumber = getUaparen('channel_number');
683 | var newVersionNumber = getUaparen('version_number');
684 | 
685 | var newNetworkEnvironment = getUaparen('network_environment');
686 | var newLongitude = getUaparen('longitude');
687 | var newLatitude = getUaparen('latitude');
688 | 
689 | var newRegisterId = getUaparen('register_id');
690 | var newConversationId = getUaparen('conversation_id');
691 | var newUserId = getUaparen('user_id');
692 | 
693 | var activityId = $_GET('id');
694 | function buriedPoint(behavior, clickResults){
695 |     var webtype='';
696 |     moreMyUserAgent(function(Version){
697 |         var MicroMessenger2 = new RegExp('MicroMessenger').test(UserAgent);
698 |         var type = MicroMessenger2? '微信': '其他';
699 |         if(Version){
700 |             webtype='APP内已设置类型';
701 |         }else{
702 |             webtype=type;
703 |         }
704 |     });
705 |     var json = {
706 |         'one_web': '/',
707 |         'two_web': '/',
708 |         'three_web': '/',
709 |         'columned': '/',
710 |         'behavior': behavior,
711 |         'click_results':clickResults,
712 |         'access_occurred_type':'H5活动页面',
713 |         'access_occurred_type_id': activityId,
714 |         'statistical_type': '页面型',
715 |         'previous_web_type': webtype,
716 |         'mobile_system': newMobileSystem,
717 |         'brand': newBrand,
718 |         'model': newModel,
719 |         'system_resolution': newSystemResolution,
720 |         'channel_number': newChannelNumber,
721 |         'version_number': newVersionNumber,
722 |         'network_environment': newNetworkEnvironment,
723 |         'longitude': newLongitude,
724 |         'latitude': newLatitude,
725 |         'register_id': newRegisterId,
726 |         'conversation_id':newConversationId,
727 |         'user_id': newUserId
728 |     }
729 |     $.getJSON('https://mars.hxsapp.com/h5' + CallBack, json, function(data){});
730 | }


--------------------------------------------------------------------------------
/js/commonJs.js:
--------------------------------------------------------------------------------
  1 | ;
  2 | //判断访问终端
  3 | var browser = {
  4 | 	versions: function() {
  5 | 		var u = navigator.userAgent,
  6 | 			app = navigator.appVersion;
  7 | 		return {
  8 | 			trident: u.indexOf('Trident') > -1, //IE内核
  9 | 			presto: u.indexOf('Presto') > -1, //opera内核
 10 | 			webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
 11 | 			gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
 12 | 			mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
 13 | 			ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
 14 | 			android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
 15 | 			iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
 16 | 			iPad: u.indexOf('iPad') > -1, //是否iPad
 17 | 			webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
 18 | 			weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
 19 | 			qq: u.match(/\sQQ/i) == " qq" //是否QQ
 20 | 		};
 21 | 	}(),
 22 | 	language: (navigator.browserLanguage || navigator.language).toLowerCase()
 23 | }
 24 | 
 25 | function backToTop() {
 26 | 	$(window).scroll(function() {
 27 | 		if($(this).scrollTop() > 1000) {
 28 | 			$('.backtop').fadeIn(200);
 29 | 		} else {
 30 | 			$('.backtop').fadeOut(200);
 31 | 		}
 32 | 	});
 33 | 	var backShow = true;
 34 | 	if(backShow){
 35 | 
 36 | 	}
 37 | 	$('.backtop').click(function() {
 38 | 		$('body,html').animate({
 39 | 			scrollTop: 0
 40 | 		}, 1000);
 41 | 	})
 42 | }
 43 | 
 44 | //随机出现微信号码和二维码
 45 | function randomNum(picId) {
 46 | 	arrNum = ['111', '222', '333', '444', '555'];
 47 | 	var numIndex = Math.floor((Math.random() * arrNum.length));
 48 | 	var appendNum = arrNum[numIndex];
 49 | 
 50 | 	picId.attr('src', 'images/qr/' + appendNum + '.jpg');
 51 | }
 52 | 
 53 | function rnd(n, m) {
 54 | 	return parseInt(Math.random() * (m - n) + n);
 55 | }
 56 | 
 57 | //加url参数
 58 | function addURL() {
 59 | 	var url = location.href; //获取url
 60 | 	var timstamp = (new Date).valueOf(); //版本号
 61 | 	if(url.indexOf("?") <= 0) {
 62 | 		url = url + "?ts=" + timstamp;
 63 | 		location.href = url;
 64 | 	}
 65 | }
 66 | 
 67 | //单次运行
 68 | function once(fn, context) {
 69 | 	var result;
 70 | 	return function() {
 71 | 		if(fn) {
 72 | 			result = fn.apply(context || this, arguments);
 73 | 			fn = null;
 74 | 		}
 75 | 		return result;
 76 | 	};
 77 | }
 78 | 
 79 | //font-size
 80 | !function() {
 81 | 	function e() {
 82 | 		var e = document.documentElement.clientWidth,
 83 | 			t = document.querySelector("html"),
 84 | 			f = e / 20;
 85 | 		window.fontSize = f;
 86 | 		t.style.fontSize = f + "px"
 87 | 	}
 88 | 	e(), window.addEventListener("resize", e);
 89 | }();
 90 | 
 91 | //引入插件
 92 | function links(url) {
 93 | 	var linkjs = document.createElement("script");
 94 | 	linkjs.type = "text/javascript";
 95 | 	linkjs.src = 'js/' + url;
 96 | 	document.body.appendChild(linkjs);
 97 | }
 98 | 
 99 | //toast
100 | var toast_once = true;
101 | function toast(msg){
102 | 	if(toast_once){
103 | 		$("body").append(
104 | 			'<div id="toast_box" style="z-index: 999;background: #fff;position: fixed;width: 100%;height: 100%;display: none;left:0;top:0;opacity: 0.8;text-align:center">'
105 | 			+ '<p style="background-color: #333;width: 50%;padding: .6rem;color: #fff;border-radius: 1em;margin: 12rem auto auto auto;font-size:.75rem" id="toast_msg">'
106 | 			+ '</p>'
107 | 			+ '</div>'
108 | 		);
109 | 		toast_once = false;
110 | 	}
111 | 	$('#toast_box').fadeIn(500);
112 |     setTimeout(function() {
113 |         $('#toast_box').fadeOut(500);
114 |     }, 1000);
115 | 	$('#toast_msg').text(msg);
116 | }
117 | 
118 | //toast2
119 | var toast_once = true;
120 | function toast2(msg){
121 | 	if(toast_once){
122 | 		$("body").append(
123 | 			'<div id="toast_box" style="z-index: 999;background: #555;position: fixed;width: 100%;height: 100%;display: none;left:0;top:0;opacity: 0.8;text-align:center">'
124 | 			+ '<p style="background-color: #000;width: 50%;padding: .6rem;color: #fff;border-radius: 1em;margin: 12rem auto auto auto;font-size:.75rem" id="toast_msg">'
125 | 			+ '</p>'
126 | 			+ '</div>'
127 | 		);
128 | 		toast_once = false;
129 | 	}
130 | 	$('#toast_box').fadeIn(500);
131 |     setTimeout(function() {
132 |         $('#toast_box').fadeOut(500);
133 |     }, 3000);
134 | 	$('#toast_msg').text(msg);
135 | }
136 | //截取字符串
137 | function subStlength(str, maxLength, targetLength){
138 |     if(str && str.length > maxLength )str = str.substring(0,targetLength) + '...';
139 |     return str;
140 | }
141 | 
142 | //性别验证
143 | function sexValid(sex){
144 | 
145 | }


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var token = { sess_token : $_GET( 'sess_token' ) } 
  3 | var weightDraw = {
  4 |     signTime : 0,//签到次数
  5 |     timer : 0,//中奖名单轮播计数器
  6 |     degValue : 0,//转盘旋转角度
  7 |     h : 0,//中奖名单轮播移动的距离
  8 |     //获取访问总数
  9 |     getVisitCount:function(){
 10 |         $.getJSON( _ACTSHOST + '/weightDraw/Stat/accessCount?callback=?', token, function( data ){
 11 |             $( '.peopleCount' ).html( data.count );
 12 |         });   
 13 |     },
 14 |     //获取签到次数
 15 |     checkSign:function(){
 16 |         var _this = this;
 17 |         $.getJSON( _ACTSHOST + '/weightDraw/Sign/conTimes?callback=?', token, function( data ){
 18 |             _this.signTime = 
 19 |                 data.code == 200 || data.code == 201 ? data.sign_times : 
 20 |                 data.sign_times > 3 ? 3 :
 21 |                 0;
 22 |             _this.signTime = 3;
 23 |             $( '.rate_line' ).attr( 'src', 'images/draw_' + _this.signTime + '.png' );  
 24 |         });    
 25 |     },
 26 |     //活动规则绑定动画
 27 |     actRule:function(){
 28 |         $( '.rule' ).on( 'click', function(){
 29 |             this.popupFun( '.rule_frame' );
 30 |         }); 
 31 |         this.bindCloseBtn();
 32 |     },
 33 |     //获取活动相关信息//跳转分享页面
 34 |     getActData:function(){
 35 |         var act_id = {
 36 |                 act_id : $_GET( 'id' ),
 37 |                 sess_token : $_GET( 'sess_token' )
 38 |             };
 39 |         $.getJSON( _ACTSHOST + '/weightDraw/Draw/actInfo?callback=?', act_id, function( data ){
 40 | 
 41 |             if( data.code != 200 || data.data.state !=1 ){
 42 |                 return;
 43 |             }
 44 | 
 45 |             //H5通知客户端显示分享按钮
 46 |             var shareLink = data.data.link+ '&weightLotteryInApp=1';
 47 |             var share_url = {share_url: window.location.href};
 48 |             var shareTitle = data.data.title;
 49 |             var shareImages = data.data.images;
 50 |             var shareDescr = data.data.descr;
 51 |             var shareType = 'act_wdraw';
 52 | 
 53 |             //根据不同app版本发送对应的客户端跳转协议
 54 |             myUserAgent(function(Version){
 55 |                 if(Version == 2.1 && Version){
 56 |                     window.location.href = 'hxsapp://visible_share_btn|'+ shareTitle + '|' +shareLink + '|' + shareImages + '|' + shareDescr + '|' + shareType;
 57 |                 }else if(Version >= 2.2 && Version <=2.6 && Version){
 58 |                     window.location.href = 'https://hxsapp_visible_share_btn#'+ shareTitle + '#' + shareLink + '#' + shareImages + '#' + shareDescr + '#' + shareType;
 59 |                 }else if(Version > 2.6 && Version){
 60 |                     window.location.href = 'https://hxsapp_visible_act_share_btn#'+ shareTitle + '#' + shareLink + '#' + shareImages + '#' + shareDescr + '#' + shareType;
 61 |                 }
 62 |             })
 63 |                      
 64 |             //qq二次分享
 65 |             $('#qqShareContent').attr('content',decodeURIComponent(shareTitle));
 66 |             $('#qqShareDes').attr('content','XXXAPP  专享福利');
 67 |             $('#qqShareImg').attr('content',shareImages); 
 68 |             $.getJSON(_HOST+'/base/common/getWxShareJsApiSignature?callback=?', share_url ,function(data){   
 69 |             wxShare(decodeURIComponent(shareTitle), decodeURIComponent(shareDescr), shareLink, shareImages, data.data.appId, data.data.timestamp, data.data.noncestr, data.data.signature);
 70 | 
 71 |             //微信二次分享
 72 |             function wxShare(tit,describe,href,img,appid,timestamp,noncestr,signature){
 73 |                     wx.config({
 74 |                         debug: false,
 75 |                         appId: appid,
 76 |                         timestamp: timestamp, // 必填，生成签名的时间戳
 77 |                         nonceStr: noncestr, // 必填，生成签名的随机串
 78 |                         signature: signature,// 必填，签名，见附录1
 79 |                         jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo','onMenuShareQZone']
 80 |                     });
 81 |                     wx.ready(function(){
 82 |                         wx.onMenuShareTimeline({ //微信分享到朋友圈
 83 |                             title: tit,
 84 |                             link: href,
 85 |                             imgUrl: img,
 86 |                             success: function () {
 87 |                             },
 88 |                             cancel: function () { 
 89 |                             }
 90 |                         });
 91 | 
 92 |                         wx.onMenuShareAppMessage({ //微信分享给朋友
 93 |                             title: tit,
 94 |                             desc: describe,
 95 |                             link: href,
 96 |                             imgUrl: img,
 97 |                             type: '', // 分享类型,music、video或link，不填默认为link
 98 |                             dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
 99 |                             success: function () {
100 |                             },
101 |                             cancel: function () { 
102 |                             }
103 |                         });
104 | 
105 |                         wx.onMenuShareQQ({//分享到qq
106 |                             title: tit,
107 |                             desc: describe,
108 |                             link: href,
109 |                             imgUrl: img,
110 |                             success: function () { 
111 |                             },
112 |                             cancel: function () {
113 |                             }
114 |                         });
115 | 
116 |                         wx.onMenuShareWeibo({//分享到qq微博
117 |                             title: tit,
118 |                             desc: describe,
119 |                             link: href,
120 |                             imgUrl: img,
121 |                             success: function () { 
122 |                             },
123 |                             cancel: function () { 
124 |                             }
125 |                         });
126 | 
127 |                         wx.onMenuShareQZone({ //分享到qq空间
128 |                             title: tit,
129 |                             desc: describe,
130 |                             link: href,
131 |                             imgUrl: img,
132 |                             success: function () { 
133 |                             },
134 |                             cancel: function () { 
135 |                             }
136 |                         });
137 |                     });
138 |             }
139 |         })
140 |         });   
141 |     },
142 |     //开始抽奖按钮绑定动画
143 |     startRoll:function(){
144 |         var _this = this;
145 |         $( '#go_roll' ).on( 'click', function(){
146 |             if( $_GET( 'weightLotteryInApp' ) == 1 ){
147 |                 toast2( '快来下载XXX参加活动吧！' );
148 |                 setTimeout( function(){
149 |                     window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.kufeng.hj.enjoy';
150 |                 }, 2000 )
151 |                 return false;
152 |             }
153 |             _this.judgeState();
154 |         });
155 |     },
156 |     // //概率
157 |     // //生产环境不需要前端计算概率
158 |     prizeRand:function() {
159 |         var rand = parseInt( Math.floor( Math.random() * ( 100 - 1 ) + 1 ) );
160 |         if (rand < 10){
161 |             return 1;
162 |         }else if ( rand < 20 ){
163 |             return 2;
164 |         }else if ( rand < 30 ) {
165 |             return 4;
166 |         }else if ( rand < 40 ) {
167 |             return 5;
168 |         }else if ( rand < 50 ) {
169 |             return 6;
170 |         }else {
171 |             return 3;
172 |         }
173 |     },
174 |     //判断返回码状态
175 |     judgeState:function(){
176 |         var actId = {
177 |             act_id : $_GET( 'id' ),
178 |             sess_token : $_GET( 'sess_token' )
179 |         };
180 |         var actId = {//测试用
181 |             act_id : 62
182 |         };
183 |         var _this = this;
184 |         $.getJSON( _ACTSHOST + '/weightDraw/Draw/turn?callback=?', actId, function( data ){
185 |             // data.code= 606 ;//测试用
186 |             data.code = 200;
187 |             data.award_id = _this.prizeRand();
188 |             switch( Number( data.code ) ){
189 |                 case 401://未登录跳转登录页面
190 |                 window.location.href = 'https://hxsapp_showloginpage';
191 |                 break;          
192 |                 case 603://未中奖还剩余几次机会
193 |                 _this.canRoll( 3, data );
194 |                 break;
195 |                 case 200://已中奖
196 |                 _this.canRoll( Number( data.award_id ), data );//可以旋转
197 |                 break;
198 |                 case 605://活动已结束
199 |                 toast2( data.msg.title );
200 |                 $( '.page_1_foot' ).css( 'display', 'block' );
201 |                 break;
202 |                 case 606://谢谢参与
203 |                 _this.canRoll( 3, data );
204 |                 break;
205 |                 default://501缺乏参数,502获取数据失败，602还未达到抽奖标准，604活动还未开始，607机会已用完
206 |                 toast2( data.msg.title );
207 |             }
208 |         });  
209 |     },
210 |     //可以旋转
211 |     canRoll:function(id,data){
212 |         $( 'body' ).on(
213 |             'touchmove', prevent
214 |         );
215 |         $( '#go_roll' ).off(
216 |             'click'
217 |         );
218 |         
219 |         var _this = this;
220 |         switch( id ){
221 |             case 4:
222 |                 _this.degValue += ( 360 - _this.degValue % 360 ) + 2490;
223 |                 setTimeout( function(){
224 |                     $( '.can_frame .awardImg img' )
225 |                         .attr({ 
226 |                             src : 'images/dishini.png' 
227 |                         })
228 |                         .css({ 
229 |                             'width' : '3rem',
230 |                             'margin-left':'-1.5rem' 
231 |                         });
232 |                     $( '.can_frame p:first' ).html( data.msg.title );
233 |                     _this.popClose( '.can_frame' );
234 |                 }, 12500 );
235 |                 break;
236 |             case 3:
237 |                 _this.degValue += ( 360 - _this.degValue % 360 ) + 2430;
238 |                 if( data.code == 606 ){
239 |                     setTimeout( function(){
240 |                         _this.popClose( '.thanksP' );  
241 |                     }, 12500 );
242 |                 }else{
243 |                     setTimeout( function(){
244 |                         $( '.cannot_frame p:last span' ).html( data.draw_times + '次' );
245 |                         _this.popClose('.cannot_frame');  
246 |                     }, 12500 );
247 |                 }
248 |                 break;
249 |             case 6:
250 |                 _this.degValue += ( 360 - _this.degValue % 360 ) + 2370;
251 |                 setTimeout( function(){
252 |                     $('.can_frame p:first').html( data.msg.title );
253 |                     $('.can_frame .awardImg img')
254 |                         .attr({ 
255 |                             src : 'images/humidifier.png' 
256 |                         })
257 |                         .css({
258 |                             'width' : '3rem', 
259 |                             'margin-left' : '-1.5rem' 
260 |                         });
261 |                     _this.popClose( '.can_frame' );
262 |                 }, 12500 );
263 |                 break;
264 |             case 5:
265 |                 _this.degValue += ( 360 - _this.degValue % 360 ) + 2250;
266 |                 setTimeout( function(){
267 |                     $( '.can_frame .awardImg img' )
268 |                         .attr({ 
269 |                             'src' : 'images/comfortU.png' 
270 |                         })
271 |                         .css({ 
272 |                             'width' : '6rem', 
273 |                             'margin-left' : '-3rem' 
274 |                         });
275 |                     $( '.can_frame p:first' ).html( data.msg.title );
276 |                     _this.popClose( '.can_frame' );
277 |                 }, 12500 );
278 |                 break;
279 |             case 1:
280 |             case 2:
281 |                 $( 'body' ).off( 'touchmove', prevent );
282 |                 break;
283 |         };
284 | 
285 |         var deg = 'rotate(' + _this.degValue + 'deg' + ')';
286 |         $( '.roll_reward' ).css( 'transform', deg );
287 |         $( '.roll_ring' ).css( 'animation', 'quickroll 12s 1' );
288 |         setTimeout( function(){
289 |             $( '.roll_ring' ).css({
290 |                 'animation' : 'slowroll 30s infinite'
291 |             });
292 |         }, 12000);
293 | 
294 |     },
295 |     //弹出框公用方法
296 |     popupFun:function( sel ){
297 |         $( '.frame' ).fadeIn( 0 );
298 |         $( sel ).fadeIn( 0 );
299 |         $( sel ).css({
300 |             'animation' : 'bounceIn .8s 1 linear' 
301 |         });
302 |         $( 'body' ).on( 'touchmove', prevent );
303 |     },
304 |     //按钮关闭方法 
305 |     closeBtn:function( sel ){
306 |         $( '.frame' ).fadeOut( 200 );
307 |         $( '.child_frame' ).fadeOut( 200 );
308 |         $( 'body' ).off( 'touchmove', prevent );   
309 |     },
310 |     bindClose:function( sel ){
311 |         var _this = this;
312 |         $( sel ).on( 'click', function(){
313 |             _this.closeBtn();
314 |         });
315 |     },
316 |     bindCloseBtn:function(){
317 |         this.bindClose( '.close_btn' );
318 |         this.bindClose( '.cannot_backbtn' );
319 |     },
320 |     //复用弹出框和关闭框方法
321 |     popClose:function( sel ){
322 |         this.popupFun( sel );
323 |         this.bindCloseBtn();
324 |         this.startRoll();
325 |     },
326 |     //获取中奖名单//中奖名单轮播
327 |     winnerList:function(){
328 |         var _this = this;
329 |         $.getJSON( _ACTSHOST + '/weightDraw/Draw/winningList?callback=?', token, function( data ){
330 |             if( data.code == 201 ){ 
331 |                 $( '.reward_list' ).html( 
332 |                     '<li><p style="text-align:center;width:100%;margin-left:-.8rem">快行动起来吧，大奖等你来拿！</p></li>' 
333 |                 ) ;
334 |                return;
335 |             }
336 |             var list = data.data;
337 |             // list.length = 3;//测试用
338 |             var str = '';
339 |             function loading( list ){
340 |                 $.each( list, function( i, msg ){
341 |                     str += '<li><p>' 
342 |                         + msg.name 
343 |                         + '</p><p>' 
344 |                         + msg.draw 
345 |                         + '</p><p>' 
346 |                         + msg.award 
347 |                         + '</p></li>'
348 |                 })  
349 |             }
350 | 
351 |             if( list.length <= 5 ){
352 |                 $( '.reward_list' ).css( 'height', '' );
353 |                 loading( list )
354 |                 $( '.reward_list' ).html( str );  
355 |                 return;
356 |             }
357 | 
358 |             var listData = list.slice(0,6);
359 |             loading(listData);
360 |             $( '.reward_list' ).html(str);
361 |             _this.h = -$( '.reward_list li:first' ).outerHeight();
362 |             var hSlider = - _this.h * 5;
363 |             $( '.reward_list' ).css( 'height', hSlider + 'px' );
364 |             _this.timer = setInterval( function(){
365 |                 str = '';
366 |                 $( '.reward_list li' ).animate({
367 |                      top : _this.h + 'px' 
368 |                 }, 'slow' ); 
369 |                 list = list.concat( list.splice( 0, 1 ) );
370 |                 listData = list.slice( 0, 6 );
371 |                 loading( listData );
372 |                 setTimeout( function(){
373 |                     $( '.reward_list' ).html( str );
374 |                     $( '.reward_list li' ).animate( { top : '' }, 'fast' );  
375 |                 }, 1000)
376 |             }, 3000)
377 |         })   
378 |     }
379 | }
380 |   
381 | window.onload=function(){
382 |     if( $_GET( 'weightLotteryInApp' ) == 1){
383 |         $( '.d_foot' ).css( 'display', 'block' ); 
384 |     }
385 |     weightDraw.getActData();
386 |     weightDraw.getVisitCount();
387 |     weightDraw.checkSign(); 
388 |     weightDraw.actRule();
389 |     weightDraw.winnerList();
390 |     weightDraw.startRoll();
391 |     $( '.d_foot .colse' ).click( function(){
392 |         $( '.mather_main' ).css({
393 |             'padding-bottom' : 0
394 |         })
395 |         $( this ).parents( 'div' ).hide();
396 |     })
397 | }
398 | function prevent (e) {
399 | 　　e.preventDefault();
400 | }
401 | 


--------------------------------------------------------------------------------
/js/jweixin-1.0.0.js:
--------------------------------------------------------------------------------
1 | !function(a,b){"function"==typeof define&&(define.amd||define.cmd)?define(function(){return b(a)}):b(a,!0)}(this,function(a,b){function c(b,c,d){a.WeixinJSBridge?WeixinJSBridge.invoke(b,e(c),function(a){g(b,a,d)}):j(b,d)}function d(b,c,d){a.WeixinJSBridge?WeixinJSBridge.on(b,function(a){d&&d.trigger&&d.trigger(a),g(b,a,c)}):d?j(b,d):j(b,c)}function e(a){return a=a||{},a.appId=E.appId,a.verifyAppId=E.appId,a.verifySignType="sha1",a.verifyTimestamp=E.timestamp+"",a.verifyNonceStr=E.nonceStr,a.verifySignature=E.signature,a}function f(a){return{timeStamp:a.timestamp+"",nonceStr:a.nonceStr,"package":a.package,paySign:a.paySign,signType:a.signType||"SHA1"}}function g(a,b,c){var d,e,f;switch(delete b.err_code,delete b.err_desc,delete b.err_detail,d=b.errMsg,d||(d=b.err_msg,delete b.err_msg,d=h(a,d),b.errMsg=d),c=c||{},c._complete&&(c._complete(b),delete c._complete),d=b.errMsg||"",E.debug&&!c.isInnerInvoke&&alert(JSON.stringify(b)),e=d.indexOf(":"),f=d.substring(e+1)){case"ok":c.success&&c.success(b);break;case"cancel":c.cancel&&c.cancel(b);break;default:c.fail&&c.fail(b)}c.complete&&c.complete(b)}function h(a,b){var e,f,c=a,d=p[c];return d&&(c=d),e="ok",b&&(f=b.indexOf(":"),e=b.substring(f+1),"confirm"==e&&(e="ok"),"failed"==e&&(e="fail"),-1!=e.indexOf("failed_")&&(e=e.substring(7)),-1!=e.indexOf("fail_")&&(e=e.substring(5)),e=e.replace(/_/g," "),e=e.toLowerCase(),("access denied"==e||"no permission to execute"==e)&&(e="permission denied"),"config"==c&&"function not exist"==e&&(e="ok"),""==e&&(e="fail")),b=c+":"+e}function i(a){var b,c,d,e;if(a){for(b=0,c=a.length;c>b;++b)d=a[b],e=o[d],e&&(a[b]=e);return a}}function j(a,b){if(!(!E.debug||b&&b.isInnerInvoke)){var c=p[a];c&&(a=c),b&&b._complete&&delete b._complete,console.log('"'+a+'",',b||"")}}function k(){0!=D.preVerifyState&&(u||v||E.debug||"6.0.2">z||D.systemType<0||A||(A=!0,D.appId=E.appId,D.initTime=C.initEndTime-C.initStartTime,D.preVerifyTime=C.preVerifyEndTime-C.preVerifyStartTime,H.getNetworkType({isInnerInvoke:!0,success:function(a){var b,c;D.networkType=a.networkType,b="http://open.weixin.qq.com/sdk/report?v="+D.version+"&o="+D.preVerifyState+"&s="+D.systemType+"&c="+D.clientVersion+"&a="+D.appId+"&n="+D.networkType+"&i="+D.initTime+"&p="+D.preVerifyTime+"&u="+D.url,c=new Image,c.src=b}})))}function l(){return(new Date).getTime()}function m(b){w&&(a.WeixinJSBridge?b():q.addEventListener&&q.addEventListener("WeixinJSBridgeReady",b,!1))}function n(){H.invoke||(H.invoke=function(b,c,d){a.WeixinJSBridge&&WeixinJSBridge.invoke(b,e(c),d)},H.on=function(b,c){a.WeixinJSBridge&&WeixinJSBridge.on(b,c)})}var o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H;if(!a.jWeixin)return o={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest"},p=function(){var b,a={};for(b in o)a[o[b]]=b;return a}(),q=a.document,r=q.title,s=navigator.userAgent.toLowerCase(),t=navigator.platform.toLowerCase(),u=!(!t.match("mac")&&!t.match("win")),v=-1!=s.indexOf("wxdebugger"),w=-1!=s.indexOf("micromessenger"),x=-1!=s.indexOf("android"),y=-1!=s.indexOf("iphone")||-1!=s.indexOf("ipad"),z=function(){var a=s.match(/micromessenger\/(\d+\.\d+\.\d+)/)||s.match(/micromessenger\/(\d+\.\d+)/);return a?a[1]:""}(),A=!1,B=!1,C={initStartTime:l(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},D={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",preVerifyState:1,systemType:y?1:x?2:-1,clientVersion:z,url:encodeURIComponent(location.href)},E={},F={_completes:[]},G={state:0,data:{}},m(function(){C.initEndTime=l()}),H={config:function(a){E=a,j("config",a);var b=E.check===!1?!1:!0;m(function(){var a,d,e;if(b)c(o.config,{verifyJsApiList:i(E.jsApiList)},function(){F._complete=function(a){C.preVerifyEndTime=l(),G.state=1,G.data=a},F.success=function(){D.preVerifyState=0},F.fail=function(a){F._fail?F._fail(a):G.state=-1};var a=F._completes;return a.push(function(){k()}),F.complete=function(){for(var c=0,d=a.length;d>c;++c)a[c]();F._completes=[]},F}()),C.preVerifyStartTime=l();else{for(G.state=1,a=F._completes,d=0,e=a.length;e>d;++d)a[d]();F._completes=[]}}),E.beta&&n()},ready:function(a){0!=G.state?a():(F._completes.push(a),!w&&E.debug&&a())},error:function(a){"6.0.2">z||B||(B=!0,-1==G.state?a(G.data):F._fail=a)},checkJsApi:function(a){var b=function(a){var c,d,b=a.checkResult;for(c in b)d=p[c],d&&(b[d]=b[c],delete b[c]);return a};c("checkJsApi",{jsApiList:i(a.jsApiList)},function(){return a._complete=function(a){if(x){var c=a.checkResult;c&&(a.checkResult=JSON.parse(c))}a=b(a)},a}())},onMenuShareTimeline:function(a){d(o.onMenuShareTimeline,{complete:function(){c("shareTimeline",{title:a.title||r,desc:a.title||r,img_url:a.imgUrl||"",link:a.link||location.href,type:a.type||"link",data_url:a.dataUrl||""},a)}},a)},onMenuShareAppMessage:function(a){d(o.onMenuShareAppMessage,{complete:function(){c("sendAppMessage",{title:a.title||r,desc:a.desc||"",link:a.link||location.href,img_url:a.imgUrl||"",type:a.type||"link",data_url:a.dataUrl||""},a)}},a)},onMenuShareQQ:function(a){d(o.onMenuShareQQ,{complete:function(){c("shareQQ",{title:a.title||r,desc:a.desc||"",img_url:a.imgUrl||"",link:a.link||location.href},a)}},a)},onMenuShareWeibo:function(a){d(o.onMenuShareWeibo,{complete:function(){c("shareWeiboApp",{title:a.title||r,desc:a.desc||"",img_url:a.imgUrl||"",link:a.link||location.href},a)}},a)},onMenuShareQZone:function(a){d(o.onMenuShareQZone,{complete:function(){c("shareQZone",{title:a.title||r,desc:a.desc||"",img_url:a.imgUrl||"",link:a.link||location.href},a)}},a)},startRecord:function(a){c("startRecord",{},a)},stopRecord:function(a){c("stopRecord",{},a)},onVoiceRecordEnd:function(a){d("onVoiceRecordEnd",a)},playVoice:function(a){c("playVoice",{localId:a.localId},a)},pauseVoice:function(a){c("pauseVoice",{localId:a.localId},a)},stopVoice:function(a){c("stopVoice",{localId:a.localId},a)},onVoicePlayEnd:function(a){d("onVoicePlayEnd",a)},uploadVoice:function(a){c("uploadVoice",{localId:a.localId,isShowProgressTips:0==a.isShowProgressTips?0:1},a)},downloadVoice:function(a){c("downloadVoice",{serverId:a.serverId,isShowProgressTips:0==a.isShowProgressTips?0:1},a)},translateVoice:function(a){c("translateVoice",{localId:a.localId,isShowProgressTips:0==a.isShowProgressTips?0:1},a)},chooseImage:function(a){c("chooseImage",{scene:"1|2",count:a.count||9,sizeType:a.sizeType||["original","compressed"],sourceType:a.sourceType||["album","camera"]},function(){return a._complete=function(a){if(x){var b=a.localIds;b&&(a.localIds=JSON.parse(b))}},a}())},previewImage:function(a){c(o.previewImage,{current:a.current,urls:a.urls},a)},uploadImage:function(a){c("uploadImage",{localId:a.localId,isShowProgressTips:0==a.isShowProgressTips?0:1},a)},downloadImage:function(a){c("downloadImage",{serverId:a.serverId,isShowProgressTips:0==a.isShowProgressTips?0:1},a)},getNetworkType:function(a){var b=function(a){var c,d,e,b=a.errMsg;if(a.errMsg="getNetworkType:ok",c=a.subtype,delete a.subtype,c)a.networkType=c;else switch(d=b.indexOf(":"),e=b.substring(d+1)){case"wifi":case"edge":case"wwan":a.networkType=e;break;default:a.errMsg="getNetworkType:fail"}return a};c("getNetworkType",{},function(){return a._complete=function(a){a=b(a)},a}())},openLocation:function(a){c("openLocation",{latitude:a.latitude,longitude:a.longitude,name:a.name||"",address:a.address||"",scale:a.scale||28,infoUrl:a.infoUrl||""},a)},getLocation:function(a){a=a||{},c(o.getLocation,{type:a.type||"wgs84"},function(){return a._complete=function(a){delete a.type},a}())},hideOptionMenu:function(a){c("hideOptionMenu",{},a)},showOptionMenu:function(a){c("showOptionMenu",{},a)},closeWindow:function(a){a=a||{},c("closeWindow",{},a)},hideMenuItems:function(a){c("hideMenuItems",{menuList:a.menuList},a)},showMenuItems:function(a){c("showMenuItems",{menuList:a.menuList},a)},hideAllNonBaseMenuItem:function(a){c("hideAllNonBaseMenuItem",{},a)},showAllNonBaseMenuItem:function(a){c("showAllNonBaseMenuItem",{},a)},scanQRCode:function(a){a=a||{},c("scanQRCode",{needResult:a.needResult||0,scanType:a.scanType||["qrCode","barCode"]},function(){return a._complete=function(a){var b,c;y&&(b=a.resultStr,b&&(c=JSON.parse(b),a.resultStr=c&&c.scan_code&&c.scan_code.scan_result))},a}())},openProductSpecificView:function(a){c(o.openProductSpecificView,{pid:a.productId,view_type:a.viewType||0,ext_info:a.extInfo},a)},addCard:function(a){var e,f,g,h,b=a.cardList,d=[];for(e=0,f=b.length;f>e;++e)g=b[e],h={card_id:g.cardId,card_ext:g.cardExt},d.push(h);c(o.addCard,{card_list:d},function(){return a._complete=function(a){var c,d,e,b=a.card_list;if(b){for(b=JSON.parse(b),c=0,d=b.length;d>c;++c)e=b[c],e.cardId=e.card_id,e.cardExt=e.card_ext,e.isSuccess=e.is_succ?!0:!1,delete e.card_id,delete e.card_ext,delete e.is_succ;a.cardList=b,delete a.card_list}},a}())},chooseCard:function(a){c("chooseCard",{app_id:E.appId,location_id:a.shopId||"",sign_type:a.signType||"SHA1",card_id:a.cardId||"",card_type:a.cardType||"",card_sign:a.cardSign,time_stamp:a.timestamp+"",nonce_str:a.nonceStr},function(){return a._complete=function(a){a.cardList=a.choose_card_info,delete a.choose_card_info},a}())},openCard:function(a){var e,f,g,h,b=a.cardList,d=[];for(e=0,f=b.length;f>e;++e)g=b[e],h={card_id:g.cardId,code:g.code},d.push(h);c(o.openCard,{card_list:d},a)},chooseWXPay:function(a){c(o.chooseWXPay,f(a),a)}},b&&(a.wx=a.jWeixin=H),H});


--------------------------------------------------------------------------------
/js/qqShare.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |   var wxapi = "//res.wx.qq.com/open/js/jweixin-1.0.0.js", qqapi = "//open.mobile.qq.com/sdk/qqapi.js?_bid=152", qzapi = "//qzonestyle.gtimg.cn/qzone/phone/m/v4/widget/mobile/jsbridge.js?_bid=339";
  3 |   var require;
  4 |   function _require(url, onload) {
  5 |     var doc = document;
  6 |     var head = doc.head || (doc.getElementsByTagName("head")[0] || doc.documentElement);
  7 |     var node = doc.createElement("script");
  8 |     node.onload = onload;
  9 |     node.onerror = function() {
 10 |     };
 11 |     node.async = true;
 12 |     node.src = url[0];
 13 |     head.appendChild(node);
 14 |   }
 15 |   function _initWX(data) {
 16 |     if (!data.WXconfig) {
 17 |       return;
 18 |     }
 19 |     require([wxapi], function(wx) {
 20 |       if (!wx.config) {
 21 |         wx = window.wx;
 22 |       }
 23 |       var conf = data.WXconfig;
 24 |       wx.config({debug:false, appId:conf.appId, timestamp:conf.timestamp, nonceStr:conf.nonceStr, signature:conf.signature, jsApiList:["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"]});
 25 |       wx.error(function(res) {
 26 |       });
 27 |       wx.ready(function() {
 28 |         var config = {title:data.title, desc:data.summary, link:data.url, imgUrl:data.pic, type:"", dataUrl:"", success:function() {
 29 |           data.callback && data.callback();
 30 |         }, cancel:function() {
 31 |         }};
 32 |         wx.onMenuShareAppMessage(config);
 33 |         wx.onMenuShareQQ(config);
 34 |         wx.onMenuShareQZone(config);
 35 |         if (conf.swapTitleInWX) {
 36 |           wx.onMenuShareTimeline({title:data.summary, desc:data.title, link:data.url, imgUrl:data.pic, type:"", dataUrl:"", success:function() {
 37 |             data.callback && data.callback();
 38 |           }, cancel:function() {
 39 |           }});
 40 |         } else {
 41 |           wx.onMenuShareTimeline(config);
 42 |         }
 43 |       });
 44 |     });
 45 |   }
 46 |   function _initQQ(data) {
 47 |     var info = {title:data.title, desc:data.summary, share_url:data.url, image_url:data.pic};
 48 |     function doQQShare() {
 49 |       try {
 50 |         if (data.callback) {
 51 |           window.mqq.ui.setOnShareHandler(function(type) {
 52 |             if (type == 3 && (data.swapTitle || data.WXconfig && data.WXconfig.swapTitleInWX)) {
 53 |               info.title = data.summary;
 54 |             } else {
 55 |               info.title = data.title;
 56 |             }
 57 |             info.share_type = type;
 58 |             info.back = true;
 59 |             window.mqq.ui.shareMessage(info, function(result) {
 60 |               if (result.retCode === 0) {
 61 |                 data.callback && data.callback.call(this, result);
 62 |               }
 63 |             });
 64 |           });
 65 |         } else {
 66 |           window.mqq.data.setShareInfo(info);
 67 |         }
 68 |       } catch (e) {
 69 |       }
 70 |     }
 71 |     if (window.mqq) {
 72 |       doQQShare();
 73 |     } else {
 74 |       require([qqapi], function() {
 75 |         doQQShare();
 76 |       });
 77 |     }
 78 |   }
 79 |   function _initQZ(data) {
 80 |     function doQZShare() {
 81 |       if (QZAppExternal && QZAppExternal.setShare) {
 82 |         var imageArr = [], titleArr = [], summaryArr = [], shareURLArr = [];
 83 |         for (var i = 0;i < 5;i++) {
 84 |           imageArr.push(data.pic);
 85 |           shareURLArr.push(data.url);
 86 |           if (i === 4 && (data.swapTitle || data.WXconfig && data.WXconfig.swapTitleInWX)) {
 87 |             titleArr.push(data.summary);
 88 |             summaryArr.push(data.title);
 89 |           } else {
 90 |             titleArr.push(data.title);
 91 |             summaryArr.push(data.summary);
 92 |           }
 93 |         }
 94 |         QZAppExternal.setShare(function(data) {
 95 |         }, {"type":"share", "image":imageArr, "title":titleArr, "summary":summaryArr, "shareURL":shareURLArr});
 96 |       }
 97 |     }
 98 |     if (window.QZAppExternal) {
 99 |       doQZShare();
100 |     } else {
101 |       require([qzapi], function() {
102 |         doQZShare();
103 |       });
104 |     }
105 |   }
106 |   function init(opts) {
107 |     var ua = navigator.userAgent;
108 |     var isWX = ua.match(/MicroMessenger\/([\d\.]+)/), isQQ = ua.match(/QQ\/([\d\.]+)/), isQZ = ua.indexOf("Qzone/") !== -1;
109 |     isWX && _initWX(opts);
110 |     isQQ && _initQQ(opts);
111 |     isQZ && _initQZ(opts);
112 |   }
113 |   if (typeof define === "function" && (define.cmd || define.amd)) {
114 |     if (define.cmd) {
115 |       require = seajs.use;
116 |     } else {
117 |       if (define.amd) {
118 |         require = window.require;
119 |       }
120 |     }
121 |     define(function() {
122 |       return init;
123 |     });
124 |   } else {
125 |     require = _require;
126 |     window.setShareInfo = init;
127 |   }
128 | })();
129 | 
130 | 


--------------------------------------------------------------------------------
/rule.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" style="height: auto; overflow: auto; min-height:100%;">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1, maximum-scale=1, user-scalable=no">
 7 |     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 8 |     <meta name="apple-mobile-web-app-title" content=""/>
 9 |     <meta name="apple-touch-fullscreen" content="YES" />
10 |     <meta name="apple-mobile-web-app-capable" content="yes" />
11 |     <meta name="format-detection" content="telephone=no" />
12 |     <meta name="HandheldFriendly" content="true" />
13 |     <meta http-equiv="x-rim-auto-match" content="none" />
14 |     <meta itemprop="name" content="" id="qqShareContent">
15 |     <meta itemprop="description" content="" id="qqShareDes">
16 |     <meta itemprop="image" content="" id="qqShareImg">
17 |     <title></title>
18 |     <style>
19 |     h2{
20 |         text-align: center;
21 |     }
22 |     p{
23 |         font-size: 1rem;
24 |         padding:0 1rem;
25 |     }
26 |     </style>
27 | </head>
28 | <body>
29 | <div>
30 | <h2>活动规则</h2>
31 |     <p>1、活动时间：5月31日-6月14日，持续15天；</p>  
32 |     <p>2、坚持3天称重签到就可有3次抽奖机会哦！抽奖机会隔天无效，体脂称or手动都可以哦!</p>
33 |     <p>3、把活动分享给朋友还可额外获得1次抽奖机会；</p>
34 |     <p>4、实物奖品将通过邮寄的方式赠送，虚拟奖品（京东E卡）将通过短信方式发送卡密，用户可在京东官网兑换。</p>
35 |     <p>5、中奖奖品，工作人员在5个工作日内以电话形式与中奖者联系确认，在确认信息后3个工作日内邮寄奖品；</p>
36 | </div>
37 | 
38 | </body>
39 | </html>


--------------------------------------------------------------------------------