jq实现图片分页
代码可在gitee下载：https://gitee.com/yqt1/PicturePagination
页面代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <meta name="keywords" content="" /> 9 <title>jq分页</title> 10 <meta name="keywords" content="" /> 11 <meta name="description" content="" /> 12 <link rel="stylesheet" type="text/css" href="css/common.css"> 13 <link rel="stylesheet" type="text/css" href="./css/style.css"> 14 <link rel="stylesheet" type="text/css" href="./css/swiper.min.css"> 15 <link rel="stylesheet" type="text/css" href="./css/animate.css"> 16 </head> 17 18 <body> 19 <div class="news_content"> 20 21 <div class="news_list cleartfix"> 22 <div class="mainbox"> 23 <ul class="news_list_ul" id="newsList"> 24 <!-- 这里在下面js生成 --> 25 </ul> 26 <div class="pagebox"> 27 <!-- 这里在下面js生成 --> 28 29 <!-- <a class="btn">首页</a> 30 <a class="prev" onclick="pageClick(top)"> 上一页 </a> 31 <a class="cur">1</a> 32 <a href="#">2</a> 33 <a href="#">3</a> 34 <a href="#">4</a> 35 <a href="#">5</a> 36 <a href="#">6</a> 37 <a href="#" class="next">下一页</a> 38 <a href="#" class="btn">尾页</a> --> 39 </div> 40 41 </div> 42 43 </div> 44 45 </div> 46 </div> 47 48 <script src="js/jquery.min.js"></script> 49 <script src="js/setting.js"></script> 50 51 <script> 52 window.currentIndex = 0; //当前点击页 53 window.total = 0; //总页数 54 var urlPath = options[0].urlPath.url;//配置页读取的接口数据 setting.js中配置的接口地址 55 window.urlPath = urlPath;//全局定义路径 56 </script> 57 58 <script> 59 /*下方是默认第一次请求时获取数据并处理*/ 60 $.ajax({ 61 /*一页只展示6张图，接口一次返回的数据最多也是6张，page值会随着点击的页面改变，这里默认加载第一页，直接写死page，动态可见下方pageClick()*/ 62 /* 63 下方是调我接口数据的参数说明，你们可以自己请求自己的接口获取数据，仅供参考 64 rows 每页行数 65 page 当前页 66 sidx 排序列 67 sord 排序类型 68 records 总记录数 69 total 总页数 70 */ 71 url: urlPath + "/api/GetImgApi/imgsInfo?data={\"rows\":6,\"page\":1,\"sidx\":\"\",\"sord\":\"asc\",\"records\":0,\"total\":0,\"totals\":0}", 72 type: "get", 73 dataType: "json", 74 success: function (data) { 75 console.log(JSON.stringify(data)); 76 var s_htmlDetail = ""; 77 78 for (i = 0; i < data.data.data.length; i++) { 79 s_htmlDetail += " <li>"; 80 s_htmlDetail += " <a>"; 81 s_htmlDetail += " <div class=\"imgcon\"><img src=\"" + data.data.data[i].ImgPath + "\" alt=\"\"></div>"; 82 s_htmlDetail += " <div class=\"txtcon\">"; 83 84 s_htmlDetail += " </div>"; 85 s_htmlDetail += " </a>"; 86 s_htmlDetail += " </li>"; 87 } 88 if (data.data.data.length < 6) { 89 for (i = 1; i <= (6 - data.data.data.length); i++) { 90 s_htmlDetail += " <li style=\"visibility: hidden\">"; 91 s_htmlDetail += " <a>"; 92 s_htmlDetail += " <div class=\"imgcon\"><img src=\"\"></div>"; 93 s_htmlDetail += " <div class=\"txtcon\">"; 94 s_htmlDetail += " <h3 class=\"tit\"></h3>"; 95 s_htmlDetail += " <p class=\"time\"</p>"; 96 s_htmlDetail += " </div>"; 97 s_htmlDetail += " </a>"; 98 s_htmlDetail += " </li>"; 99 } 100 } 101 $('#newsList').append(s_htmlDetail); 102 103 //处理分页下面的行 104 var s_htmlPage = ""; 105 s_htmlPage += " <a class=\"btn\" id=\"first\" onclick=\"pageClick(1,'first')\">首页</a>"; 106 s_htmlPage += " <a class=\"prev\" id=\"prev\" onclick=\"pageClick((currentIndex-1),'prev')\"> 上一页 </a>"; 107 108 for (i = 1; i <= (data.data.pagination.total > 5 ? 5 : data.data.pagination.total); i++) { 109 if (i == 1) { 110 s_htmlPage += " <a class=\"cur\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 111 } else { 112 s_htmlPage += " <a onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 113 } 114 } 115 s_htmlPage += " <a class=\"next\" id=\"next\" onclick=\"pageClick((currentIndex+1),'next')\">下一页</a>"; 116 s_htmlPage += " <a class=\"btn\" id=\"last\" onclick=\"pageClick('" + data.data.pagination.total + "','last')\">尾页</a>"; 117 118 $('.pagebox').append(s_htmlPage); 119 window.currentIndex = 1; 120 window.total = data.data.pagination.total; 121 } 122 }); 123 </script> 124 125 126 <script> 127 /*下方是点击分页请求数据获取数据并处理*/ 128 /*pageClick点击的事件*/ 129 pageClick = function (type, id) { 130 if (type < 1) { 131 type = 1; 132 } else if (type > window.total) { 133 type = window.total; 134 } 135 136 window.currentIndex = type; 137 $.ajax({ 138 url: urlPath + "/api/GetImgApi/imgsInfo?data={\"rows\":6,\"page\":" + type + ",\"sidx\":\"\",\"sord\":\"asc\",\"records\":0,\"total\":0,\"totals\":0}", 139 type: "get", 140 dataType: "json", 141 success: function (data) { 142 //可以自行查看数据返回的格式 143 console.log(JSON.stringify(data)); 144 $('#newsList').html(""); 145 $('.pagebox').html(""); 146 //处理下面的明细新闻 147 var s_htmlDetail = ""; 148 for (i = 0; i < data.data.data.length; i++) { 149 s_htmlDetail += " <li>"; 150 s_htmlDetail += " <a>"; 151 s_htmlDetail += " <div class=\"imgcon\"><img src=\"" + data.data.data[i].ImgPath + "\" alt=\"\"></div>"; 152 s_htmlDetail += " <div class=\"txtcon\">"; 153 154 s_htmlDetail += " </div>"; 155 s_htmlDetail += " </a>"; 156 s_htmlDetail += " </li>"; 157 } 158 if (data.data.data.length < 6) { 159 for (i = 1; i <= (6 - data.data.data.length); i++) { 160 s_htmlDetail += " <li style=\"visibility: hidden\">"; 161 s_htmlDetail += " <a>"; 162 s_htmlDetail += " <div class=\"imgcon\"><img src=\"\"></div>"; 163 s_htmlDetail += " <div class=\"txtcon\">"; 164 165 s_htmlDetail += " </div>"; 166 s_htmlDetail += " </a>"; 167 s_htmlDetail += " </li>"; 168 } 169 } 170 $('#newsList').append(s_htmlDetail); 171 172 //处理分页下面的行 173 var s_htmlPage = ""; 174 175 s_htmlPage += " <a class=\"btn\" id=\"first\" onclick=\"pageClick(1,'first')\">首页</a>"; 176 s_htmlPage += " <a class=\"prev\" id=\"prev\" onclick=\"pageClick((currentIndex-1),'prev')\"> 上一页 </a>"; 177 /*这里写的比较麻烦，处理下方页码，一次最多展示5页，超出5页，重新计算排序 178 例： 179 点击第一页：1 2 3 4 5 180 点击第二页：1 2 3 4 5 181 182 点击第三页：1 2 3 4 5 183 点击第四页: 2 3 4 5 6 184 点击第五页: 3 4 5 6 7 185 点击第六页: 4 5 6 7 8 186 点击第七页: 5 6 7 8 9 187 188 无非就是考虑当前点击页码的位置，拿4举例，就是 第三位，第四位，第五位 189 */ 190 191 console.log("type=" + type); 192 var total = data.data.pagination.total; 193 /*判断页码大于等于四的，前面三位直接默认排序*/ 194 if (type >= 4) { 195 /*判断当前页码是否在中间 type + 2 <= total true的话说明在中间位置*/ 196 if (type + 2 <= total) { 197 for (i = type - 2; i <= type + 2; i++) { 198 if (type == i) { 199 s_htmlPage += " <a class=\"cur\" id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 200 } else { 201 s_htmlPage += " <a id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 202 } 203 } 204 205 } else { 206 /*当前页码在倒数第二位*/ 207 if (type + 1 <= total) { 208 for (i = type - 3; i <= type + 1; i++) { 209 if (type == i) { 210 s_htmlPage += " <a class=\"cur\" id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 211 } else { 212 s_htmlPage += " <a id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 213 } 214 } 215 } else { 216 /*当前页码在最后一位，但是要排除页码4，它减4就是0，不现实*/ 217 if (type == total && type > 4) { 218 for (i = type - 4; i <= type; i++) { 219 if (type == i) { 220 s_htmlPage += " <a class=\"cur\" id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 221 } else { 222 s_htmlPage += " <a id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 223 } 224 } 225 } else { 226 for (i = type - 3; i <= type; i++) { 227 if (type == i) { 228 s_htmlPage += " <a class=\"cur\" id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 229 } else { 230 s_htmlPage += " <a id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 231 } 232 } 233 } 234 235 } 236 } 237 238 } else { 239 for (i = 1; i <= (total > 5 ? 5 : data.data.pagination.total); i++) { 240 if (type == i) { 241 s_htmlPage += " <a class=\"cur\" id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 242 } else { 243 s_htmlPage += " <a id=\"btn" + i + "\" onclick=\"pageClick(" + i + ",'btn" + i + "')\">" + i + "</a>"; 244 } 245 } 246 } 247 248 s_htmlPage += "<a class=\"next\" id=\"next\" onclick=\"pageClick((currentIndex+1),'next')\">下一页</a>"; 249 s_htmlPage += " <a class=\"btn\" id=\"last\" onclick=\"pageClick('" + total + "','last')\">尾页</a>"; 250 $('.pagebox').append(s_htmlPage); 251 if (id == "first" || id == "last" || id == "prev" || id == "next") { 252 $('#' + id).addClass('cur'); 253 } 254 } 255 }); 256 } 257 </script> 258 </body> 259 260 </html>
css样式
1 @charset "UTF-8"; 2 3 .animated { 4 -webkit-animation-duration: 1s; 5 animation-duration: 1s; 6 -webkit-animation-fill-mode: both; 7 animation-fill-mode: both 8 } 9 10 .animated.hinge { 11 -webkit-animation-duration: 2s; 12 animation-duration: 2s 13 } 14 15 @-webkit-keyframes bounce { 16 17 0%, 18 20%, 19 50%, 20 80%, 21 100% { 22 -webkit-transform: translateY(0); 23 transform: translateY(0) 24 } 25 26 40% { 27 -webkit-transform: translateY(-30px); 28 transform: translateY(-30px) 29 } 30 31 60% { 32 -webkit-transform: translateY(-15px); 33 transform: translateY(-15px) 34 } 35 } 36 37 @keyframes bounce { 38 39 0%, 40 20%, 41 50%, 42 80%, 43 100% { 44 -webkit-transform: translateY(0); 45 -ms-transform: translateY(0); 46 transform: translateY(0) 47 } 48 49 40% { 50 -webkit-transform: translateY(-30px); 51 -ms-transform: translateY(-30px); 52 transform: translateY(-30px) 53 } 54 55 60% { 56 -webkit-transform: translateY(-15px); 57 -ms-transform: translateY(-15px); 58 transform: translateY(-15px) 59 } 60 } 61 62 .bounce { 63 -webkit-animation-name: bounce; 64 animation-name: bounce 65 } 66 67 @-webkit-keyframes flash { 68 69 0%, 70 50%, 71 100% { 72 opacity: 1 73 } 74 75 25%, 76 75% { 77 opacity: 0 78 } 79 } 80 81 @keyframes flash { 82 83 0%, 84 50%, 85 100% { 86 opacity: 1 87 } 88 89 25%, 90 75% { 91 opacity: 0 92 } 93 } 94 95 .flash { 96 -webkit-animation-name: flash; 97 animation-name: flash 98 } 99 100 @-webkit-keyframes pulse { 101 0% { 102 -webkit-transform: scale(1); 103 transform: scale(1) 104 } 105 106 50% { 107 -webkit-transform: scale(1.1); 108 transform: scale(1.1) 109 } 110 111 100% { 112 -webkit-transform: scale(1); 113 transform: scale(1) 114 } 115 } 116 117 @keyframes pulse { 118 0% { 119 -webkit-transform: scale(1); 120 -ms-transform: scale(1); 121 transform: scale(1) 122 } 123 124 50% { 125 -webkit-transform: scale(1.1); 126 -ms-transform: scale(1.1); 127 transform: scale(1.1) 128 } 129 130 100% { 131 -webkit-transform: scale(1); 132 -ms-transform: scale(1); 133 transform: scale(1) 134 } 135 } 136 137 .pulse { 138 -webkit-animation-name: pulse; 139 animation-name: pulse 140 } 141 142 @-webkit-keyframes shake { 143 144 0%, 145 100% { 146 -webkit-transform: translateX(0); 147 transform: translateX(0) 148 } 149 150 10%, 151 30%, 152 50%, 153 70%, 154 90% { 155 -webkit-transform: translateX(-10px); 156 transform: translateX(-10px) 157 } 158 159 20%, 160 40%, 161 60%, 162 80% { 163 -webkit-transform: translateX(10px); 164 transform: translateX(10px) 165 } 166 } 167 168 @keyframes shake { 169 170 0%, 171 100% { 172 -webkit-transform: translateX(0); 173 -ms-transform: translateX(0); 174 transform: translateX(0) 175 } 176 177 10%, 178 30%, 179 50%, 180 70%, 181 90% { 182 -webkit-transform: translateX(-10px); 183 -ms-transform: translateX(-10px); 184 transform: translateX(-10px) 185 } 186 187 20%, 188 40%, 189 60%, 190 80% { 191 -webkit-transform: translateX(10px); 192 -ms-transform: translateX(10px); 193 transform: translateX(10px) 194 } 195 } 196 197 .shake { 198 -webkit-animation-name: shake; 199 animation-name: shake 200 } 201 202 @-webkit-keyframes swing { 203 20% { 204 -webkit-transform: rotate(15deg); 205 transform: rotate(15deg) 206 } 207 208 40% { 209 -webkit-transform: rotate(-10deg); 210 transform: rotate(-10deg) 211 } 212 213 60% { 214 -webkit-transform: rotate(5deg); 215 transform: rotate(5deg) 216 } 217 218 80% { 219 -webkit-transform: rotate(-5deg); 220 transform: rotate(-5deg) 221 } 222 223 100% { 224 -webkit-transform: rotate(0); 225 transform: rotate(0) 226 } 227 } 228 229 @keyframes swing { 230 20% { 231 -webkit-transform: rotate(15deg); 232 -ms-transform: rotate(15deg); 233 transform: rotate(15deg) 234 } 235 236 40% { 237 -webkit-transform: rotate(-10deg); 238 -ms-transform: rotate(-10deg); 239 transform: rotate(-10deg) 240 } 241 242 60% { 243 -webkit-transform: rotate(5deg); 244 -ms-transform: rotate(5deg); 245 transform: rotate(5deg) 246 } 247 248 80% { 249 -webkit-transform: rotate(-5deg); 250 -ms-transform: rotate(-5deg); 251 transform: rotate(-5deg) 252 } 253 254 100% { 255 -webkit-transform: rotate(0); 256 -ms-transform: rotate(0); 257 transform: rotate(0) 258 } 259 } 260 261 .swing { 262 -webkit-transform-origin: top center; 263 -ms-transform-origin: top center; 264 transform-origin: top center; 265 -webkit-animation-name: swing; 266 animation-name: swing 267 } 268 269 @-webkit-keyframes tada { 270 0% { 271 -webkit-transform: scale(1); 272 transform: scale(1) 273 } 274 275 10%, 276 20% { 277 -webkit-transform: scale(.9)rotate(-3deg); 278 transform: scale(.9)rotate(-3deg) 279 } 280 281 30%, 282 50%, 283 70%, 284 90% { 285 -webkit-transform: scale(1.1)rotate(3deg); 286 transform: scale(1.1)rotate(3deg) 287 } 288 289 40%, 290 60%, 291 80% { 292 -webkit-transform: scale(1.1)rotate(-3deg); 293 transform: scale(1.1)rotate(-3deg) 294 } 295 296 100% { 297 -webkit-transform: scale(1)rotate(0); 298 transform: scale(1)rotate(0) 299 } 300 } 301 302 @keyframes tada { 303 0% { 304 -webkit-transform: scale(1); 305 -ms-transform: scale(1); 306 transform: scale(1) 307 } 308 309 10%, 310 20% { 311 -webkit-transform: scale(.9)rotate(-3deg); 312 -ms-transform: scale(.9)rotate(-3deg); 313 transform: scale(.9)rotate(-3deg) 314 } 315 316 30%, 317 50%, 318 70%, 319 90% { 320 -webkit-transform: scale(1.1)rotate(3deg); 321 -ms-transform: scale(1.1)rotate(3deg); 322 transform: scale(1.1)rotate(3deg) 323 } 324 325 40%, 326 60%, 327 80% { 328 -webkit-transform: scale(1.1)rotate(-3deg); 329 -ms-transform: scale(1.1)rotate(-3deg); 330 transform: scale(1.1)rotate(-3deg) 331 } 332 333 100% { 334 -webkit-transform: scale(1)rotate(0); 335 -ms-transform: scale(1)rotate(0); 336 transform: scale(1)rotate(0) 337 } 338 } 339 340 .tada { 341 -webkit-animation-name: tada; 342 animation-name: tada 343 } 344 345 @-webkit-keyframes wobble { 346 0% { 347 -webkit-transform: translateX(0%); 348 transform: translateX(0%) 349 } 350 351 15% { 352 -webkit-transform: translateX(-25%)rotate(-5deg); 353 transform: translateX(-25%)rotate(-5deg) 354 } 355 356 30% { 357 -webkit-transform: translateX(20%)rotate(3deg); 358 transform: translateX(20%)rotate(3deg) 359 } 360 361 45% { 362 -webkit-transform: translateX(-15%)rotate(-3deg); 363 transform: translateX(-15%)rotate(-3deg) 364 } 365 366 60% { 367 -webkit-transform: translateX(10%)rotate(2deg); 368 transform: translateX(10%)rotate(2deg) 369 } 370 371 75% { 372 -webkit-transform: translateX(-5%)rotate(-1deg); 373 transform: translateX(-5%)rotate(-1deg) 374 } 375 376 100% { 377 -webkit-transform: translateX(0%); 378 transform: translateX(0%) 379 } 380 } 381 382 @keyframes wobble { 383 0% { 384 -webkit-transform: translateX(0%); 385 -ms-transform: translateX(0%); 386 transform: translateX(0%) 387 } 388 389 15% { 390 -webkit-transform: translateX(-25%)rotate(-5deg); 391 -ms-transform: translateX(-25%)rotate(-5deg); 392 transform: translateX(-25%)rotate(-5deg) 393 } 394 395 30% { 396 -webkit-transform: translateX(20%)rotate(3deg); 397 -ms-transform: translateX(20%)rotate(3deg); 398 transform: translateX(20%)rotate(3deg) 399 } 400 401 45% { 402 -webkit-transform: translateX(-15%)rotate(-3deg); 403 -ms-transform: translateX(-15%)rotate(-3deg); 404 transform: translateX(-15%)rotate(-3deg) 405 } 406 407 60% { 408 -webkit-transform: translateX(10%)rotate(2deg); 409 -ms-transform: translateX(10%)rotate(2deg); 410 transform: translateX(10%)rotate(2deg) 411 } 412 413 75% { 414 -webkit-transform: translateX(-5%)rotate(-1deg); 415 -ms-transform: translateX(-5%)rotate(-1deg); 416 transform: translateX(-5%)rotate(-1deg) 417 } 418 419 100% { 420 -webkit-transform: translateX(0%); 421 -ms-transform: translateX(0%); 422 transform: translateX(0%) 423 } 424 } 425 426 .wobble { 427 -webkit-animation-name: wobble; 428 animation-name: wobble 429 } 430 431 @-webkit-keyframes bounceIn { 432 0% { 433 opacity: 0; 434 -webkit-transform: scale(.3); 435 transform: scale(.3) 436 } 437 438 50% { 439 opacity: 1; 440 -webkit-transform: scale(1.05); 441 transform: scale(1.05) 442 } 443 444 70% { 445 -webkit-transform: scale(.9); 446 transform: scale(.9) 447 } 448 449 100% { 450 -webkit-transform: scale(1); 451 transform: scale(1) 452 } 453 } 454 455 @keyframes bounceIn { 456 0% { 457 opacity: 0; 458 -webkit-transform: scale(.3); 459 -ms-transform: scale(.3); 460 transform: scale(.3) 461 } 462 463 50% { 464 opacity: 1; 465 -webkit-transform: scale(1.05); 466 -ms-transform: scale(1.05); 467 transform: scale(1.05) 468 } 469 470 70% { 471 -webkit-transform: scale(.9); 472 -ms-transform: scale(.9); 473 transform: scale(.9) 474 } 475 476 100% { 477 -webkit-transform: scale(1); 478 -ms-transform: scale(1); 479 transform: scale(1) 480 } 481 } 482 483 .bounceIn { 484 -webkit-animation-name: bounceIn; 485 animation-name: bounceIn 486 } 487 488 @-webkit-keyframes bounceInDown { 489 0% { 490 opacity: 0; 491 -webkit-transform: translateY(-2000px); 492 transform: translateY(-2000px) 493 } 494 495 60% { 496 opacity: 1; 497 -webkit-transform: translateY(30px); 498 transform: translateY(30px) 499 } 500 501 80% { 502 -webkit-transform: translateY(-10px); 503 transform: translateY(-10px) 504 } 505 506 100% { 507 -webkit-transform: translateY(0); 508 transform: translateY(0) 509 } 510 } 511 512 @keyframes bounceInDown { 513 0% { 514 opacity: 0; 515 -webkit-transform: translateY(-2000px); 516 -ms-transform: translateY(-2000px); 517 transform: translateY(-2000px) 518 } 519 520 60% { 521 opacity: 1; 522 -webkit-transform: translateY(30px); 523 -ms-transform: translateY(30px); 524 transform: translateY(30px) 525 } 526 527 80% { 528 -webkit-transform: translateY(-10px); 529 -ms-transform: translateY(-10px); 530 transform: translateY(-10px) 531 } 532 533 100% { 534 -webkit-transform: translateY(0); 535 -ms-transform: translateY(0); 536 transform: translateY(0) 537 } 538 } 539 540 .bounceInDown { 541 -webkit-animation-name: bounceInDown; 542 animation-name: bounceInDown 543 } 544 545 @-webkit-keyframes bounceInLeft { 546 0% { 547 opacity: 0; 548 -webkit-transform: translateX(-2000px); 549 transform: translateX(-2000px) 550 } 551 552 60% { 553 opacity: 1; 554 -webkit-transform: translateX(30px); 555 transform: translateX(30px) 556 } 557 558 80% { 559 -webkit-transform: translateX(-10px); 560 transform: translateX(-10px) 561 } 562 563 100% { 564 -webkit-transform: translateX(0); 565 transform: translateX(0) 566 } 567 } 568 569 @keyframes bounceInLeft { 570 0% { 571 opacity: 0; 572 -webkit-transform: translateX(-2000px); 573 -ms-transform: translateX(-2000px); 574 transform: translateX(-2000px) 575 } 576 577 60% { 578 opacity: 1; 579 -webkit-transform: translateX(30px); 580 -ms-transform: translateX(30px); 581 transform: translateX(30px) 582 } 583 584 80% { 585 -webkit-transform: translateX(-10px); 586 -ms-transform: translateX(-10px); 587 transform: translateX(-10px) 588 } 589 590 100% { 591 -webkit-transform: translateX(0); 592 -ms-transform: translateX(0); 593 transform: translateX(0) 594 } 595 } 596 597 .bounceInLeft { 598 -webkit-animation-name: bounceInLeft; 599 animation-name: bounceInLeft 600 } 601 602 @-webkit-keyframes bounceInRight { 603 0% { 604 opacity: 0; 605 -webkit-transform: translateX(2000px); 606 transform: translateX(2000px) 607 } 608 609 60% { 610 opacity: 1; 611 -webkit-transform: translateX(-30px); 612 transform: translateX(-30px) 613 } 614 615 80% { 616 -webkit-transform: translateX(10px); 617 transform: translateX(10px) 618 } 619 620 100% { 621 -webkit-transform: translateX(0); 622 transform: translateX(0) 623 } 624 } 625 626 @keyframes bounceInRight { 627 0% { 628 opacity: 0; 629 -webkit-transform: translateX(2000px); 630 -ms-transform: translateX(2000px); 631 transform: translateX(2000px) 632 } 633 634 60% { 635 opacity: 1; 636 -webkit-transform: translateX(-30px); 637 -ms-transform: translateX(-30px); 638 transform: translateX(-30px) 639 } 640 641 80% { 642 -webkit-transform: translateX(10px); 643 -ms-transform: translateX(10px); 644 transform: translateX(10px) 645 } 646 647 100% { 648 -webkit-transform: translateX(0); 649 -ms-transform: translateX(0); 650 transform: translateX(0) 651 } 652 } 653 654 .bounceInRight { 655 -webkit-animation-name: bounceInRight; 656 animation-name: bounceInRight 657 } 658 659 @-webkit-keyframes bounceInUp { 660 0% { 661 opacity: 0; 662 -webkit-transform: translateY(2000px); 663 transform: translateY(2000px) 664 } 665 666 60% { 667 opacity: 1; 668 -webkit-transform: translateY(-30px); 669 transform: translateY(-30px) 670 } 671 672 80% { 673 -webkit-transform: translateY(10px); 674 transform: translateY(10px) 675 } 676 677 100% { 678 -webkit-transform: translateY(0); 679 transform: translateY(0) 680 } 681 } 682 683 @keyframes bounceInUp { 684 0% { 685 opacity: 0; 686 -webkit-transform: translateY(2000px); 687 -ms-transform: translateY(2000px); 688 transform: translateY(2000px) 689 } 690 691 60% { 692 opacity: 1; 693 -webkit-transform: translateY(-30px); 694 -ms-transform: translateY(-30px); 695 transform: translateY(-30px) 696 } 697 698 80% { 699 -webkit-transform: translateY(10px); 700 -ms-transform: translateY(10px); 701 transform: translateY(10px) 702 } 703 704 100% { 705 -webkit-transform: translateY(0); 706 -ms-transform: translateY(0); 707 transform: translateY(0) 708 } 709 } 710 711 .bounceInUp { 712 -webkit-animation-name: bounceInUp; 713 animation-name: bounceInUp 714 } 715 716 @-webkit-keyframes bounceOut { 717 0% { 718 -webkit-transform: scale(1); 719 transform: scale(1) 720 } 721 722 25% { 723 -webkit-transform: scale(.95); 724 transform: scale(.95) 725 } 726 727 50% { 728 opacity: 1; 729 -webkit-transform: scale(1.1); 730 transform: scale(1.1) 731 } 732 733 100% { 734 opacity: 0; 735 -webkit-transform: scale(.3); 736 transform: scale(.3) 737 } 738 } 739 740 @keyframes bounceOut { 741 0% { 742 -webkit-transform: scale(1); 743 -ms-transform: scale(1); 744 transform: scale(1) 745 } 746 747 25% { 748 -webkit-transform: scale(.95); 749 -ms-transform: scale(.95); 750 transform: scale(.95) 751 } 752 753 50% { 754 opacity: 1; 755 -webkit-transform: scale(1.1); 756 -ms-transform: scale(1.1); 757 transform: scale(1.1) 758 } 759 760 100% { 761 opacity: 0; 762 -webkit-transform: scale(.3); 763 -ms-transform: scale(.3); 764 transform: scale(.3) 765 } 766 } 767 768 .bounceOut { 769 -webkit-animation-name: bounceOut; 770 animation-name: bounceOut 771 } 772 773 @-webkit-keyframes bounceOutDown { 774 0% { 775 -webkit-transform: translateY(0); 776 transform: translateY(0) 777 } 778 779 20% { 780 opacity: 1; 781 -webkit-transform: translateY(-20px); 782 transform: translateY(-20px) 783 } 784 785 100% { 786 opacity: 0; 787 -webkit-transform: translateY(2000px); 788 transform: translateY(2000px) 789 } 790 } 791 792 @keyframes bounceOutDown { 793 0% { 794 -webkit-transform: translateY(0); 795 -ms-transform: translateY(0); 796 transform: translateY(0) 797 } 798 799 20% { 800 opacity: 1; 801 -webkit-transform: translateY(-20px); 802 -ms-transform: translateY(-20px); 803 transform: translateY(-20px) 804 } 805 806 100% { 807 opacity: 0; 808 -webkit-transform: translateY(2000px); 809 -ms-transform: translateY(2000px); 810 transform: translateY(2000px) 811 } 812 } 813 814 .bounceOutDown { 815 -webkit-animation-name: bounceOutDown; 816 animation-name: bounceOutDown 817 } 818 819 @-webkit-keyframes bounceOutLeft { 820 0% { 821 -webkit-transform: translateX(0); 822 transform: translateX(0) 823 } 824 825 20% { 826 opacity: 1; 827 -webkit-transform: translateX(20px); 828 transform: translateX(20px) 829 } 830 831 100% { 832 opacity: 0; 833 -webkit-transform: translateX(-2000px); 834 transform: translateX(-2000px) 835 } 836 } 837 838 @keyframes bounceOutLeft { 839 0% { 840 -webkit-transform: translateX(0); 841 -ms-transform: translateX(0); 842 transform: translateX(0) 843 } 844 845 20% { 846 opacity: 1; 847 -webkit-transform: translateX(20px); 848 -ms-transform: translateX(20px); 849 transform: translateX(20px) 850 } 851 852 100% { 853 opacity: 0; 854 -webkit-transform: translateX(-2000px); 855 -ms-transform: translateX(-2000px); 856 transform: translateX(-2000px) 857 } 858 } 859 860 .bounceOutLeft { 861 -webkit-animation-name: bounceOutLeft; 862 animation-name: bounceOutLeft 863 } 864 865 @-webkit-keyframes bounceOutRight { 866 0% { 867 -webkit-transform: translateX(0); 868 transform: translateX(0) 869 } 870 871 20% { 872 opacity: 1; 873 -webkit-transform: translateX(-20px); 874 transform: translateX(-20px) 875 } 876 877 100% { 878 opacity: 0; 879 -webkit-transform: translateX(2000px); 880 transform: translateX(2000px) 881 } 882 } 883 884 @keyframes bounceOutRight { 885 0% { 886 -webkit-transform: translateX(0); 887 -ms-transform: translateX(0); 888 transform: translateX(0) 889 } 890 891 20% { 892 opacity: 1; 893 -webkit-transform: translateX(-20px); 894 -ms-transform: translateX(-20px); 895 transform: translateX(-20px) 896 } 897 898 100% { 899 opacity: 0; 900 -webkit-transform: translateX(2000px); 901 -ms-transform: translateX(2000px); 902 transform: translateX(2000px) 903 } 904 } 905 906 .bounceOutRight { 907 -webkit-animation-name: bounceOutRight; 908 animation-name: bounceOutRight 909 } 910 911 @-webkit-keyframes bounceOutUp { 912 0% { 913 -webkit-transform: translateY(0); 914 transform: translateY(0) 915 } 916 917 20% { 918 opacity: 1; 919 -webkit-transform: translateY(20px); 920 transform: translateY(20px) 921 } 922 923 100% { 924 opacity: 0; 925 -webkit-transform: translateY(-2000px); 926 transform: translateY(-2000px) 927 } 928 } 929 930 @keyframes bounceOutUp { 931 0% { 932 -webkit-transform: translateY(0); 933 -ms-transform: translateY(0); 934 transform: translateY(0) 935 } 936 937 20% { 938 opacity: 1; 939 -webkit-transform: translateY(20px); 940 -ms-transform: translateY(20px); 941 transform: translateY(20px) 942 } 943 944 100% { 945 opacity: 0; 946 -webkit-transform: translateY(-2000px); 947 -ms-transform: translateY(-2000px); 948 transform: translateY(-2000px) 949 } 950 } 951 952 .bounceOutUp { 953 -webkit-animation-name: bounceOutUp; 954 animation-name: bounceOutUp 955 } 956 957 @-webkit-keyframes fadeIn { 958 0% { 959 opacity: 0 960 } 961 962 100% { 963 opacity: 1 964 } 965 } 966 967 @keyframes fadeIn { 968 0% { 969 opacity: 0 970 } 971 972 100% { 973 opacity: 1 974 } 975 } 976 977 .fadeIn { 978 -webkit-animation-name: fadeIn; 979 animation-name: fadeIn 980 } 981 982 @-webkit-keyframes fadeInDown { 983 0% { 984 opacity: 0; 985 -webkit-transform: translateY(-20px); 986 transform: translateY(-20px) 987 } 988 989 100% { 990 opacity: 1; 991 -webkit-transform: translateY(0); 992 transform: translateY(0) 993 } 994 } 995 996 @keyframes fadeInDown { 997 0% { 998 opacity: 0; 999 -webkit-transform: translateY(-20px); 1000 -ms-transform: translateY(-20px); 1001 transform: translateY(-20px) 1002 } 1003 1004 100% { 1005 opacity: 1; 1006 -webkit-transform: translateY(0); 1007 -ms-transform: translateY(0); 1008 transform: translateY(0) 1009 } 1010 } 1011 1012 .fadeInDown { 1013 -webkit-animation-name: fadeInDown; 1014 animation-name: fadeInDown 1015 } 1016 1017 @-webkit-keyframes fadeInDownBig { 1018 0% { 1019 opacity: 0; 1020 -webkit-transform: translateY(-2000px); 1021 transform: translateY(-2000px) 1022 } 1023 1024 100% { 1025 opacity: 1; 1026 -webkit-transform: translateY(0); 1027 transform: translateY(0) 1028 } 1029 } 1030 1031 @keyframes fadeInDownBig { 1032 0% { 1033 opacity: 0; 1034 -webkit-transform: translateY(-2000px); 1035 -ms-transform: translateY(-2000px); 1036 transform: translateY(-2000px) 1037 } 1038 1039 100% { 1040 opacity: 1; 1041 -webkit-transform: translateY(0); 1042 -ms-transform: translateY(0); 1043 transform: translateY(0) 1044 } 1045 } 1046 1047 .fadeInDownBig { 1048 -webkit-animation-name: fadeInDownBig; 1049 animation-name: fadeInDownBig 1050 } 1051 1052 @-webkit-keyframes fadeInLeft { 1053 0% { 1054 opacity: 0; 1055 -webkit-transform: translateX(-20px); 1056 transform: translateX(-20px) 1057 } 1058 1059 100% { 1060 opacity: 1; 1061 -webkit-transform: translateX(0); 1062 transform: translateX(0) 1063 } 1064 } 1065 1066 @keyframes fadeInLeft { 1067 0% { 1068 opacity: 0; 1069 -webkit-transform: translateX(-20px); 1070 -ms-transform: translateX(-20px); 1071 transform: translateX(-20px) 1072 } 1073 1074 100% { 1075 opacity: 1; 1076 -webkit-transform: translateX(0); 1077 -ms-transform: translateX(0); 1078 transform: translateX(0) 1079 } 1080 } 1081 1082 .fadeInLeft { 1083 -webkit-animation-name: fadeInLeft; 1084 animation-name: fadeInLeft 1085 } 1086 1087 @-webkit-keyframes fadeInLeftBig { 1088 0% { 1089 opacity: 0; 1090 -webkit-transform: translateX(-2000px); 1091 transform: translateX(-2000px) 1092 } 1093 1094 100% { 1095 opacity: 1; 1096 -webkit-transform: translateX(0); 1097 transform: translateX(0) 1098 } 1099 } 1100 1101 @keyframes fadeInLeftBig { 1102 0% { 1103 opacity: 0; 1104 -webkit-transform: translateX(-2000px); 1105 -ms-transform: translateX(-2000px); 1106 transform: translateX(-2000px) 1107 } 1108 1109 100% { 1110 opacity: 1; 1111 -webkit-transform: translateX(0); 1112 -ms-transform: translateX(0); 1113 transform: translateX(0) 1114 } 1115 } 1116 1117 .fadeInLeftBig { 1118 -webkit-animation-name: fadeInLeftBig; 1119 animation-name: fadeInLeftBig 1120 } 1121 1122 @-webkit-keyframes fadeInRight { 1123 0% { 1124 opacity: 0; 1125 -webkit-transform: translateX(20px); 1126 transform: translateX(20px) 1127 } 1128 1129 100% { 1130 opacity: 1; 1131 -webkit-transform: translateX(0); 1132 transform: translateX(0) 1133 } 1134 } 1135 1136 @keyframes fadeInRight { 1137 0% { 1138 opacity: 0; 1139 -webkit-transform: translateX(20px); 1140 -ms-transform: translateX(20px); 1141 transform: translateX(20px) 1142 } 1143 1144 100% { 1145 opacity: 1; 1146 -webkit-transform: translateX(0); 1147 -ms-transform: translateX(0); 1148 transform: translateX(0) 1149 } 1150 } 1151 1152 .fadeInRight { 1153 -webkit-animation-name: fadeInRight; 1154 animation-name: fadeInRight 1155 } 1156 1157 @-webkit-keyframes fadeInRightBig { 1158 0% { 1159 opacity: 0; 1160 -webkit-transform: translateX(2000px); 1161 transform: translateX(2000px) 1162 } 1163 1164 100% { 1165 opacity: 1; 1166 -webkit-transform: translateX(0); 1167 transform: translateX(0) 1168 } 1169 } 1170 1171 @keyframes fadeInRightBig { 1172 0% { 1173 opacity: 0; 1174 -webkit-transform: translateX(2000px); 1175 -ms-transform: translateX(2000px); 1176 transform: translateX(2000px) 1177 } 1178 1179 100% { 1180 opacity: 1; 1181 -webkit-transform: translateX(0); 1182 -ms-transform: translateX(0); 1183 transform: translateX(0) 1184 } 1185 } 1186 1187 .fadeInRightBig { 1188 -webkit-animation-name: fadeInRightBig; 1189 animation-name: fadeInRightBig 1190 } 1191 1192 @-webkit-keyframes fadeInUp { 1193 0% { 1194 opacity: 0; 1195 -webkit-transform: translateY(20px); 1196 transform: translateY(20px) 1197 } 1198 1199 100% { 1200 opacity: 1; 1201 -webkit-transform: translateY(0); 1202 transform: translateY(0) 1203 } 1204 } 1205 1206 @keyframes fadeInUp { 1207 0% { 1208 opacity: 0; 1209 -webkit-transform: translateY(20px); 1210 -ms-transform: translateY(20px); 1211 transform: translateY(20px) 1212 } 1213 1214 100% { 1215 opacity: 1; 1216 -webkit-transform: translateY(0); 1217 -ms-transform: translateY(0); 1218 transform: translateY(0) 1219 } 1220 } 1221 1222 .fadeInUp { 1223 -webkit-animation-name: fadeInUp; 1224 animation-name: fadeInUp 1225 } 1226 1227 @-webkit-keyframes fadeInUpBig { 1228 0% { 1229 opacity: 0; 1230 -webkit-transform: translateY(2000px); 1231 transform: translateY(2000px) 1232 } 1233 1234 100% { 1235 opacity: 1; 1236 -webkit-transform: translateY(0); 1237 transform: translateY(0) 1238 } 1239 } 1240 1241 @keyframes fadeInUpBig { 1242 0% { 1243 opacity: 0; 1244 -webkit-transform: translateY(2000px); 1245 -ms-transform: translateY(2000px); 1246 transform: translateY(2000px) 1247 } 1248 1249 100% { 1250 opacity: 1; 1251 -webkit-transform: translateY(0); 1252 -ms-transform: translateY(0); 1253 transform: translateY(0) 1254 } 1255 } 1256 1257 .fadeInUpBig { 1258 -webkit-animation-name: fadeInUpBig; 1259 animation-name: fadeInUpBig 1260 } 1261 1262 @-webkit-keyframes fadeOut { 1263 0% { 1264 opacity: 1 1265 } 1266 1267 100% { 1268 opacity: 0 1269 } 1270 } 1271 1272 @keyframes fadeOut { 1273 0% { 1274 opacity: 1 1275 } 1276 1277 100% { 1278 opacity: 0 1279 } 1280 } 1281 1282 .fadeOut { 1283 -webkit-animation-name: fadeOut; 1284 animation-name: fadeOut 1285 } 1286 1287 @-webkit-keyframes fadeOutDown { 1288 0% { 1289 opacity: 1; 1290 -webkit-transform: translateY(0); 1291 transform: translateY(0) 1292 } 1293 1294 100% { 1295 opacity: 0; 1296 -webkit-transform: translateY(20px); 1297 transform: translateY(20px) 1298 } 1299 } 1300 1301 @keyframes fadeOutDown { 1302 0% { 1303 opacity: 1; 1304 -webkit-transform: translateY(0); 1305 -ms-transform: translateY(0); 1306 transform: translateY(0) 1307 } 1308 1309 100% { 1310 opacity: 0; 1311 -webkit-transform: translateY(20px); 1312 -ms-transform: translateY(20px); 1313 transform: translateY(20px) 1314 } 1315 } 1316 1317 .fadeOutDown { 1318 -webkit-animation-name: fadeOutDown; 1319 animation-name: fadeOutDown 1320 } 1321 1322 @-webkit-keyframes fadeOutDownBig { 1323 0% { 1324 opacity: 1; 1325 -webkit-transform: translateY(0); 1326 transform: translateY(0) 1327 } 1328 1329 100% { 1330 opacity: 0; 1331 -webkit-transform: translateY(2000px); 1332 transform: translateY(2000px) 1333 } 1334 } 1335 1336 @keyframes fadeOutDownBig { 1337 0% { 1338 opacity: 1; 1339 -webkit-transform: translateY(0); 1340 -ms-transform: translateY(0); 1341 transform: translateY(0) 1342 } 1343 1344 100% { 1345 opacity: 0; 1346 -webkit-transform: translateY(2000px); 1347 -ms-transform: translateY(2000px); 1348 transform: translateY(2000px) 1349 } 1350 } 1351 1352 .fadeOutDownBig { 1353 -webkit-animation-name: fadeOutDownBig; 1354 animation-name: fadeOutDownBig 1355 } 1356 1357 @-webkit-keyframes fadeOutLeft { 1358 0% { 1359 opacity: 1; 1360 -webkit-transform: translateX(0); 1361 transform: translateX(0) 1362 } 1363 1364 100% { 1365 opacity: 0; 1366 -webkit-transform: translateX(-20px); 1367 transform: translateX(-20px) 1368 } 1369 } 1370 1371 @keyframes fadeOutLeft { 1372 0% { 1373 opacity: 1; 1374 -webkit-transform: translateX(0); 1375 -ms-transform: translateX(0); 1376 transform: translateX(0) 1377 } 1378 1379 100% { 1380 opacity: 0; 1381 -webkit-transform: translateX(-20px); 1382 -ms-transform: translateX(-20px); 1383 transform: translateX(-20px) 1384 } 1385 } 1386 1387 .fadeOutLeft { 1388 -webkit-animation-name: fadeOutLeft; 1389 animation-name: fadeOutLeft 1390 } 1391 1392 @-webkit-keyframes fadeOutLeftBig { 1393 0% { 1394 opacity: 1; 1395 -webkit-transform: translateX(0); 1396 transform: translateX(0) 1397 } 1398 1399 100% { 1400 opacity: 0; 1401 -webkit-transform: translateX(-2000px); 1402 transform: translateX(-2000px) 1403 } 1404 } 1405 1406 @keyframes fadeOutLeftBig { 1407 0% { 1408 opacity: 1; 1409 -webkit-transform: translateX(0); 1410 -ms-transform: translateX(0); 1411 transform: translateX(0) 1412 } 1413 1414 100% { 1415 opacity: 0; 1416 -webkit-transform: translateX(-2000px); 1417 -ms-transform: translateX(-2000px); 1418 transform: translateX(-2000px) 1419 } 1420 } 1421 1422 .fadeOutLeftBig { 1423 -webkit-animation-name: fadeOutLeftBig; 1424 animation-name: fadeOutLeftBig 1425 } 1426 1427 @-webkit-keyframes fadeOutRight { 1428 0% { 1429 opacity: 1; 1430 -webkit-transform: translateX(0); 1431 transform: translateX(0) 1432 } 1433 1434 100% { 1435 opacity: 0; 1436 -webkit-transform: translateX(20px); 1437 transform: translateX(20px) 1438 } 1439 } 1440 1441 @keyframes fadeOutRight { 1442 0% { 1443 opacity: 1; 1444 -webkit-transform: translateX(0); 1445 -ms-transform: translateX(0); 1446 transform: translateX(0) 1447 } 1448 1449 100% { 1450 opacity: 0; 1451 -webkit-transform: translateX(20px); 1452 -ms-transform: translateX(20px); 1453 transform: translateX(20px) 1454 } 1455 } 1456 1457 .fadeOutRight { 1458 -webkit-animation-name: fadeOutRight; 1459 animation-name: fadeOutRight 1460 } 1461 1462 @-webkit-keyframes fadeOutRightBig { 1463 0% { 1464 opacity: 1; 1465 -webkit-transform: translateX(0); 1466 transform: translateX(0) 1467 } 1468 1469 100% { 1470 opacity: 0; 1471 -webkit-transform: translateX(2000px); 1472 transform: translateX(2000px) 1473 } 1474 } 1475 1476 @keyframes fadeOutRightBig { 1477 0% { 1478 opacity: 1; 1479 -webkit-transform: translateX(0); 1480 -ms-transform: translateX(0); 1481 transform: translateX(0) 1482 } 1483 1484 100% { 1485 opacity: 0; 1486 -webkit-transform: translateX(2000px); 1487 -ms-transform: translateX(2000px); 1488 transform: translateX(2000px) 1489 } 1490 } 1491 1492 .fadeOutRightBig { 1493 -webkit-animation-name: fadeOutRightBig; 1494 animation-name: fadeOutRightBig 1495 } 1496 1497 @-webkit-keyframes fadeOutUp { 1498 0% { 1499 opacity: 1; 1500 -webkit-transform: translateY(0); 1501 transform: translateY(0) 1502 } 1503 1504 100% { 1505 opacity: 0; 1506 -webkit-transform: translateY(-20px); 1507 transform: translateY(-20px) 1508 } 1509 } 1510 1511 @keyframes fadeOutUp { 1512 0% { 1513 opacity: 1; 1514 -webkit-transform: translateY(0); 1515 -ms-transform: translateY(0); 1516 transform: translateY(0) 1517 } 1518 1519 100% { 1520 opacity: 0; 1521 -webkit-transform: translateY(-20px); 1522 -ms-transform: translateY(-20px); 1523 transform: translateY(-20px) 1524 } 1525 } 1526 1527 .fadeOutUp { 1528 -webkit-animation-name: fadeOutUp; 1529 animation-name: fadeOutUp 1530 } 1531 1532 @-webkit-keyframes fadeOutUpBig { 1533 0% { 1534 opacity: 1; 1535 -webkit-transform: translateY(0); 1536 transform: translateY(0) 1537 } 1538 1539 100% { 1540 opacity: 0; 1541 -webkit-transform: translateY(-2000px); 1542 transform: translateY(-2000px) 1543 } 1544 } 1545 1546 @keyframes fadeOutUpBig { 1547 0% { 1548 opacity: 1; 1549 -webkit-transform: translateY(0); 1550 -ms-transform: translateY(0); 1551 transform: translateY(0) 1552 } 1553 1554 100% { 1555 opacity: 0; 1556 -webkit-transform: translateY(-2000px); 1557 -ms-transform: translateY(-2000px); 1558 transform: translateY(-2000px) 1559 } 1560 } 1561 1562 .fadeOutUpBig { 1563 -webkit-animation-name: fadeOutUpBig; 1564 animation-name: fadeOutUpBig 1565 } 1566 1567 @-webkit-keyframes flip { 1568 0% { 1569 -webkit-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); 1570 transform: perspective(400px)translateZ(0)rotateY(0)scale(1) 1571 } 1572 1573 0%, 1574 40% { 1575 -webkit-animation-timing-function: ease-out; 1576 animation-timing-function: ease-out 1577 } 1578 1579 40% { 1580 -webkit-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); 1581 transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1) 1582 } 1583 1584 50% { 1585 -webkit-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); 1586 transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); 1587 -webkit-animation-timing-function: ease-in; 1588 animation-timing-function: ease-in 1589 } 1590 1591 80% { 1592 -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); 1593 transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95) 1594 } 1595 1596 80%, 1597 100% { 1598 -webkit-animation-timing-function: ease-in; 1599 animation-timing-function: ease-in 1600 } 1601 1602 100% { 1603 -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); 1604 transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1) 1605 } 1606 } 1607 1608 @keyframes flip { 1609 0% { 1610 -webkit-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); 1611 -ms-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); 1612 transform: perspective(400px)translateZ(0)rotateY(0)scale(1) 1613 } 1614 1615 0%, 1616 40% { 1617 -webkit-animation-timing-function: ease-out; 1618 animation-timing-function: ease-out 1619 } 1620 1621 40% { 1622 -webkit-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); 1623 -ms-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); 1624 transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1) 1625 } 1626 1627 50% { 1628 -webkit-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); 1629 -ms-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); 1630 transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); 1631 -webkit-animation-timing-function: ease-in; 1632 animation-timing-function: ease-in 1633 } 1634 1635 80% { 1636 -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); 1637 -ms-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); 1638 transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95) 1639 } 1640 1641 80%, 1642 100% { 1643 -webkit-animation-timing-function: ease-in; 1644 animation-timing-function: ease-in 1645 } 1646 1647 100% { 1648 -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); 1649 -ms-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); 1650 transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1) 1651 } 1652 } 1653 1654 .animated.flip { 1655 -webkit-backface-visibility: visible; 1656 -ms-backface-visibility: visible; 1657 backface-visibility: visible; 1658 -webkit-animation-name: flip; 1659 animation-name: flip 1660 } 1661 1662 @-webkit-keyframes flipInX { 1663 0% { 1664 -webkit-transform: perspective(400px)rotateX(90deg); 1665 transform: perspective(400px)rotateX(90deg); 1666 opacity: 0 1667 } 1668 1669 40% { 1670 -webkit-transform: perspective(400px)rotateX(-10deg); 1671 transform: perspective(400px)rotateX(-10deg) 1672 } 1673 1674 70% { 1675 -webkit-transform: perspective(400px)rotateX(10deg); 1676 transform: perspective(400px)rotateX(10deg) 1677 } 1678 1679 100% { 1680 -webkit-transform: perspective(400px)rotateX(0); 1681 transform: perspective(400px)rotateX(0); 1682 opacity: 1 1683 } 1684 } 1685 1686 @keyframes flipInX { 1687 0% { 1688 -webkit-transform: perspective(400px)rotateX(90deg); 1689 -ms-transform: perspective(400px)rotateX(90deg); 1690 transform: perspective(400px)rotateX(90deg); 1691 opacity: 0 1692 } 1693 1694 40% { 1695 -webkit-transform: perspective(400px)rotateX(-10deg); 1696 -ms-transform: perspective(400px)rotateX(-10deg); 1697 transform: perspective(400px)rotateX(-10deg) 1698 } 1699 1700 70% { 1701 -webkit-transform: perspective(400px)rotateX(10deg); 1702 -ms-transform: perspective(400px)rotateX(10deg); 1703 transform: perspective(400px)rotateX(10deg) 1704 } 1705 1706 100% { 1707 -webkit-transform: perspective(400px)rotateX(0); 1708 -ms-transform: perspective(400px)rotateX(0); 1709 transform: perspective(400px)rotateX(0); 1710 opacity: 1 1711 } 1712 } 1713 1714 .flipInX { 1715 -webkit-backface-visibility: visible !important; 1716 -ms-backface-visibility: visible !important; 1717 backface-visibility: visible !important; 1718 -webkit-animation-name: flipInX; 1719 animation-name: flipInX 1720 } 1721 1722 @-webkit-keyframes flipInY { 1723 0% { 1724 -webkit-transform: perspective(400px)rotateY(90deg); 1725 transform: perspective(400px)rotateY(90deg); 1726 opacity: 0 1727 } 1728 1729 40% { 1730 -webkit-transform: perspective(400px)rotateY(-10deg); 1731 transform: perspective(400px)rotateY(-10deg) 1732 } 1733 1734 70% { 1735 -webkit-transform: perspective(400px)rotateY(10deg); 1736 transform: perspective(400px)rotateY(10deg) 1737 } 1738 1739 100% { 1740 -webkit-transform: perspective(400px)rotateY(0); 1741 transform: perspective(400px)rotateY(0); 1742 opacity: 1 1743 } 1744 } 1745 1746 @keyframes flipInY { 1747 0% { 1748 -webkit-transform: perspective(400px)rotateY(90deg); 1749 -ms-transform: perspective(400px)rotateY(90deg); 1750 transform: perspective(400px)rotateY(90deg); 1751 opacity: 0 1752 } 1753 1754 40% { 1755 -webkit-transform: perspective(400px)rotateY(-10deg); 1756 -ms-transform: perspective(400px)rotateY(-10deg); 1757 transform: perspective(400px)rotateY(-10deg) 1758 } 1759 1760 70% { 1761 -webkit-transform: perspective(400px)rotateY(10deg); 1762 -ms-transform: perspective(400px)rotateY(10deg); 1763 transform: perspective(400px)rotateY(10deg) 1764 } 1765 1766 100% { 1767 -webkit-transform: perspective(400px)rotateY(0); 1768 -ms-transform: perspective(400px)rotateY(0); 1769 transform: perspective(400px)rotateY(0); 1770 opacity: 1 1771 } 1772 } 1773 1774 .flipInY { 1775 -webkit-backface-visibility: visible !important; 1776 -ms-backface-visibility: visible !important; 1777 backface-visibility: visible !important; 1778 -webkit-animation-name: flipInY; 1779 animation-name: flipInY 1780 } 1781 1782 @-webkit-keyframes flipOutX { 1783 0% { 1784 -webkit-transform: perspective(400px)rotateX(0); 1785 transform: perspective(400px)rotateX(0); 1786 opacity: 1 1787 } 1788 1789 100% { 1790 -webkit-transform: perspective(400px)rotateX(90deg); 1791 transform: perspective(400px)rotateX(90deg); 1792 opacity: 0 1793 } 1794 } 1795 1796 @keyframes flipOutX { 1797 0% { 1798 -webkit-transform: perspective(400px)rotateX(0); 1799 -ms-transform: perspective(400px)rotateX(0); 1800 transform: perspective(400px)rotateX(0); 1801 opacity: 1 1802 } 1803 1804 100% { 1805 -webkit-transform: perspective(400px)rotateX(90deg); 1806 -ms-transform: perspective(400px)rotateX(90deg); 1807 transform: perspective(400px)rotateX(90deg); 1808 opacity: 0 1809 } 1810 } 1811 1812 .flipOutX { 1813 -webkit-animation-name: flipOutX; 1814 animation-name: flipOutX; 1815 -webkit-backface-visibility: visible !important; 1816 -ms-backface-visibility: visible !important; 1817 backface-visibility: visible !important 1818 } 1819 1820 @-webkit-keyframes flipOutY { 1821 0% { 1822 -webkit-transform: perspective(400px)rotateY(0); 1823 transform: perspective(400px)rotateY(0); 1824 opacity: 1 1825 } 1826 1827 100% { 1828 -webkit-transform: perspective(400px)rotateY(90deg); 1829 transform: perspective(400px)rotateY(90deg); 1830 opacity: 0 1831 } 1832 } 1833 1834 @keyframes flipOutY { 1835 0% { 1836 -webkit-transform: perspective(400px)rotateY(0); 1837 -ms-transform: perspective(400px)rotateY(0); 1838 transform: perspective(400px)rotateY(0); 1839 opacity: 1 1840 } 1841 1842 100% { 1843 -webkit-transform: perspective(400px)rotateY(90deg); 1844 -ms-transform: perspective(400px)rotateY(90deg); 1845 transform: perspective(400px)rotateY(90deg); 1846 opacity: 0 1847 } 1848 } 1849 1850 .flipOutY { 1851 -webkit-backface-visibility: visible !important; 1852 -ms-backface-visibility: visible !important; 1853 backface-visibility: visible !important; 1854 -webkit-animation-name: flipOutY; 1855 animation-name: flipOutY 1856 } 1857 1858 @-webkit-keyframes lightSpeedIn { 1859 0% { 1860 -webkit-transform: translateX(100%)skewX(-30deg); 1861 transform: translateX(100%)skewX(-30deg); 1862 opacity: 0 1863 } 1864 1865 60% { 1866 -webkit-transform: translateX(-20%)skewX(30deg); 1867 transform: translateX(-20%)skewX(30deg); 1868 opacity: 1 1869 } 1870 1871 80% { 1872 -webkit-transform: translateX(0%)skewX(-15deg); 1873 transform: translateX(0%)skewX(-15deg); 1874 opacity: 1 1875 } 1876 1877 100% { 1878 -webkit-transform: translateX(0%)skewX(0); 1879 transform: translateX(0%)skewX(0); 1880 opacity: 1 1881 } 1882 } 1883 1884 @keyframes lightSpeedIn { 1885 0% { 1886 -webkit-transform: translateX(100%)skewX(-30deg); 1887 -ms-transform: translateX(100%)skewX(-30deg); 1888 transform: translateX(100%)skewX(-30deg); 1889 opacity: 0 1890 } 1891 1892 60% { 1893 -webkit-transform: translateX(-20%)skewX(30deg); 1894 -ms-transform: translateX(-20%)skewX(30deg); 1895 transform: translateX(-20%)skewX(30deg); 1896 opacity: 1 1897 } 1898 1899 80% { 1900 -webkit-transform: translateX(0%)skewX(-15deg); 1901 -ms-transform: translateX(0%)skewX(-15deg); 1902 transform: translateX(0%)skewX(-15deg); 1903 opacity: 1 1904 } 1905 1906 100% { 1907 -webkit-transform: translateX(0%)skewX(0); 1908 -ms-transform: translateX(0%)skewX(0); 1909 transform: translateX(0%)skewX(0); 1910 opacity: 1 1911 } 1912 } 1913 1914 .lightSpeedIn { 1915 -webkit-animation-name: lightSpeedIn; 1916 animation-name: lightSpeedIn; 1917 -webkit-animation-timing-function: ease-out; 1918 animation-timing-function: ease-out 1919 } 1920 1921 @-webkit-keyframes lightSpeedOut { 1922 0% { 1923 -webkit-transform: translateX(0%)skewX(0); 1924 transform: translateX(0%)skewX(0); 1925 opacity: 1 1926 } 1927 1928 100% { 1929 -webkit-transform: translateX(100%)skewX(-30deg); 1930 transform: translateX(100%)skewX(-30deg); 1931 opacity: 0 1932 } 1933 } 1934 1935 @keyframes lightSpeedOut { 1936 0% { 1937 -webkit-transform: translateX(0%)skewX(0); 1938 -ms-transform: translateX(0%)skewX(0); 1939 transform: translateX(0%)skewX(0); 1940 opacity: 1 1941 } 1942 1943 100% { 1944 -webkit-transform: translateX(100%)skewX(-30deg); 1945 -ms-transform: translateX(100%)skewX(-30deg); 1946 transform: translateX(100%)skewX(-30deg); 1947 opacity: 0 1948 } 1949 } 1950 1951 .lightSpeedOut { 1952 -webkit-animation-name: lightSpeedOut; 1953 animation-name: lightSpeedOut; 1954 -webkit-animation-timing-function: ease-in; 1955 animation-timing-function: ease-in 1956 } 1957 1958 @-webkit-keyframes rotateIn { 1959 0% { 1960 -webkit-transform: rotate(-200deg); 1961 transform: rotate(-200deg); 1962 opacity: 0 1963 } 1964 1965 0%, 1966 100% { 1967 -webkit-transform-origin: center center; 1968 transform-origin: center center 1969 } 1970 1971 100% { 1972 -webkit-transform: rotate(0); 1973 transform: rotate(0); 1974 opacity: 1 1975 } 1976 } 1977 1978 @keyframes rotateIn { 1979 0% { 1980 -webkit-transform: rotate(-200deg); 1981 -ms-transform: rotate(-200deg); 1982 transform: rotate(-200deg); 1983 opacity: 0 1984 } 1985 1986 0%, 1987 100% { 1988 -webkit-transform-origin: center center; 1989 -ms-transform-origin: center center; 1990 transform-origin: center center 1991 } 1992 1993 100% { 1994 -webkit-transform: rotate(0); 1995 -ms-transform: rotate(0); 1996 transform: rotate(0); 1997 opacity: 1 1998 } 1999 } 2000 2001 .rotateIn { 2002 -webkit-animation-name: rotateIn; 2003 animation-name: rotateIn 2004 } 2005 2006 @-webkit-keyframes rotateInDownLeft { 2007 0% { 2008 -webkit-transform: rotate(-90deg); 2009 transform: rotate(-90deg); 2010 opacity: 0 2011 } 2012 2013 0%, 2014 100% { 2015 -webkit-transform-origin: left bottom; 2016 transform-origin: left bottom 2017 } 2018 2019 100% { 2020 -webkit-transform: rotate(0); 2021 transform: rotate(0); 2022 opacity: 1 2023 } 2024 } 2025 2026 @keyframes rotateInDownLeft { 2027 0% { 2028 -webkit-transform: rotate(-90deg); 2029 -ms-transform: rotate(-90deg); 2030 transform: rotate(-90deg); 2031 opacity: 0 2032 } 2033 2034 0%, 2035 100% { 2036 -webkit-transform-origin: left bottom; 2037 -ms-transform-origin: left bottom; 2038 transform-origin: left bottom 2039 } 2040 2041 100% { 2042 -webkit-transform: rotate(0); 2043 -ms-transform: rotate(0); 2044 transform: rotate(0); 2045 opacity: 1 2046 } 2047 } 2048 2049 .rotateInDownLeft { 2050 -webkit-animation-name: rotateInDownLeft; 2051 animation-name: rotateInDownLeft 2052 } 2053 2054 @-webkit-keyframes rotateInDownRight { 2055 0% { 2056 -webkit-transform: rotate(90deg); 2057 transform: rotate(90deg); 2058 opacity: 0 2059 } 2060 2061 0%, 2062 100% { 2063 -webkit-transform-origin: right bottom; 2064 transform-origin: right bottom 2065 } 2066 2067 100% { 2068 -webkit-transform: rotate(0); 2069 transform: rotate(0); 2070 opacity: 1 2071 } 2072 } 2073 2074 @keyframes rotateInDownRight { 2075 0% { 2076 -webkit-transform: rotate(90deg); 2077 -ms-transform: rotate(90deg); 2078 transform: rotate(90deg); 2079 opacity: 0 2080 } 2081 2082 0%, 2083 100% { 2084 -webkit-transform-origin: right bottom; 2085 -ms-transform-origin: right bottom; 2086 transform-origin: right bottom 2087 } 2088 2089 100% { 2090 -webkit-transform: rotate(0); 2091 -ms-transform: rotate(0); 2092 transform: rotate(0); 2093 opacity: 1 2094 } 2095 } 2096 2097 .rotateInDownRight { 2098 -webkit-animation-name: rotateInDownRight; 2099 animation-name: rotateInDownRight 2100 } 2101 2102 @-webkit-keyframes rotateInUpLeft { 2103 0% { 2104 -webkit-transform: rotate(90deg); 2105 transform: rotate(90deg); 2106 opacity: 0 2107 } 2108 2109 0%, 2110 100% { 2111 -webkit-transform-origin: left bottom; 2112 transform-origin: left bottom 2113 } 2114 2115 100% { 2116 -webkit-transform: rotate(0); 2117 transform: rotate(0); 2118 opacity: 1 2119 } 2120 } 2121 2122 @keyframes rotateInUpLeft { 2123 0% { 2124 -webkit-transform: rotate(90deg); 2125 -ms-transform: rotate(90deg); 2126 transform: rotate(90deg); 2127 opacity: 0 2128 } 2129 2130 0%, 2131 100% { 2132 -webkit-transform-origin: left bottom; 2133 -ms-transform-origin: left bottom; 2134 transform-origin: left bottom 2135 } 2136 2137 100% { 2138 -webkit-transform: rotate(0); 2139 -ms-transform: rotate(0); 2140 transform: rotate(0); 2141 opacity: 1 2142 } 2143 } 2144 2145 .rotateInUpLeft { 2146 -webkit-animation-name: rotateInUpLeft; 2147 animation-name: rotateInUpLeft 2148 } 2149 2150 @-webkit-keyframes rotateInUpRight { 2151 0% { 2152 -webkit-transform: rotate(-90deg); 2153 transform: rotate(-90deg); 2154 opacity: 0 2155 } 2156 2157 0%, 2158 100% { 2159 -webkit-transform-origin: right bottom; 2160 transform-origin: right bottom 2161 } 2162 2163 100% { 2164 -webkit-transform: rotate(0); 2165 transform: rotate(0); 2166 opacity: 1 2167 } 2168 } 2169 2170 @keyframes rotateInUpRight { 2171 0% { 2172 -webkit-transform: rotate(-90deg); 2173 -ms-transform: rotate(-90deg); 2174 transform: rotate(-90deg); 2175 opacity: 0 2176 } 2177 2178 0%, 2179 100% { 2180 -webkit-transform-origin: right bottom; 2181 -ms-transform-origin: right bottom; 2182 transform-origin: right bottom 2183 } 2184 2185 100% { 2186 -webkit-transform: rotate(0); 2187 -ms-transform: rotate(0); 2188 transform: rotate(0); 2189 opacity: 1 2190 } 2191 } 2192 2193 .rotateInUpRight { 2194 -webkit-animation-name: rotateInUpRight; 2195 animation-name: rotateInUpRight 2196 } 2197 2198 @-webkit-keyframes rotateOut { 2199 0% { 2200 -webkit-transform: rotate(0); 2201 transform: rotate(0); 2202 opacity: 1 2203 } 2204 2205 0%, 2206 100% { 2207 -webkit-transform-origin: center center; 2208 transform-origin: center center 2209 } 2210 2211 100% { 2212 -webkit-transform: rotate(200deg); 2213 transform: rotate(200deg); 2214 opacity: 0 2215 } 2216 } 2217 2218 @keyframes rotateOut { 2219 0% { 2220 -webkit-transform: rotate(0); 2221 -ms-transform: rotate(0); 2222 transform: rotate(0); 2223 opacity: 1 2224 } 2225 2226 0%, 2227 100% { 2228 -webkit-transform-origin: center center; 2229 -ms-transform-origin: center center; 2230 transform-origin: center center 2231 } 2232 2233 100% { 2234 -webkit-transform: rotate(200deg); 2235 -ms-transform: rotate(200deg); 2236 transform: rotate(200deg); 2237 opacity: 0 2238 } 2239 } 2240 2241 .rotateOut { 2242 -webkit-animation-name: rotateOut; 2243 animation-name: rotateOut 2244 } 2245 2246 @-webkit-keyframes rotateOutDownLeft { 2247 0% { 2248 -webkit-transform: rotate(0); 2249 transform: rotate(0); 2250 opacity: 1 2251 } 2252 2253 0%, 2254 100% { 2255 -webkit-transform-origin: left bottom; 2256 transform-origin: left bottom 2257 } 2258 2259 100% { 2260 -webkit-transform: rotate(90deg); 2261 transform: rotate(90deg); 2262 opacity: 0 2263 } 2264 } 2265 2266 @keyframes rotateOutDownLeft { 2267 0% { 2268 -webkit-transform: rotate(0); 2269 -ms-transform: rotate(0); 2270 transform: rotate(0); 2271 opacity: 1 2272 } 2273 2274 0%, 2275 100% { 2276 -webkit-transform-origin: left bottom; 2277 -ms-transform-origin: left bottom; 2278 transform-origin: left bottom 2279 } 2280 2281 100% { 2282 -webkit-transform: rotate(90deg); 2283 -ms-transform: rotate(90deg); 2284 transform: rotate(90deg); 2285 opacity: 0 2286 } 2287 } 2288 2289 .rotateOutDownLeft { 2290 -webkit-animation-name: rotateOutDownLeft; 2291 animation-name: rotateOutDownLeft 2292 } 2293 2294 @-webkit-keyframes rotateOutDownRight { 2295 0% { 2296 -webkit-transform: rotate(0); 2297 transform: rotate(0); 2298 opacity: 1 2299 } 2300 2301 0%, 2302 100% { 2303 -webkit-transform-origin: right bottom; 2304 transform-origin: right bottom 2305 } 2306 2307 100% { 2308 -webkit-transform: rotate(-90deg); 2309 transform: rotate(-90deg); 2310 opacity: 0 2311 } 2312 } 2313 2314 @keyframes rotateOutDownRight { 2315 0% { 2316 -webkit-transform: rotate(0); 2317 -ms-transform: rotate(0); 2318 transform: rotate(0); 2319 opacity: 1 2320 } 2321 2322 0%, 2323 100% { 2324 -webkit-transform-origin: right bottom; 2325 -ms-transform-origin: right bottom; 2326 transform-origin: right bottom 2327 } 2328 2329 100% { 2330 -webkit-transform: rotate(-90deg); 2331 -ms-transform: rotate(-90deg); 2332 transform: rotate(-90deg); 2333 opacity: 0 2334 } 2335 } 2336 2337 .rotateOutDownRight { 2338 -webkit-animation-name: rotateOutDownRight; 2339 animation-name: rotateOutDownRight 2340 } 2341 2342 @-webkit-keyframes rotateOutUpLeft { 2343 0% { 2344 -webkit-transform: rotate(0); 2345 transform: rotate(0); 2346 opacity: 1 2347 } 2348 2349 0%, 2350 100% { 2351 -webkit-transform-origin: left bottom; 2352 transform-origin: left bottom 2353 } 2354 2355 100% { 2356 -webkit-transform: rotate(-90deg); 2357 transform: rotate(-90deg); 2358 opacity: 0 2359 } 2360 } 2361 2362 @keyframes rotateOutUpLeft { 2363 0% { 2364 -webkit-transform: rotate(0); 2365 -ms-transform: rotate(0); 2366 transform: rotate(0); 2367 opacity: 1 2368 } 2369 2370 0%, 2371 100% { 2372 -webkit-transform-origin: left bottom; 2373 -ms-transform-origin: left bottom; 2374 transform-origin: left bottom 2375 } 2376 2377 100% { 2378 -webkit-transform: rotate(-90deg); 2379 -ms-transform: rotate(-90deg); 2380 transform: rotate(-90deg); 2381 opacity: 0 2382 } 2383 } 2384 2385 .rotateOutUpLeft { 2386 -webkit-animation-name: rotateOutUpLeft; 2387 animation-name: rotateOutUpLeft 2388 } 2389 2390 @-webkit-keyframes rotateOutUpRight { 2391 0% { 2392 -webkit-transform: rotate(0); 2393 transform: rotate(0); 2394 opacity: 1 2395 } 2396 2397 0%, 2398 100% { 2399 -webkit-transform-origin: right bottom; 2400 transform-origin: right bottom 2401 } 2402 2403 100% { 2404 -webkit-transform: rotate(90deg); 2405 transform: rotate(90deg); 2406 opacity: 0 2407 } 2408 } 2409 2410 @keyframes rotateOutUpRight { 2411 0% { 2412 -webkit-transform: rotate(0); 2413 -ms-transform: rotate(0); 2414 transform: rotate(0); 2415 opacity: 1 2416 } 2417 2418 0%, 2419 100% { 2420 -webkit-transform-origin: right bottom; 2421 -ms-transform-origin: right bottom; 2422 transform-origin: right bottom 2423 } 2424 2425 100% { 2426 -webkit-transform: rotate(90deg); 2427 -ms-transform: rotate(90deg); 2428 transform: rotate(90deg); 2429 opacity: 0 2430 } 2431 } 2432 2433 .rotateOutUpRight { 2434 -webkit-animation-name: rotateOutUpRight; 2435 animation-name: rotateOutUpRight 2436 } 2437 2438 @-webkit-keyframes slideInDown { 2439 0% { 2440 opacity: 0; 2441 -webkit-transform: translateY(-2000px); 2442 transform: translateY(-2000px) 2443 } 2444 2445 100% { 2446 -webkit-transform: translateY(0); 2447 transform: translateY(0) 2448 } 2449 } 2450 2451 @keyframes slideInDown { 2452 0% { 2453 opacity: 0; 2454 -webkit-transform: translateY(-2000px); 2455 -ms-transform: translateY(-2000px); 2456 transform: translateY(-2000px) 2457 } 2458 2459 100% { 2460 -webkit-transform: translateY(0); 2461 -ms-transform: translateY(0); 2462 transform: translateY(0) 2463 } 2464 } 2465 2466 .slideInDown { 2467 -webkit-animation-name: slideInDown; 2468 animation-name: slideInDown 2469 } 2470 2471 @-webkit-keyframes slideInLeft { 2472 0% { 2473 opacity: 0; 2474 -webkit-transform: translateX(-2000px); 2475 transform: translateX(-2000px) 2476 } 2477 2478 100% { 2479 -webkit-transform: translateX(0); 2480 transform: translateX(0) 2481 } 2482 } 2483 2484 @keyframes slideInLeft { 2485 0% { 2486 opacity: 0; 2487 -webkit-transform: translateX(-2000px); 2488 -ms-transform: translateX(-2000px); 2489 transform: translateX(-2000px) 2490 } 2491 2492 100% { 2493 -webkit-transform: translateX(0); 2494 -ms-transform: translateX(0); 2495 transform: translateX(0) 2496 } 2497 } 2498 2499 .slideInLeft { 2500 -webkit-animation-name: slideInLeft; 2501 animation-name: slideInLeft 2502 } 2503 2504 @-webkit-keyframes slideInRight { 2505 0% { 2506 opacity: 0; 2507 -webkit-transform: translateX(2000px); 2508 transform: translateX(2000px) 2509 } 2510 2511 100% { 2512 -webkit-transform: translateX(0); 2513 transform: translateX(0) 2514 } 2515 } 2516 2517 @keyframes slideInRight { 2518 0% { 2519 opacity: 0; 2520 -webkit-transform: translateX(2000px); 2521 -ms-transform: translateX(2000px); 2522 transform: translateX(2000px) 2523 } 2524 2525 100% { 2526 -webkit-transform: translateX(0); 2527 -ms-transform: translateX(0); 2528 transform: translateX(0) 2529 } 2530 } 2531 2532 .slideInRight { 2533 -webkit-animation-name: slideInRight; 2534 animation-name: slideInRight 2535 } 2536 2537 @-webkit-keyframes slideOutLeft { 2538 0% { 2539 -webkit-transform: translateX(0); 2540 transform: translateX(0) 2541 } 2542 2543 100% { 2544 opacity: 0; 2545 -webkit-transform: translateX(-2000px); 2546 transform: translateX(-2000px) 2547 } 2548 } 2549 2550 @keyframes slideOutLeft { 2551 0% { 2552 -webkit-transform: translateX(0); 2553 -ms-transform: translateX(0); 2554 transform: translateX(0) 2555 } 2556 2557 100% { 2558 opacity: 0; 2559 -webkit-transform: translateX(-2000px); 2560 -ms-transform: translateX(-2000px); 2561 transform: translateX(-2000px) 2562 } 2563 } 2564 2565 .slideOutLeft { 2566 -webkit-animation-name: slideOutLeft; 2567 animation-name: slideOutLeft 2568 } 2569 2570 @-webkit-keyframes slideOutRight { 2571 0% { 2572 -webkit-transform: translateX(0); 2573 transform: translateX(0) 2574 } 2575 2576 100% { 2577 opacity: 0; 2578 -webkit-transform: translateX(2000px); 2579 transform: translateX(2000px) 2580 } 2581 } 2582 2583 @keyframes slideOutRight { 2584 0% { 2585 -webkit-transform: translateX(0); 2586 -ms-transform: translateX(0); 2587 transform: translateX(0) 2588 } 2589 2590 100% { 2591 opacity: 0; 2592 -webkit-transform: translateX(2000px); 2593 -ms-transform: translateX(2000px); 2594 transform: translateX(2000px) 2595 } 2596 } 2597 2598 .slideOutRight { 2599 -webkit-animation-name: slideOutRight; 2600 animation-name: slideOutRight 2601 } 2602 2603 @-webkit-keyframes slideOutUp { 2604 0% { 2605 -webkit-transform: translateY(0); 2606 transform: translateY(0) 2607 } 2608 2609 100% { 2610 opacity: 0; 2611 -webkit-transform: translateY(-2000px); 2612 transform: translateY(-2000px) 2613 } 2614 } 2615 2616 @keyframes slideOutUp { 2617 0% { 2618 -webkit-transform: translateY(0); 2619 -ms-transform: translateY(0); 2620 transform: translateY(0) 2621 } 2622 2623 100% { 2624 opacity: 0; 2625 -webkit-transform: translateY(-2000px); 2626 -ms-transform: translateY(-2000px); 2627 transform: translateY(-2000px) 2628 } 2629 } 2630 2631 .slideOutUp { 2632 -webkit-animation-name: slideOutUp; 2633 animation-name: slideOutUp 2634 } 2635 2636 @-webkit-keyframes hinge { 2637 0% { 2638 -webkit-transform: rotate(0); 2639 transform: rotate(0) 2640 } 2641 2642 0%, 2643 20%, 2644 60% { 2645 -webkit-transform-origin: top left; 2646 transform-origin: top left; 2647 -webkit-animation-timing-function: ease-in-out; 2648 animation-timing-function: ease-in-out 2649 } 2650 2651 20%, 2652 60% { 2653 -webkit-transform: rotate(80deg); 2654 transform: rotate(80deg) 2655 } 2656 2657 40% { 2658 -webkit-transform: rotate(60deg); 2659 transform: rotate(60deg) 2660 } 2661 2662 40%, 2663 80% { 2664 -webkit-transform-origin: top left; 2665 transform-origin: top left; 2666 -webkit-animation-timing-function: ease-in-out; 2667 animation-timing-function: ease-in-out 2668 } 2669 2670 80% { 2671 -webkit-transform: rotate(60deg)translateY(0); 2672 transform: rotate(60deg)translateY(0); 2673 opacity: 1 2674 } 2675 2676 100% { 2677 -webkit-transform: translateY(700px); 2678 transform: translateY(700px); 2679 opacity: 0 2680 } 2681 } 2682 2683 @keyframes hinge { 2684 0% { 2685 -webkit-transform: rotate(0); 2686 -ms-transform: rotate(0); 2687 transform: rotate(0) 2688 } 2689 2690 0%, 2691 20%, 2692 60% { 2693 -webkit-transform-origin: top left; 2694 -ms-transform-origin: top left; 2695 transform-origin: top left; 2696 -webkit-animation-timing-function: ease-in-out; 2697 animation-timing-function: ease-in-out 2698 } 2699 2700 20%, 2701 60% { 2702 -webkit-transform: rotate(80deg); 2703 -ms-transform: rotate(80deg); 2704 transform: rotate(80deg) 2705 } 2706 2707 40% { 2708 -webkit-transform: rotate(60deg); 2709 -ms-transform: rotate(60deg); 2710 transform: rotate(60deg) 2711 } 2712 2713 40%, 2714 80% { 2715 -webkit-transform-origin: top left; 2716 -ms-transform-origin: top left; 2717 transform-origin: top left; 2718 -webkit-animation-timing-function: ease-in-out; 2719 animation-timing-function: ease-in-out 2720 } 2721 2722 80% { 2723 -webkit-transform: rotate(60deg)translateY(0); 2724 -ms-transform: rotate(60deg)translateY(0); 2725 transform: rotate(60deg)translateY(0); 2726 opacity: 1 2727 } 2728 2729 100% { 2730 -webkit-transform: translateY(700px); 2731 -ms-transform: translateY(700px); 2732 transform: translateY(700px); 2733 opacity: 0 2734 } 2735 } 2736 2737 .hinge { 2738 -webkit-animation-name: hinge; 2739 animation-name: hinge 2740 } 2741 2742 @-webkit-keyframes rollIn { 2743 0% { 2744 opacity: 0; 2745 -webkit-transform: translateX(-100%)rotate(-120deg); 2746 transform: translateX(-100%)rotate(-120deg) 2747 } 2748 2749 100% { 2750 opacity: 1; 2751 -webkit-transform: translateX(0)rotate(0); 2752 transform: translateX(0)rotate(0) 2753 } 2754 } 2755 2756 @keyframes rollIn { 2757 0% { 2758 opacity: 0; 2759 -webkit-transform: translateX(-100%)rotate(-120deg); 2760 -ms-transform: translateX(-100%)rotate(-120deg); 2761 transform: translateX(-100%)rotate(-120deg) 2762 } 2763 2764 100% { 2765 opacity: 1; 2766 -webkit-transform: translateX(0)rotate(0); 2767 -ms-transform: translateX(0)rotate(0); 2768 transform: translateX(0)rotate(0) 2769 } 2770 } 2771 2772 .rollIn { 2773 -webkit-animation-name: rollIn; 2774 animation-name: rollIn 2775 } 2776 2777 @-webkit-keyframes rollOut { 2778 0% { 2779 opacity: 1; 2780 -webkit-transform: translateX(0)rotate(0); 2781 transform: translateX(0)rotate(0) 2782 } 2783 2784 100% { 2785 opacity: 0; 2786 -webkit-transform: translateX(100%)rotate(120deg); 2787 transform: translateX(100%)rotate(120deg) 2788 } 2789 } 2790 2791 @keyframes rollOut { 2792 0% { 2793 opacity: 1; 2794 -webkit-transform: translateX(0)rotate(0); 2795 -ms-transform: translateX(0)rotate(0); 2796 transform: translateX(0)rotate(0) 2797 } 2798 2799 100% { 2800 opacity: 0; 2801 -webkit-transform: translateX(100%)rotate(120deg); 2802 -ms-transform: translateX(100%)rotate(120deg); 2803 transform: translateX(100%)rotate(120deg) 2804 } 2805 } 2806 2807 .rollOut { 2808 -webkit-animation-name: rollOut; 2809 animation-name: rollOut 2810 }
1 html, body, div, span, applet, object, iframe, 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 a, abbr, acronym, address, big, cite, code, 4 del, dfn, em, img, ins, kbd, q, s, samp, 5 small, strike, strong, sub, sup, tt, var, 6 b, u, i, center, 7 dl, dt, dd, ol, ul, li, 8 fieldset, form, label, legend, 9 table, caption, tbody, tfoot, thead, tr, th, td, 10 article, aside, canvas, details, embed, 11 figure, figcaption, footer, header, hgroup, 12 menu, nav, output, ruby, section, summary, 13 time, mark, audio, video { 14 margin: 0; 15 padding: 0; 16 border: 0; 17 font-size: 100px; 18 font: inherit; 19 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Microsoft YaHei"; 20 vertical-align: baseline; 21 } 22 /* HTML5 display-role reset for older browsers */ 23 article, aside, details, figcaption, figure, 24 footer, header, hgroup, menu, nav, section { 25 display: block; 26 } 27 body { 28 line-height: 1; 29 30 min-width: 1380px; 31 color: #333; 32 } 33 ol, ul { 34 list-style: none; 35 } 36 blockquote, q { 37 quotes: none; 38 } 39 blockquote:before, blockquote:after, 40 q:before, q:after { 41 content: ''; 42 content: none; 43 } 44 table { 45 border-collapse: collapse; 46 border-spacing: 0; 47 } 48 a{ 49 text-decoration: none; 50 } 51 a:link{text-decoration: none} 52 a:visited{text-decoration: none} 53 a:hover{text-decoration: none} 54 a:active{text-decoration: none} 55 body { 56 font-family: "Avenir Next", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, "Microsoft YaHei", "Source Han Sans CN"; 57 }
1 .mainbox { 2 width: 1200px; 3 margin: 0 auto; 4 } 5 6 .header { 7 position: fixed; 8 top: 0px; 9 left: 0px; 10 width: 100%; 11 min-width: 1000px; 12 z-index: 9999; 13 background: #fff; 14 height: 97px; 15 /* transition: all .3s; */ 16 border-bottom: 1px solid rgba(153, 153, 153, 0.52); 17 font-size: 16px; 18 min-width: 1280px; 19 } 20 21 22 .news_list { 23 padding: 50px 0 40px; 24 background-color: #f2f6fb; 25 } 26 27 .news_list_ul { 28 width: 1230px; 29 } 30 31 .news_list_ul li { 32 width: 380px; 33 height: 342px; 34 background-color: #fff; 35 margin-right: 30px; 36 float: left; 37 margin-bottom: 30px; 38 } 39 40 .news_list_ul li a { 41 display: block; 42 } 43 44 .news_list_ul li .txtcon { 45 line-height: 32px; 46 padding: 21px 0 0 28px; 47 } 48 49 .news_list_ul li .tit { 50 color: #333; 51 font-size: 16px; 52 height: 30px; 53 overflow: hidden; 54 } 55 56 .news_list_ul li .time { 57 color: #999; 58 } 59 60 .news_list_ul li .imgcon { 61 62 width: 380px; 63 height: 229px; 64 overflow: hidden; 65 } 66 67 .news_list_ul li .imgcon img { 68 width: 380px; 69 height: 229px; 70 transition: all 0.5s; 71 72 } 73 74 .news_list_ul li:hover { 75 box-shadow: 5px 4px 10px 1px rgba(0, 0, 0, 0.1); 76 transition: all 0.5s; 77 } 78 79 .news_list_ul li:hover .imgcon img { 80 transform: scale(1.1, 1.1) 81 } 82 83 .pagebox { 84 text-align: center; 85 padding: 78px 0 0px; 86 /* border-top: 1px solid #fff; */ 87 margin-top: -1px; 88 font-size: 0; 89 } 90 91 .pagebox a { 92 display: inline-block; 93 *display: inline; 94 *zoom: 1; 95 color: #333; 96 width: 36px; 97 height: 36px; 98 text-align: center; 99 line-height: 36px; 100 border: 1px solid #dbdbdb; 101 font-size: 16px; 102 margin: 0 6px; 103 background-color: #fff; 104 } 105 106 .pagebox a.cur { 107 border-color: #15499d; 108 color: #fff; 109 background-color: #15499d; 110 } 111 112 .pagebox a:hover { 113 border-color: #15499d; 114 color: #fff; 115 background-color: #15499d; 116 } 117 118 .pagebox a.prev, 119 .pagebox a.next { 120 width: 73px; 121 } 122 123 .pagebox a.btn { 124 width: 60px; 125 } 126 127 128
1 /** 2 * Swiper 4.5.0 3 * Most modern mobile touch slider and framework with hardware accelerated transitions 4 * http://www.idangero.us/swiper/ 5 * 6 * Copyright 2014-2019 Vladimir Kharlampidi 7 * 8 * Released under the MIT License 9 * 10 * Released on: February 22, 2019 11 */ 12 .swiper-container { 13 margin: 0 auto; 14 position: relative; 15 overflow: hidden; 16 list-style: none; 17 padding: 0; 18 z-index: 1 19 } 20 21 .swiper-container-no-flexbox .swiper-slide { 22 float: left 23 } 24 25 .swiper-container-vertical>.swiper-wrapper { 26 -webkit-box-orient: vertical; 27 -webkit-box-direction: normal; 28 -webkit-flex-direction: column; 29 -ms-flex-direction: column; 30 flex-direction: column 31 } 32 33 .swiper-wrapper { 34 position: relative; 35 width: 100%; 36 height: 100%; 37 z-index: 1; 38 display: -webkit-box; 39 display: -webkit-flex; 40 display: -ms-flexbox; 41 display: flex; 42 -webkit-transition-property: -webkit-transform; 43 transition-property: -webkit-transform; 44 -o-transition-property: transform; 45 transition-property: transform; 46 transition-property: transform, -webkit-transform; 47 -webkit-box-sizing: content-box; 48 box-sizing: content-box 49 } 50 51 .swiper-container-android .swiper-slide, 52 .swiper-wrapper { 53 -webkit-transform: translate3d(0, 0, 0); 54 transform: translate3d(0, 0, 0) 55 } 56 57 .swiper-container-multirow>.swiper-wrapper { 58 -webkit-flex-wrap: wrap; 59 -ms-flex-wrap: wrap; 60 flex-wrap: wrap 61 } 62 63 .swiper-container-free-mode>.swiper-wrapper { 64 -webkit-transition-timing-function: ease-out; 65 -o-transition-timing-function: ease-out; 66 transition-timing-function: ease-out; 67 margin: 0 auto 68 } 69 70 .swiper-slide { 71 -webkit-flex-shrink: 0; 72 -ms-flex-negative: 0; 73 flex-shrink: 0; 74 width: 100%; 75 height: 100%; 76 position: relative; 77 -webkit-transition-property: -webkit-transform; 78 transition-property: -webkit-transform; 79 -o-transition-property: transform; 80 transition-property: transform; 81 transition-property: transform, -webkit-transform 82 } 83 84 .swiper-slide-invisible-blank { 85 visibility: hidden 86 } 87 88 .swiper-container-autoheight, 89 .swiper-container-autoheight .swiper-slide { 90 height: auto 91 } 92 93 .swiper-container-autoheight .swiper-wrapper { 94 -webkit-box-align: start; 95 -webkit-align-items: flex-start; 96 -ms-flex-align: start; 97 align-items: flex-start; 98 -webkit-transition-property: height, -webkit-transform; 99 transition-property: height, -webkit-transform; 100 -o-transition-property: transform, height; 101 transition-property: transform, height; 102 transition-property: transform, height, -webkit-transform 103 } 104 105 .swiper-container-3d { 106 -webkit-perspective: 1200px; 107 perspective: 1200px 108 } 109 110 .swiper-container-3d .swiper-cube-shadow, 111 .swiper-container-3d .swiper-slide, 112 .swiper-container-3d .swiper-slide-shadow-bottom, 113 .swiper-container-3d .swiper-slide-shadow-left, 114 .swiper-container-3d .swiper-slide-shadow-right, 115 .swiper-container-3d .swiper-slide-shadow-top, 116 .swiper-container-3d .swiper-wrapper { 117 -webkit-transform-style: preserve-3d; 118 transform-style: preserve-3d 119 } 120 121 .swiper-container-3d .swiper-slide-shadow-bottom, 122 .swiper-container-3d .swiper-slide-shadow-left, 123 .swiper-container-3d .swiper-slide-shadow-right, 124 .swiper-container-3d .swiper-slide-shadow-top { 125 position: absolute; 126 left: 0; 127 top: 0; 128 width: 100%; 129 height: 100%; 130 pointer-events: none; 131 z-index: 10 132 } 133 134 .swiper-container-3d .swiper-slide-shadow-left { 135 background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 136 background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 137 background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 138 background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 139 } 140 141 .swiper-container-3d .swiper-slide-shadow-right { 142 background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 143 background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 144 background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 145 background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 146 } 147 148 .swiper-container-3d .swiper-slide-shadow-top { 149 background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 150 background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 151 background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 152 background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 153 } 154 155 .swiper-container-3d .swiper-slide-shadow-bottom { 156 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 157 background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 158 background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 159 background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 160 } 161 162 .swiper-container-wp8-horizontal, 163 .swiper-container-wp8-horizontal>.swiper-wrapper { 164 -ms-touch-action: pan-y; 165 touch-action: pan-y 166 } 167 168 .swiper-container-wp8-vertical, 169 .swiper-container-wp8-vertical>.swiper-wrapper { 170 -ms-touch-action: pan-x; 171 touch-action: pan-x 172 } 173 174 .swiper-button-next, 175 .swiper-button-prev { 176 position: absolute; 177 top: 50%; 178 width: 27px; 179 height: 44px; 180 margin-top: -22px; 181 z-index: 10; 182 cursor: pointer; 183 background-size: 27px 44px; 184 background-position: center; 185 background-repeat: no-repeat 186 } 187 188 .swiper-button-next.swiper-button-disabled, 189 .swiper-button-prev.swiper-button-disabled { 190 opacity: .35; 191 cursor: auto; 192 pointer-events: none 193 } 194 195 .swiper-button-prev, 196 .swiper-container-rtl .swiper-button-next { 197 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 198 left: 10px; 199 right: auto 200 } 201 202 .swiper-button-next, 203 .swiper-container-rtl .swiper-button-prev { 204 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 205 right: 10px; 206 left: auto 207 } 208 209 .swiper-button-prev.swiper-button-white, 210 .swiper-container-rtl .swiper-button-next.swiper-button-white { 211 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 212 } 213 214 .swiper-button-next.swiper-button-white, 215 .swiper-container-rtl .swiper-button-prev.swiper-button-white { 216 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") 217 } 218 219 .swiper-button-prev.swiper-button-black, 220 .swiper-container-rtl .swiper-button-next.swiper-button-black { 221 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") 222 } 223 224 .swiper-button-next.swiper-button-black, 225 .swiper-container-rtl .swiper-button-prev.swiper-button-black { 226 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") 227 } 228 229 .swiper-button-lock { 230 display: none 231 } 232 233 .swiper-pagination { 234 position: absolute; 235 text-align: center; 236 -webkit-transition: .3s opacity; 237 -o-transition: .3s opacity; 238 transition: .3s opacity; 239 -webkit-transform: translate3d(0, 0, 0); 240 transform: translate3d(0, 0, 0); 241 z-index: 10 242 } 243 244 .swiper-pagination.swiper-pagination-hidden { 245 opacity: 0 246 } 247 248 .swiper-container-horizontal>.swiper-pagination-bullets, 249 .swiper-pagination-custom, 250 .swiper-pagination-fraction { 251 bottom: 10px; 252 left: 0; 253 width: 100% 254 } 255 256 .swiper-pagination-bullets-dynamic { 257 overflow: hidden; 258 font-size: 0 259 } 260 261 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 262 -webkit-transform: scale(.33); 263 -ms-transform: scale(.33); 264 transform: scale(.33); 265 position: relative 266 } 267 268 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { 269 -webkit-transform: scale(1); 270 -ms-transform: scale(1); 271 transform: scale(1) 272 } 273 274 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { 275 -webkit-transform: scale(1); 276 -ms-transform: scale(1); 277 transform: scale(1) 278 } 279 280 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { 281 -webkit-transform: scale(.66); 282 -ms-transform: scale(.66); 283 transform: scale(.66) 284 } 285 286 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { 287 -webkit-transform: scale(.33); 288 -ms-transform: scale(.33); 289 transform: scale(.33) 290 } 291 292 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { 293 -webkit-transform: scale(.66); 294 -ms-transform: scale(.66); 295 transform: scale(.66) 296 } 297 298 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { 299 -webkit-transform: scale(.33); 300 -ms-transform: scale(.33); 301 transform: scale(.33) 302 } 303 304 .swiper-pagination-bullet { 305 width: 8px; 306 height: 8px; 307 display: inline-block; 308 border-radius: 100%; 309 background: #000; 310 opacity: .2 311 } 312 313 button.swiper-pagination-bullet { 314 border: none; 315 margin: 0; 316 padding: 0; 317 -webkit-box-shadow: none; 318 box-shadow: none; 319 -webkit-appearance: none; 320 -moz-appearance: none; 321 appearance: none 322 } 323 324 .swiper-pagination-clickable .swiper-pagination-bullet { 325 cursor: pointer 326 } 327 328 .swiper-pagination-bullet-active { 329 opacity: 1; 330 background: #007aff 331 } 332 333 .swiper-container-vertical>.swiper-pagination-bullets { 334 right: 10px; 335 top: 50%; 336 -webkit-transform: translate3d(0, -50%, 0); 337 transform: translate3d(0, -50%, 0) 338 } 339 340 .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { 341 margin: 6px 0; 342 display: block 343 } 344 345 .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 346 top: 50%; 347 -webkit-transform: translateY(-50%); 348 -ms-transform: translateY(-50%); 349 transform: translateY(-50%); 350 width: 8px 351 } 352 353 .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 354 display: inline-block; 355 -webkit-transition: .2s top, .2s -webkit-transform; 356 transition: .2s top, .2s -webkit-transform; 357 -o-transition: .2s transform, .2s top; 358 transition: .2s transform, .2s top; 359 transition: .2s transform, .2s top, .2s -webkit-transform 360 } 361 362 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { 363 margin: 0 4px 364 } 365 366 .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 367 left: 50%; 368 -webkit-transform: translateX(-50%); 369 -ms-transform: translateX(-50%); 370 transform: translateX(-50%); 371 white-space: nowrap 372 } 373 374 .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 375 -webkit-transition: .2s left, .2s -webkit-transform; 376 transition: .2s left, .2s -webkit-transform; 377 -o-transition: .2s transform, .2s left; 378 transition: .2s transform, .2s left; 379 transition: .2s transform, .2s left, .2s -webkit-transform 380 } 381 382 .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 383 -webkit-transition: .2s right, .2s -webkit-transform; 384 transition: .2s right, .2s -webkit-transform; 385 -o-transition: .2s transform, .2s right; 386 transition: .2s transform, .2s right; 387 transition: .2s transform, .2s right, .2s -webkit-transform 388 } 389 390 .swiper-pagination-progressbar { 391 background: rgba(0, 0, 0, .25); 392 position: absolute 393 } 394 395 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 396 background: #007aff; 397 position: absolute; 398 left: 0; 399 top: 0; 400 width: 100%; 401 height: 100%; 402 -webkit-transform: scale(0); 403 -ms-transform: scale(0); 404 transform: scale(0); 405 -webkit-transform-origin: left top; 406 -ms-transform-origin: left top; 407 transform-origin: left top 408 } 409 410 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 411 -webkit-transform-origin: right top; 412 -ms-transform-origin: right top; 413 transform-origin: right top 414 } 415 416 .swiper-container-horizontal>.swiper-pagination-progressbar, 417 .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { 418 width: 100%; 419 height: 4px; 420 left: 0; 421 top: 0 422 } 423 424 .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, 425 .swiper-container-vertical>.swiper-pagination-progressbar { 426 width: 4px; 427 height: 100%; 428 left: 0; 429 top: 0 430 } 431 432 .swiper-pagination-white .swiper-pagination-bullet-active { 433 background: #fff 434 } 435 436 .swiper-pagination-progressbar.swiper-pagination-white { 437 background: rgba(255, 255, 255, .25) 438 } 439 440 .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { 441 background: #fff 442 } 443 444 .swiper-pagination-black .swiper-pagination-bullet-active { 445 background: #000 446 } 447 448 .swiper-pagination-progressbar.swiper-pagination-black { 449 background: rgba(0, 0, 0, .25) 450 } 451 452 .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { 453 background: #000 454 } 455 456 .swiper-pagination-lock { 457 display: none 458 } 459 460 .swiper-scrollbar { 461 border-radius: 10px; 462 position: relative; 463 -ms-touch-action: none; 464 background: rgba(0, 0, 0, .1) 465 } 466 467 .swiper-container-horizontal>.swiper-scrollbar { 468 position: absolute; 469 left: 1%; 470 bottom: 3px; 471 z-index: 50; 472 height: 5px; 473 width: 98% 474 } 475 476 .swiper-container-vertical>.swiper-scrollbar { 477 position: absolute; 478 right: 3px; 479 top: 1%; 480 z-index: 50; 481 width: 5px; 482 height: 98% 483 } 484 485 .swiper-scrollbar-drag { 486 height: 100%; 487 width: 100%; 488 position: relative; 489 background: rgba(0, 0, 0, .5); 490 border-radius: 10px; 491 left: 0; 492 top: 0 493 } 494 495 .swiper-scrollbar-cursor-drag { 496 cursor: move 497 } 498 499 .swiper-scrollbar-lock { 500 display: none 501 } 502 503 .swiper-zoom-container { 504 width: 100%; 505 height: 100%; 506 display: -webkit-box; 507 display: -webkit-flex; 508 display: -ms-flexbox; 509 display: flex; 510 -webkit-box-pack: center; 511 -webkit-justify-content: center; 512 -ms-flex-pack: center; 513 justify-content: center; 514 -webkit-box-align: center; 515 -webkit-align-items: center; 516 -ms-flex-align: center; 517 align-items: center; 518 text-align: center 519 } 520 521 .swiper-zoom-container>canvas, 522 .swiper-zoom-container>img, 523 .swiper-zoom-container>svg { 524 max-width: 100%; 525 max-height: 100%; 526 -o-object-fit: contain; 527 object-fit: contain 528 } 529 530 .swiper-slide-zoomed { 531 cursor: move 532 } 533 534 .swiper-lazy-preloader { 535 width: 42px; 536 height: 42px; 537 position: absolute; 538 left: 50%; 539 top: 50%; 540 margin-left: -21px; 541 margin-top: -21px; 542 z-index: 10; 543 -webkit-transform-origin: 50%; 544 -ms-transform-origin: 50%; 545 transform-origin: 50%; 546 -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; 547 animation: swiper-preloader-spin 1s steps(12, end) infinite 548 } 549 550 .swiper-lazy-preloader:after { 551 display: block; 552 content: ''; 553 width: 100%; 554 height: 100%; 555 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 556 background-position: 50%; 557 background-size: 100%; 558 background-repeat: no-repeat 559 } 560 561 .swiper-lazy-preloader-white:after { 562 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 563 } 564 565 @-webkit-keyframes swiper-preloader-spin { 566 100% { 567 -webkit-transform: rotate(360deg); 568 transform: rotate(360deg) 569 } 570 } 571 572 @keyframes swiper-preloader-spin { 573 100% { 574 -webkit-transform: rotate(360deg); 575 transform: rotate(360deg) 576 } 577 } 578 579 .swiper-container .swiper-notification { 580 position: absolute; 581 left: 0; 582 top: 0; 583 pointer-events: none; 584 opacity: 0; 585 z-index: -1000 586 } 587 588 .swiper-container-fade.swiper-container-free-mode .swiper-slide { 589 -webkit-transition-timing-function: ease-out; 590 -o-transition-timing-function: ease-out; 591 transition-timing-function: ease-out 592 } 593 594 .swiper-container-fade .swiper-slide { 595 pointer-events: none; 596 -webkit-transition-property: opacity; 597 -o-transition-property: opacity; 598 transition-property: opacity 599 } 600 601 .swiper-container-fade .swiper-slide .swiper-slide { 602 pointer-events: none 603 } 604 605 .swiper-container-fade .swiper-slide-active, 606 .swiper-container-fade .swiper-slide-active .swiper-slide-active { 607 pointer-events: auto 608 } 609 610 .swiper-container-cube { 611 overflow: visible 612 } 613 614 .swiper-container-cube .swiper-slide { 615 pointer-events: none; 616 -webkit-backface-visibility: hidden; 617 backface-visibility: hidden; 618 z-index: 1; 619 visibility: hidden; 620 -webkit-transform-origin: 0 0; 621 -ms-transform-origin: 0 0; 622 transform-origin: 0 0; 623 width: 100%; 624 height: 100% 625 } 626 627 .swiper-container-cube .swiper-slide .swiper-slide { 628 pointer-events: none 629 } 630 631 .swiper-container-cube.swiper-container-rtl .swiper-slide { 632 -webkit-transform-origin: 100% 0; 633 -ms-transform-origin: 100% 0; 634 transform-origin: 100% 0 635 } 636 637 .swiper-container-cube .swiper-slide-active, 638 .swiper-container-cube .swiper-slide-active .swiper-slide-active { 639 pointer-events: auto 640 } 641 642 .swiper-container-cube .swiper-slide-active, 643 .swiper-container-cube .swiper-slide-next, 644 .swiper-container-cube .swiper-slide-next+.swiper-slide, 645 .swiper-container-cube .swiper-slide-prev { 646 pointer-events: auto; 647 visibility: visible 648 } 649 650 .swiper-container-cube .swiper-slide-shadow-bottom, 651 .swiper-container-cube .swiper-slide-shadow-left, 652 .swiper-container-cube .swiper-slide-shadow-right, 653 .swiper-container-cube .swiper-slide-shadow-top { 654 z-index: 0; 655 -webkit-backface-visibility: hidden; 656 backface-visibility: hidden 657 } 658 659 .swiper-container-cube .swiper-cube-shadow { 660 position: absolute; 661 left: 0; 662 bottom: 0; 663 width: 100%; 664 height: 100%; 665 background: #000; 666 opacity: .6; 667 -webkit-filter: blur(50px); 668 filter: blur(50px); 669 z-index: 0 670 } 671 672 .swiper-container-flip { 673 overflow: visible 674 } 675 676 .swiper-container-flip .swiper-slide { 677 pointer-events: none; 678 -webkit-backface-visibility: hidden; 679 backface-visibility: hidden; 680 z-index: 1 681 } 682 683 .swiper-container-flip .swiper-slide .swiper-slide { 684 pointer-events: none 685 } 686 687 .swiper-container-flip .swiper-slide-active, 688 .swiper-container-flip .swiper-slide-active .swiper-slide-active { 689 pointer-events: auto 690 } 691 692 .swiper-container-flip .swiper-slide-shadow-bottom, 693 .swiper-container-flip .swiper-slide-shadow-left, 694 .swiper-container-flip .swiper-slide-shadow-right, 695 .swiper-container-flip .swiper-slide-shadow-top { 696 z-index: 0; 697 -webkit-backface-visibility: hidden; 698 backface-visibility: hidden 699 } 700 701 .swiper-container-coverflow .swiper-wrapper { 702 -ms-perspective: 1200px 703 }
js代码：
var options = [{ "urlPath": { "url": "http://localhost:6789" } }]
最终样式
浙公网安备 33010602011771号