├── README.md ├── css ├── animation.css ├── base.css ├── index.css └── swiper.min.css ├── images ├── aaa.png ├── addmusic.png ├── article.png ├── background.png ├── background2.png ├── background3.png ├── ben1.png ├── ccc.png ├── cebian.png ├── cebian2.png ├── circular2.png ├── circular3.png ├── dd.gif ├── ellipse1.png ├── ellipse2.png ├── ellipse3.png ├── foot.png ├── good.png ├── huojian.png ├── kaixin.png ├── list_b.png ├── list_top.png ├── mobile.png ├── music.png ├── note1.png ├── note2.png ├── notobvious.png ├── pic.png ├── polygon.png ├── polygon2.png ├── pyramid.png ├── rectangle.png ├── rocket.png ├── rocket2.png ├── rocket3.png ├── rocketfly.png ├── satellite.png ├── smallglob.png ├── star11.png ├── start.png ├── video.png ├── video2.png ├── wu.png ├── yinfu.png ├── yuan.png ├── yun.png ├── yun2.png └── yun3.png ├── index.html └── js ├── jquery-1.8.3.js └── swiper.min.js /README.md: -------------------------------------------------------------------------------- 1 | # swiperAndcss3 2 | 3 | > 这个demo是用swiper和css3写的一个动效的引导页 4 | 5 | 效果如图 6 | 7 | ![image](https://github.com/yutao331763646/swiperAndcss3/blob/master/images/dd.gif) 8 | 9 | 10 | -------------------------------------------------------------------------------- /css/animation.css: -------------------------------------------------------------------------------- 1 | /************** web by yutao on 2017-9-3 *******************/ 2 | 3 | 4 | /* 从左向右的云 */ 5 | 6 | @keyframes yun2 { 7 | 0% { 8 | -ms-transform: translateX(0); 9 | -webkit-transform: translateX(0); 10 | transform: translateX(0); 11 | } 12 | 100% { 13 | -ms-transform: translateX(1rem); 14 | -webkit-transform: translateX(1rem); 15 | transform: translateX(1rem); 16 | } 17 | } 18 | 19 | @-webkit-keyframes yun2 { 20 | 0% { 21 | -ms-transform: translateX(0); 22 | -webkit-transform: translateX(0); 23 | transform: translateX(0); 24 | } 25 | 100% { 26 | -ms-transform: translateX(1rem); 27 | -webkit-transform: translateX(1rem); 28 | transform: translateX(1rem); 29 | } 30 | } 31 | 32 | 33 | /* 从右向左的云 */ 34 | 35 | @keyframes yun { 36 | 0% { 37 | -ms-transform: translateX(0); 38 | /* IE 9 */ 39 | -webkit-transform: translateX(0); 40 | /* Safari */ 41 | transform: translateX(0); 42 | /* 标准语法 */ 43 | } 44 | 100% { 45 | -ms-transform: translateX(-1rem); 46 | /* IE 9 */ 47 | -webkit-transform: translateX(-1rem); 48 | /* Safari */ 49 | transform: translateX(-1rem); 50 | /* 标准语法 */ 51 | } 52 | } 53 | 54 | @-webkit-keyframes yun { 55 | 0% { 56 | -ms-transform: translateX(0); 57 | /* IE 9 */ 58 | -webkit-transform: translateX(0); 59 | /* Safari */ 60 | transform: translateX(0); 61 | /* 标准语法 */ 62 | } 63 | 100% { 64 | -ms-transform: translateX(-1rem); 65 | /* IE 9 */ 66 | -webkit-transform: translateX(-1rem); 67 | /* Safari */ 68 | transform: translateX(-1rem); 69 | /* 标准语法 */ 70 | } 71 | } 72 | 73 | 74 | /* 右边向右上角运动的音符 */ 75 | 76 | @keyframes note1 { 77 | 0% { 78 | -ms-transform: translate(0, 0); 79 | /* IE 9 */ 80 | -webkit-transform: translate(0, 0); 81 | /* Safari */ 82 | transform: translate(0, 0); 83 | /* 标准语法 */ 84 | } 85 | 100% { 86 | -ms-transform: translate(.5rem, -1rem); 87 | /* IE 9 */ 88 | -webkit-transform: translate(.5rem, -1rem); 89 | /* Safari */ 90 | transform: translate(.5rem, -1rem); 91 | /* 标准语法 */ 92 | } 93 | } 94 | 95 | @-webkit-keyframes note1 { 96 | 0% { 97 | -ms-transform: translate(0, 0); 98 | /* IE 9 */ 99 | -webkit-transform: translate(0, 0); 100 | /* Safari */ 101 | transform: translate(0, 0); 102 | /* 标准语法 */ 103 | } 104 | 100% { 105 | -ms-transform: translate(.5rem, -1rem); 106 | /* IE 9 */ 107 | -webkit-transform: translate(.5rem, -1rem); 108 | /* Safari */ 109 | transform: translate(.5rem, -1rem); 110 | /* 标准语法 */ 111 | } 112 | } 113 | 114 | 115 | /* 左边向左上运动的音符 */ 116 | 117 | @keyframes note2 { 118 | 0% { 119 | -ms-transform: translate(0, 0); 120 | /* IE 9 */ 121 | -webkit-transform: translate(0, 0); 122 | /* Safari */ 123 | transform: translate(0, 0); 124 | /* 标准语法 */ 125 | } 126 | 100% { 127 | -ms-transform: translate(-.5rem, -1rem); 128 | /* IE 9 */ 129 | -webkit-transform: translate(-.5rem, -1rem); 130 | /* Safari */ 131 | transform: translate(-.5rem, -1rem); 132 | /* 标准语法 */ 133 | } 134 | } 135 | 136 | @-webkit-keyframes note2 { 137 | 0% { 138 | -ms-transform: translate(0, 0); 139 | /* IE 9 */ 140 | -webkit-transform: translate(0, 0); 141 | /* Safari */ 142 | transform: translate(0, 0); 143 | /* 标准语法 */ 144 | } 145 | 100% { 146 | -ms-transform: translate(-.5rem, -1rem); 147 | /* IE 9 */ 148 | -webkit-transform: translate(-.5rem, -1rem); 149 | /* Safari */ 150 | transform: translate(-.5rem, -1rem); 151 | /* 标准语法 */ 152 | } 153 | } 154 | 155 | 156 | /* 第二页中间的转盘 */ 157 | 158 | @keyframes ellipse2 { 159 | 0% { 160 | -ms-transform: scale(1, 1); 161 | /* IE 9 */ 162 | -webkit-transform: scale(1, 1); 163 | /* Safari */ 164 | transform: scale(1, 1); 165 | /* 标准语法 */ 166 | } 167 | 100% { 168 | -ms-transform: scale(1.5, 1.5); 169 | /* IE 9 */ 170 | -webkit-transform: scale(1.5, 1.5); 171 | /* Safari */ 172 | transform: scale(1.5, 1.5); 173 | /* 标准语法 */ 174 | } 175 | } 176 | 177 | @-webkit-keyframes ellipse2 { 178 | 0% { 179 | -ms-transform: scale(1, 1); 180 | /* IE 9 */ 181 | -webkit-transform: scale(1, 1); 182 | /* Safari */ 183 | transform: scale(1, 1); 184 | /* 标准语法 */ 185 | } 186 | 100% { 187 | -ms-transform: scale(1.5, 1.5); 188 | /* IE 9 */ 189 | -webkit-transform: scale(1.5, 1.5); 190 | /* Safari */ 191 | transform: scale(1.5, 1.5); 192 | /* 标准语法 */ 193 | } 194 | } 195 | 196 | 197 | /* 飞出来的LIST 1 */ 198 | 199 | 200 | /* @keyframes fly { 201 | 0% { 202 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 203 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 204 | transform: translate3d(0, 0, 0) scale(1, 1); 205 | opacity: 0.2; 206 | } 207 | 20% { 208 | -ms-transform: translate3d(0, -2rem, 1rem) scale(1.3, 1.35); 209 | -webkit-transform: translate3d(0, -2rem, 1rem) scale(1.3, 1.35); 210 | transform: translate3d(0, -2rem, 2rem) scale(1.3, 1.35); 211 | opacity: 1; 212 | } 213 | 50% { 214 | -ms-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 215 | -webkit-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 216 | transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 217 | opacity: 1; 218 | } 219 | 100% { 220 | -ms-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 221 | -webkit-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 222 | transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 223 | opacity: 1; 224 | } 225 | } 226 | 227 | @-webkit-keyframes fly { 228 | 0% { 229 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 230 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 231 | transform: translate3d(0, 0, 0) scale(1, 1); 232 | opacity: 0.2; 233 | } 234 | 20% { 235 | -ms-transform: translate3d(0, -2rem, 1rem) scale(1.3, 1.35); 236 | -webkit-transform: translate3d(0, -2rem, 1rem) scale(1.3, 1.35); 237 | transform: translate3d(0, -2rem, 2rem) scale(1.3, 1.35); 238 | opacity: 1; 239 | } 240 | 50% { 241 | -ms-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 242 | -webkit-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 243 | transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 244 | opacity: 1; 245 | } 246 | 100% { 247 | -ms-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 248 | -webkit-transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 249 | transform: translate3d(0, -2.3rem, 1rem) scale(1.25, 1.2); 250 | opacity: 1; 251 | } 252 | } */ 253 | 254 | @keyframes fly { 255 | 0% { 256 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 257 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 258 | transform: translate3d(0, 0, 0) scale(1, 1); 259 | opacity: 0.7; 260 | } 261 | 25% { 262 | -ms-transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 263 | -webkit-transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 264 | transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 265 | opacity: 1; 266 | } 267 | 50% { 268 | -ms-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 269 | -webkit-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 270 | transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 271 | opacity: 1; 272 | } 273 | 100% { 274 | -ms-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 275 | -webkit-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 276 | transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 277 | opacity: 1; 278 | } 279 | } 280 | 281 | @-webkit-keyframes fly { 282 | 0% { 283 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 284 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 285 | transform: translate3d(0, 0, 0) scale(1, 1); 286 | opacity: 0.7; 287 | } 288 | 25% { 289 | -ms-transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 290 | -webkit-transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 291 | transform: translate3d(0, -1.5rem, 0) scale(1.3, 1.35); 292 | opacity: 1; 293 | } 294 | 50% { 295 | -ms-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 296 | -webkit-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 297 | transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 298 | opacity: 1; 299 | } 300 | 100% { 301 | -ms-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 302 | -webkit-transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 303 | transform: translate3d(0, -2.3rem, 0) scale(1.25, 1.2); 304 | opacity: 1; 305 | } 306 | } 307 | 308 | 309 | /* 飞出来的LIST1 2 */ 310 | 311 | @keyframes fly1 { 312 | 0% { 313 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 314 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 315 | transform: translate3d(0, 0, 0) scale(1, 1); 316 | opacity: 0.7; 317 | } 318 | 20% { 319 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 320 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 321 | transform: translate3d(0, 0, 0) scale(1, 1); 322 | opacity: 0.7; 323 | } 324 | 35% { 325 | -ms-transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 326 | -webkit-transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 327 | transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 328 | opacity: 1; 329 | } 330 | 70% { 331 | -ms-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 332 | -webkit-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 333 | transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 334 | opacity: 1; 335 | } 336 | 100% { 337 | -ms-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 338 | -webkit-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 339 | transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 340 | opacity: 1; 341 | } 342 | } 343 | 344 | @-webkit-keyframes fly1 { 345 | 0% { 346 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 347 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 348 | transform: translate3d(0, 0, 0) scale(1, 1); 349 | opacity: 0.7; 350 | } 351 | 20% { 352 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 353 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 354 | transform: translate3d(0, 0, 0) scale(1, 1); 355 | opacity: 0.7; 356 | } 357 | 35% { 358 | -ms-transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 359 | -webkit-transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 360 | transform: translate3d(0, -.75rem, 0) scale(1.3, 1.3); 361 | opacity: 1; 362 | } 363 | 70% { 364 | -ms-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 365 | -webkit-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 366 | transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 367 | opacity: 1; 368 | } 369 | 100% { 370 | -ms-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 371 | -webkit-transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 372 | transform: translate3d(0, -1.4rem, 0) scale(1.15, 1.15); 373 | opacity: 1; 374 | } 375 | } 376 | 377 | @keyframes fly2 { 378 | 0% { 379 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 380 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 381 | transform: translate3d(0, 0, 0) scale(1, 1); 382 | opacity: 0.7; 383 | } 384 | 20% { 385 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 386 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 387 | transform: translate3d(0, 0, 0) scale(1, 1); 388 | opacity: 0.8; 389 | } 390 | 70% { 391 | -ms-transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 392 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 393 | transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 394 | opacity: 1; 395 | } 396 | 95% { 397 | -ms-transform: translate3d(0, -.5rem, 0) scale(1, 1); 398 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1, 1); 399 | transform: translate3d(0, -.5rem, 0) scale(1, 1); 400 | opacity: 1; 401 | } 402 | 100% { 403 | -ms-transform: translate3d(0, -.5rem, 0) scale(1, 1); 404 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1, 1); 405 | transform: translate3d(0, -.5rem, 0) scale(1, 1); 406 | opacity: 1; 407 | } 408 | } 409 | 410 | @-webkit-keyframes fly2 { 411 | 0% { 412 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 413 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 414 | transform: translate3d(0, 0, 0) scale(1, 1); 415 | opacity: 0.7; 416 | } 417 | 20% { 418 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 419 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 420 | transform: translate3d(0, 0, 0) scale(1, 1); 421 | opacity: 0.8; 422 | } 423 | 70% { 424 | -ms-transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 425 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 426 | transform: translate3d(0, -.5rem, 0) scale(1.15, 1.2); 427 | opacity: 1; 428 | } 429 | 95% { 430 | -ms-transform: translate3d(0, -.5rem, 0) scale(1, 1); 431 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1, 1); 432 | transform: translate3d(0, -.5rem, 0) scale(1, 1); 433 | opacity: 1; 434 | } 435 | 100% { 436 | -ms-transform: translate3d(0, -.5rem, 0) scale(1, 1); 437 | -webkit-transform: translate3d(0, -.5rem, 0) scale(1, 1); 438 | transform: translate3d(0, -.5rem, 0) scale(1, 1); 439 | opacity: 1; 440 | } 441 | } 442 | 443 | 444 | /* @keyframes fly1 { 445 | 0% { 446 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 447 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 448 | transform: translate3d(0, 0, 0) scale(1, 1); 449 | opacity: 0.2; 450 | } 451 | 10% { 452 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 453 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 454 | transform: translate3d(0, 0, 0) scale(1, 1); 455 | opacity: 0.8; 456 | } 457 | 20% { 458 | -ms-transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 459 | -webkit-transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 460 | transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 461 | opacity: 1; 462 | } 463 | 20% { 464 | -ms-transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 465 | -webkit-transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 466 | transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 467 | opacity: 1; 468 | } 469 | 85% { 470 | -ms-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 471 | -webkit-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 472 | transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 473 | opacity: 1; 474 | } 475 | 100% { 476 | -ms-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 477 | -webkit-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 478 | transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 479 | opacity: 1; 480 | } 481 | } 482 | 483 | @-webkit-keyframes fly1 { 484 | 0% { 485 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 486 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 487 | transform: translate3d(0, 0, 0) scale(1, 1); 488 | opacity: 0.2; 489 | } 490 | 10% { 491 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 492 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 493 | transform: translate3d(0, 0, 0) scale(1, 1); 494 | opacity: 0.8; 495 | } 496 | 20% { 497 | -ms-transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 498 | -webkit-transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 499 | transform: translate3d(0, -1.2rem, 1rem) scale(1.3, 1.3); 500 | opacity: 1; 501 | } 502 | 20% { 503 | -ms-transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 504 | -webkit-transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 505 | transform: translate3d(0, -1.3rem, 1rem) scale(1.3, 1.3); 506 | opacity: 1; 507 | } 508 | 85% { 509 | -ms-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 510 | -webkit-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 511 | transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 512 | opacity: 1; 513 | } 514 | 100% { 515 | -ms-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 516 | -webkit-transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 517 | transform: translate3d(0, -1.4rem, 1rem) scale(1.15, 1.15); 518 | opacity: 1; 519 | } 520 | } */ 521 | 522 | 523 | /* 飞出来的LIST1 3 */ 524 | 525 | 526 | /* @keyframes fly2 { 527 | 0% { 528 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 529 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 530 | transform: translate3d(0, 0, 0) scale(1, 1); 531 | opacity: 0.2; 532 | } 533 | 10% { 534 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 535 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 536 | transform: translate3d(0, 0, 0) scale(1, 1); 537 | opacity: 0.2; 538 | } 539 | 20% { 540 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 541 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 542 | transform: translate3d(0, 0, 0) scale(1, 1); 543 | opacity: 0.2; 544 | } 545 | 50% { 546 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 547 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 548 | transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 549 | opacity: 1; 550 | } 551 | 95% { 552 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 553 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 554 | transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 555 | opacity: 1; 556 | } 557 | 100% { 558 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 559 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 560 | transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 561 | opacity: 1; 562 | } 563 | } 564 | 565 | @-webkit-keyframes fly2 { 566 | 0% { 567 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 568 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 569 | transform: translate3d(0, 0, 0) scale(1, 1); 570 | opacity: 0.2; 571 | } 572 | 10% { 573 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 574 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 575 | transform: translate3d(0, 0, 0) scale(1, 1); 576 | opacity: 0.2; 577 | } 578 | 20% { 579 | -ms-transform: translate3d(0, 0, 0) scale(1, 1); 580 | -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 581 | transform: translate3d(0, 0, 0) scale(1, 1); 582 | opacity: 0.2; 583 | } 584 | 50% { 585 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 586 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 587 | transform: translate3d(0, -.5rem, 1rem) scale(1.15, 1.2); 588 | opacity: 1; 589 | } 590 | 95% { 591 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 592 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 593 | transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 594 | opacity: 1; 595 | } 596 | 100% { 597 | -ms-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 598 | -webkit-transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 599 | transform: translate3d(0, -.5rem, 1rem) scale(1, 1); 600 | opacity: 1; 601 | } 602 | } */ 603 | 604 | 605 | /* 第二页中间往右上角运动的动画 */ 606 | 607 | @keyframes righttop { 608 | 0% { 609 | -ms-transform: translate(0, 0) scale(1, 1); 610 | /* IE 9 */ 611 | -webkit-transform: translate(0, 0) scale(1, 1); 612 | /* Safari */ 613 | transform: translate(0, 0) scale(1, 1); 614 | /* 标准语法 */ 615 | } 616 | 12% { 617 | -ms-transform: translate(0, 0) scale(1, 1); 618 | /* IE 9 */ 619 | -webkit-transform: translate(0, 0) scale(1, 1); 620 | /* Safari */ 621 | transform: translate(0, 0) scale(1, 1); 622 | /* 标准语法 */ 623 | } 624 | 30% { 625 | -ms-transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 626 | /* IE 9 */ 627 | -webkit-transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 628 | /* Safari */ 629 | transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 630 | /* 标准语法 */ 631 | } 632 | 100% { 633 | -ms-transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 634 | /* IE 9 */ 635 | -webkit-transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 636 | /* Safari */ 637 | transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 638 | /* 标准语法 */ 639 | } 640 | } 641 | 642 | @-webkit-keyframes righttop { 643 | 0% { 644 | -ms-transform: translate(0, 0) scale(1, 1); 645 | /* IE 9 */ 646 | -webkit-transform: translate(0, 0) scale(1, 1); 647 | /* Safari */ 648 | transform: translate(0, 0) scale(1, 1); 649 | /* 标准语法 */ 650 | } 651 | 12% { 652 | -ms-transform: translate(0, 0) scale(1, 1); 653 | /* IE 9 */ 654 | -webkit-transform: translate(0, 0) scale(1, 1); 655 | /* Safari */ 656 | transform: translate(0, 0) scale(1, 1); 657 | /* 标准语法 */ 658 | } 659 | 30% { 660 | -ms-transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 661 | /* IE 9 */ 662 | -webkit-transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 663 | /* Safari */ 664 | transform: translate(.6rem, -.9rem) scale(1.5, 1.5); 665 | /* 标准语法 */ 666 | } 667 | 100% { 668 | -ms-transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 669 | /* IE 9 */ 670 | -webkit-transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 671 | /* Safari */ 672 | transform: translate(1rem, -1.2rem) scale(1.8, 1.8); 673 | /* 标准语法 */ 674 | } 675 | } 676 | 677 | 678 | /* 第二页中间往左上角运动的动画 */ 679 | 680 | @keyframes lefttop { 681 | 0% { 682 | -ms-transform: translate(0, 0) scale(1, 1); 683 | /* IE 9 */ 684 | -webkit-transform: translate(0, 0) scale(1, 1); 685 | /* Safari */ 686 | transform: translate(0, 0) scale(1, 1); 687 | /* 标准语法 */ 688 | } 689 | 5% { 690 | -ms-transform: translate(0, 0) scale(1, 1); 691 | /* IE 9 */ 692 | -webkit-transform: translate(0, 0) scale(1, 1); 693 | /* Safari */ 694 | transform: translate(0, 0) scale(1, 1); 695 | /* 标准语法 */ 696 | } 697 | 30% { 698 | -ms-transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 699 | /* IE 9 */ 700 | -webkit-transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 701 | /* Safari */ 702 | transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 703 | /* 标准语法 */ 704 | } 705 | 100% { 706 | -ms-transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 707 | /* IE 9 */ 708 | -webkit-transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 709 | /* Safari */ 710 | transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 711 | /* 标准语法 */ 712 | } 713 | } 714 | 715 | @-webkit-keyframes lefttop { 716 | 0% { 717 | -ms-transform: translate(0, 0) scale(1, 1); 718 | /* IE 9 */ 719 | -webkit-transform: translate(0, 0) scale(1, 1); 720 | /* Safari */ 721 | transform: translate(0, 0) scale(1, 1); 722 | /* 标准语法 */ 723 | } 724 | 5% { 725 | -ms-transform: translate(0, 0) scale(1, 1); 726 | /* IE 9 */ 727 | -webkit-transform: translate(0, 0) scale(1, 1); 728 | /* Safari */ 729 | transform: translate(0, 0) scale(1, 1); 730 | /* 标准语法 */ 731 | } 732 | 30% { 733 | -ms-transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 734 | /* IE 9 */ 735 | -webkit-transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 736 | /* Safari */ 737 | transform: translate(-.1rem, -1.2rem) scale(1.5, 1.5); 738 | /* 标准语法 */ 739 | } 740 | 100% { 741 | -ms-transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 742 | /* IE 9 */ 743 | -webkit-transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 744 | /* Safari */ 745 | transform: translate(-.15rem, -1.85rem) scale(1.8, 1.8); 746 | /* 标准语法 */ 747 | } 748 | } 749 | 750 | @keyframes lefttop2 { 751 | 0% { 752 | -ms-transform: translate(0, 0) scale(1, 1); 753 | /* IE 9 */ 754 | -webkit-transform: translate(0, 0) scale(1, 1); 755 | transform: translate(0, 0) scale(1, 1); 756 | } 757 | 10% { 758 | -ms-transform: translate(0, 0) scale(1, 1); 759 | /* IE 9 */ 760 | -webkit-transform: translate(0, 0) scale(1, 1); 761 | /* Safari */ 762 | transform: translate(0, 0) scale(1, 1); 763 | /* 标准语法 */ 764 | } 765 | 30% { 766 | -ms-transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 767 | /* IE 9 */ 768 | -webkit-transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 769 | /* Safari */ 770 | transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 771 | } 772 | 100% { 773 | -ms-transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 774 | /* IE 9 */ 775 | -webkit-transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 776 | /* Safari */ 777 | transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 778 | /* 标准语法 */ 779 | } 780 | } 781 | 782 | @-webkit-keyframes lefttop2 { 783 | 0% { 784 | -ms-transform: translate(0, 0) scale(1, 1); 785 | /* IE 9 */ 786 | -webkit-transform: translate(0, 0) scale(1, 1); 787 | transform: translate(0, 0) scale(1, 1); 788 | } 789 | 10% { 790 | -ms-transform: translate(0, 0) scale(1, 1); 791 | /* IE 9 */ 792 | -webkit-transform: translate(0, 0) scale(1, 1); 793 | /* Safari */ 794 | transform: translate(0, 0) scale(1, 1); 795 | /* 标准语法 */ 796 | } 797 | 30% { 798 | -ms-transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 799 | /* IE 9 */ 800 | -webkit-transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 801 | /* Safari */ 802 | transform: translate(-.25rem, -.4rem) scale(1.8, 1.8); 803 | } 804 | 100% { 805 | -ms-transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 806 | /* IE 9 */ 807 | -webkit-transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 808 | /* Safari */ 809 | transform: translate(-.3rem, -.75rem) scale(1.8, 1.8); 810 | /* 标准语法 */ 811 | } 812 | } 813 | 814 | 815 | /* 第二页的星星 */ 816 | 817 | @keyframes polygon { 818 | 0% { 819 | -ms-transform: scale(1, 1); 820 | /* IE 9 */ 821 | -webkit-transform: scale(1, 1); 822 | /* Safari */ 823 | transform: scale(1, 1); 824 | /* 标准语法 */ 825 | opacity: 1; 826 | } 827 | 50% { 828 | -ms-transform: scale(1.5, 1.5); 829 | /* IE 9 */ 830 | -webkit-transform: scale(1.5, 1.5); 831 | /* Safari */ 832 | transform: scale(1.5, 1.5); 833 | /* 标准语法 */ 834 | opacity: 0.5; 835 | } 836 | 100% { 837 | -ms-transform: scale(1, 1); 838 | /* IE 9 */ 839 | -webkit-transform: scale(1, 1); 840 | /* Safari */ 841 | transform: scale(1, 1); 842 | /* 标准语法 */ 843 | opacity: 1; 844 | } 845 | } 846 | 847 | @-webkit-keyframes polygon { 848 | 0% { 849 | -ms-transform: scale(1, 1); 850 | /* IE 9 */ 851 | -webkit-transform: scale(1, 1); 852 | /* Safari */ 853 | transform: scale(1, 1); 854 | /* 标准语法 */ 855 | opacity: 1; 856 | } 857 | 50% { 858 | -ms-transform: scale(1.5, 1.5); 859 | /* IE 9 */ 860 | -webkit-transform: scale(1.5, 1.5); 861 | /* Safari */ 862 | transform: scale(1.5, 1.5); 863 | /* 标准语法 */ 864 | opacity: 0.5; 865 | } 866 | 100% { 867 | -ms-transform: scale(1, 1); 868 | /* IE 9 */ 869 | -webkit-transform: scale(1, 1); 870 | /* Safari */ 871 | transform: scale(1, 1); 872 | /* 标准语法 */ 873 | opacity: 1; 874 | } 875 | } 876 | 877 | 878 | /* 第二页左上角音乐的本子 */ 879 | 880 | @keyframes benzi { 881 | 0% { 882 | -ms-transform: translate(0, 0); 883 | /* IE 9 */ 884 | -webkit-transform: translate(0, 0); 885 | /* Safari */ 886 | transform: translate(0, 0); 887 | /* 标准语法 */ 888 | opacity: 1; 889 | } 890 | 30% { 891 | -ms-transform: translate(-0.1rem, -.1rem); 892 | /* IE 9 */ 893 | -webkit-transform: translate(-0.1rem, -.1rem); 894 | /* Safari */ 895 | transform: translate(-0.1rem, -.1rem); 896 | /* 标准语法 */ 897 | opacity: 1; 898 | } 899 | 100% { 900 | -ms-transform: translate(-.7rem, -1rem); 901 | /* IE 9 */ 902 | -webkit-transform: translate(-.7rem, -1rem); 903 | /* Safari */ 904 | transform: translate(-.7rem, -1rem); 905 | /* 标准语法 */ 906 | opacity: 0.3; 907 | } 908 | } 909 | 910 | @-webkit-keyframes benzi { 911 | 0% { 912 | -ms-transform: translate(0, 0); 913 | /* IE 9 */ 914 | -webkit-transform: translate(0, 0); 915 | /* Safari */ 916 | transform: translate(0, 0); 917 | /* 标准语法 */ 918 | opacity: 1; 919 | } 920 | 30% { 921 | -ms-transform: translate(-0.1rem, -.1rem); 922 | /* IE 9 */ 923 | -webkit-transform: translate(-0.1rem, -.1rem); 924 | /* Safari */ 925 | transform: translate(-0.1rem, -.1rem); 926 | /* 标准语法 */ 927 | opacity: 1; 928 | } 929 | 100% { 930 | -ms-transform: translate(-.7rem, -1rem); 931 | /* IE 9 */ 932 | -webkit-transform: translate(-.7rem, -1rem); 933 | /* Safari */ 934 | transform: translate(-.7rem, -1rem); 935 | /* 标准语法 */ 936 | opacity: 0.3; 937 | } 938 | } 939 | 940 | 941 | /* 第二页右上角飞起来的两张纸 */ 942 | 943 | @keyframes righttops { 944 | 0% { 945 | -ms-transform: translate(0, 0); 946 | /* IE 9 */ 947 | -webkit-transform: translate(0, 0); 948 | /* Safari */ 949 | transform: translate(0, 0); 950 | /* 标准语法 */ 951 | opacity: 1; 952 | } 953 | 20% { 954 | -ms-transform: translate(0.1rem, -.2rem); 955 | /* IE 9 */ 956 | -webkit-transform: translate(0.1rem, -.2rem); 957 | /* Safari */ 958 | transform: translate(0.1rem, -.2rem); 959 | /* 标准语法 */ 960 | opacity: 1; 961 | } 962 | 70% { 963 | -ms-transform: translate(.7rem, -1rem); 964 | /* IE 9 */ 965 | -webkit-transform: translate(.7rem, -1rem); 966 | /* Safari */ 967 | transform: translate(.7rem, -1rem); 968 | /* 标准语法 */ 969 | opacity: 0.3; 970 | } 971 | 100% { 972 | -ms-transform: translate(.7rem, -1rem); 973 | /* IE 9 */ 974 | -webkit-transform: translate(.7rem, -1rem); 975 | /* Safari */ 976 | transform: translate(.7rem, -1rem); 977 | /* 标准语法 */ 978 | opacity: 0.3; 979 | } 980 | } 981 | 982 | @-webkit-keyframes righttops { 983 | 0% { 984 | -ms-transform: translate(0, 0); 985 | /* IE 9 */ 986 | -webkit-transform: translate(0, 0); 987 | /* Safari */ 988 | transform: translate(0, 0); 989 | /* 标准语法 */ 990 | opacity: 1; 991 | } 992 | 20% { 993 | -ms-transform: translate(0.1rem, -.2rem); 994 | /* IE 9 */ 995 | -webkit-transform: translate(0.1rem, -.2rem); 996 | /* Safari */ 997 | transform: translate(0.1rem, -.2rem); 998 | /* 标准语法 */ 999 | opacity: 1; 1000 | } 1001 | 70% { 1002 | -ms-transform: translate(.7rem, -1rem); 1003 | /* IE 9 */ 1004 | -webkit-transform: translate(.7rem, -1rem); 1005 | /* Safari */ 1006 | transform: translate(.7rem, -1rem); 1007 | /* 标准语法 */ 1008 | opacity: 0.3; 1009 | } 1010 | 100% { 1011 | -ms-transform: translate(.7rem, -1rem); 1012 | /* IE 9 */ 1013 | -webkit-transform: translate(.7rem, -1rem); 1014 | /* Safari */ 1015 | transform: translate(.7rem, -1rem); 1016 | /* 标准语法 */ 1017 | opacity: 0.3; 1018 | } 1019 | } 1020 | 1021 | 1022 | /* 第三页的赞 */ 1023 | 1024 | @keyframes good { 1025 | 0% { 1026 | -ms-transform: translate(0, 0); 1027 | /* IE 9 */ 1028 | -webkit-transform: translate(0, 0); 1029 | /* Safari */ 1030 | transform: translate(0, 0); 1031 | /* 标准语法 */ 1032 | opacity: 1; 1033 | } 1034 | 40% { 1035 | -ms-transform: translate(0, -1.8rem); 1036 | /* IE 9 */ 1037 | -webkit-transform: translate(0, -1.8rem); 1038 | /* Safari */ 1039 | transform: translate(0, -1.8rem); 1040 | /* 标准语法 */ 1041 | opacity: 0; 1042 | } 1043 | 100% { 1044 | -ms-transform: translate(0, -1.8rem); 1045 | /* IE 9 */ 1046 | -webkit-transform: translate(0, -1.8rem); 1047 | /* Safari */ 1048 | transform: translate(0, -1.8rem); 1049 | /* 标准语法 */ 1050 | opacity: 0; 1051 | } 1052 | } 1053 | 1054 | @-webkit-keyframes good { 1055 | 0% { 1056 | -ms-transform: translate(0, 0); 1057 | /* IE 9 */ 1058 | -webkit-transform: translate(0, 0); 1059 | /* Safari */ 1060 | transform: translate(0, 0); 1061 | /* 标准语法 */ 1062 | opacity: 1; 1063 | } 1064 | 40% { 1065 | -ms-transform: translate(0, -1.8rem); 1066 | /* IE 9 */ 1067 | -webkit-transform: translate(0, -1.8rem); 1068 | /* Safari */ 1069 | transform: translate(0, -1.8rem); 1070 | /* 标准语法 */ 1071 | opacity: 0; 1072 | } 1073 | 100% { 1074 | -ms-transform: translate(0, -1.8rem); 1075 | /* IE 9 */ 1076 | -webkit-transform: translate(0, -1.8rem); 1077 | /* Safari */ 1078 | transform: translate(0, -1.8rem); 1079 | /* 标准语法 */ 1080 | opacity: 0; 1081 | } 1082 | } 1083 | 1084 | 1085 | /* 第三页第三个LIST */ 1086 | 1087 | @keyframes list2 { 1088 | 0% { 1089 | opacity: 0; 1090 | } 1091 | 40% { 1092 | opacity: 1; 1093 | } 1094 | 100% { 1095 | opacity: 1; 1096 | } 1097 | } 1098 | 1099 | @-webkit-keyframes list2 { 1100 | 0% { 1101 | opacity: 0; 1102 | } 1103 | 40% { 1104 | opacity: 1; 1105 | } 1106 | 100% { 1107 | opacity: 1; 1108 | } 1109 | } 1110 | 1111 | 1112 | /* 第三页模糊的圆 */ 1113 | 1114 | @keyframes circular2 { 1115 | 0% { 1116 | -ms-transform: scale(1, 1); 1117 | /* IE 9 */ 1118 | -webkit-transform: scale(1, 1); 1119 | /* Safari */ 1120 | transform: scale(1, 1); 1121 | /* 标准语法 */ 1122 | } 1123 | 100% { 1124 | -ms-transform: scale(2, 2); 1125 | /* IE 9 */ 1126 | -webkit-transform: scale(2, 2); 1127 | /* Safari */ 1128 | transform: scale(2, 2); 1129 | /* 标准语法 */ 1130 | } 1131 | } 1132 | 1133 | @-webkit-keyframes circular2 { 1134 | 0% { 1135 | -ms-transform: scale(1, 1); 1136 | /* IE 9 */ 1137 | -webkit-transform: scale(1, 1); 1138 | /* Safari */ 1139 | transform: scale(1, 1); 1140 | /* 标准语法 */ 1141 | } 1142 | 100% { 1143 | -ms-transform: scale(2, 2); 1144 | /* IE 9 */ 1145 | -webkit-transform: scale(2, 2); 1146 | /* Safari */ 1147 | transform: scale(2, 2); 1148 | /* 标准语法 */ 1149 | } 1150 | } 1151 | 1152 | 1153 | /* 放大的统一动画 */ 1154 | 1155 | @keyframes ellipse { 1156 | 0% { 1157 | /* IE 9 */ 1158 | -webkit-transform: scale(1, 1); 1159 | -ms-transform: scale(1, 1); 1160 | /* Safari */ 1161 | transform: scale(1, 1); 1162 | /* 标准语法 */ 1163 | } 1164 | 100% { 1165 | /* IE 9 */ 1166 | -webkit-transform: scale(1.5, 1.5); 1167 | -ms-transform: scale(1.5, 1.5); 1168 | /* Safari */ 1169 | transform: scale(1.5, 1.5); 1170 | /* 标准语法 */ 1171 | } 1172 | } 1173 | 1174 | @-webkit-keyframes ellipse { 1175 | 0% { 1176 | /* IE 9 */ 1177 | -webkit-transform: scale(1, 1); 1178 | -ms-transform: scale(1, 1); 1179 | /* Safari */ 1180 | transform: scale(1, 1); 1181 | /* 标准语法 */ 1182 | } 1183 | 100% { 1184 | /* IE 9 */ 1185 | -webkit-transform: scale(1.5, 1.5); 1186 | -ms-transform: scale(1.5, 1.5); 1187 | /* Safari */ 1188 | transform: scale(1.5, 1.5); 1189 | /* 标准语法 */ 1190 | } 1191 | } 1192 | 1193 | 1194 | /* 手机上的灯光效果 */ 1195 | 1196 | @keyframes ccc { 1197 | 0% { 1198 | height: .2rem 1199 | } 1200 | 20% { 1201 | height: 1.8rem 1202 | } 1203 | 100% { 1204 | height: 1.8rem 1205 | } 1206 | } 1207 | 1208 | @-webkit-keyframes ccc { 1209 | 0% { 1210 | height: .2rem 1211 | } 1212 | 20% { 1213 | height: 1.8rem 1214 | } 1215 | 100% { 1216 | height: 1.8rem 1217 | } 1218 | } 1219 | 1220 | 1221 | /* 火箭的烟雾 */ 1222 | 1223 | @keyframes rocketflywrap { 1224 | 0% { 1225 | height: 0rem 1226 | } 1227 | 40% { 1228 | height: 0rem 1229 | } 1230 | 71% { 1231 | height: 6.03rem 1232 | } 1233 | 100% { 1234 | height: 6.03rem 1235 | } 1236 | } 1237 | 1238 | @-webkit-keyframes rocketflywrap { 1239 | 0% { 1240 | height: 0rem 1241 | } 1242 | 40% { 1243 | height: 0rem 1244 | } 1245 | 71% { 1246 | height: 6.03rem 1247 | } 1248 | 100% { 1249 | height: 6.03rem 1250 | } 1251 | } 1252 | 1253 | 1254 | /* 火箭 */ 1255 | 1256 | @keyframes rocket3 { 1257 | 0% { 1258 | -ms-transform: rotate(45deg); 1259 | /* IE 9 */ 1260 | -webkit-transform: rotate(45deg); 1261 | /* Safari */ 1262 | transform: rotate(45deg); 1263 | /* 标准语法 */ 1264 | } 1265 | 40% { 1266 | -ms-transform: rotate(45deg); 1267 | /* IE 9 */ 1268 | -webkit-transform: rotate(45deg); 1269 | /* Safari */ 1270 | transform: rotate(45deg); 1271 | /* 标准语法 */ 1272 | } 1273 | 70% { 1274 | -ms-transform: rotate(-65deg); 1275 | /* IE 9 */ 1276 | -webkit-transform: rotate(-65deg); 1277 | /* Safari */ 1278 | transform: rotate(-65deg); 1279 | /* 标准语法 */ 1280 | } 1281 | 100% { 1282 | -ms-transform: rotate(-65deg); 1283 | /* IE 9 */ 1284 | -webkit-transform: rotate(-65deg); 1285 | /* Safari */ 1286 | transform: rotate(-65deg); 1287 | /* 标准语法 */ 1288 | } 1289 | } 1290 | 1291 | @-webkit-keyframes rocket3 { 1292 | 0% { 1293 | -ms-transform: rotate(45deg); 1294 | /* IE 9 */ 1295 | -webkit-transform: rotate(45deg); 1296 | /* Safari */ 1297 | transform: rotate(45deg); 1298 | /* 标准语法 */ 1299 | } 1300 | 40% { 1301 | -ms-transform: rotate(45deg); 1302 | /* IE 9 */ 1303 | -webkit-transform: rotate(45deg); 1304 | /* Safari */ 1305 | transform: rotate(45deg); 1306 | /* 标准语法 */ 1307 | } 1308 | 70% { 1309 | -ms-transform: rotate(-65deg); 1310 | /* IE 9 */ 1311 | -webkit-transform: rotate(-65deg); 1312 | /* Safari */ 1313 | transform: rotate(-65deg); 1314 | /* 标准语法 */ 1315 | } 1316 | 100% { 1317 | -ms-transform: rotate(-65deg); 1318 | /* IE 9 */ 1319 | -webkit-transform: rotate(-65deg); 1320 | /* Safari */ 1321 | transform: rotate(-65deg); 1322 | /* 标准语法 */ 1323 | } 1324 | } 1325 | 1326 | 1327 | /* 五线谱 */ 1328 | 1329 | @keyframes wuimg { 1330 | 0% { 1331 | width: 1rem 1332 | } 1333 | 50% { 1334 | width: 2.52rem 1335 | } 1336 | 100% { 1337 | width: 2.52rem 1338 | } 1339 | } 1340 | 1341 | @-webkit-keyframes wuimg { 1342 | 0% { 1343 | width: 1rem 1344 | } 1345 | 50% { 1346 | width: 2.52rem 1347 | } 1348 | 100% { 1349 | width: 2.52rem 1350 | } 1351 | } 1352 | 1353 | 1354 | /* 五线谱上的音符 */ 1355 | 1356 | @keyframes yinfu { 1357 | 0% { 1358 | -ms-transform: translate(0, 0); 1359 | /* IE 9 */ 1360 | -webkit-transform: translate(0, 0); 1361 | /* Safari */ 1362 | transform: translate(0, 0); 1363 | /* 标准语法 */ 1364 | } 1365 | 50% { 1366 | -ms-transform: translate(0, 0); 1367 | /* IE 9 */ 1368 | -webkit-transform: translate(0, 0); 1369 | /* Safari */ 1370 | transform: translate(0, 0); 1371 | /* 标准语法 */ 1372 | } 1373 | 55% { 1374 | -ms-transform: translate(-.5rem, -.2rem); 1375 | /* IE 9 */ 1376 | -webkit-transform: translate(-.5rem, -.2rem); 1377 | /* Safari */ 1378 | transform: translate(-.5rem, -.2rem); 1379 | /* 标准语法 */ 1380 | } 1381 | 60% { 1382 | -ms-transform: translate(-.8rem, -.4rem); 1383 | /* IE 9 */ 1384 | -webkit-transform: translate(-.8rem, -.4rem); 1385 | /* Safari */ 1386 | transform: translate(-.8rem, -.4rem); 1387 | /* 标准语法 */ 1388 | } 1389 | 65% { 1390 | -ms-transform: translate(-1rem, -.6rem); 1391 | /* IE 9 */ 1392 | -webkit-transform: translate(-1rem, -.6rem); 1393 | /* Safari */ 1394 | transform: translate(-1rem, -.6rem); 1395 | /* 标准语法 */ 1396 | } 1397 | 70% { 1398 | -ms-transform: translate(-1.1rem, -.8rem); 1399 | /* IE 9 */ 1400 | -webkit-transform: translate(-1.1rem, -.8rem); 1401 | /* Safari */ 1402 | transform: translate(-1.1rem, -.8rem); 1403 | /* 标准语法 */ 1404 | } 1405 | 75% { 1406 | -ms-transform: translate(-1.2rem, -.9rem); 1407 | /* IE 9 */ 1408 | -webkit-transform: translate(-1.2rem, -.9rem); 1409 | /* Safari */ 1410 | transform: translate(-1.2rem, -.9rem); 1411 | /* 标准语法 */ 1412 | } 1413 | 80% { 1414 | -ms-transform: translate(-1.3rem, -1.1rem); 1415 | /* IE 9 */ 1416 | -webkit-transform: translate(-1.3rem, -1.1rem); 1417 | /* Safari */ 1418 | transform: translate(-1.3rem, -1.1rem); 1419 | /* 标准语法 */ 1420 | } 1421 | 85% { 1422 | -ms-transform: translate(-1.4rem, -1.2rem); 1423 | /* IE 9 */ 1424 | -webkit-transform: translate(-1.4rem, -1.2rem); 1425 | /* Safari */ 1426 | transform: translate(-1.4rem, -1.2rem); 1427 | /* 标准语法 */ 1428 | } 1429 | 90% { 1430 | -ms-transform: translate(-1.5rem, -1.3rem); 1431 | /* IE 9 */ 1432 | -webkit-transform: translate(-1.5rem, -1.3rem); 1433 | /* Safari */ 1434 | transform: translate(-1.5rem, -1.3rem); 1435 | /* 标准语法 */ 1436 | } 1437 | 95% { 1438 | -ms-transform: translate(-1.6rem, -1.3rem); 1439 | /* IE 9 */ 1440 | -webkit-transform: translate(-1.6rem, -1.3rem); 1441 | /* Safari */ 1442 | transform: translate(-1.6rem, -1.3rem); 1443 | /* 标准语法 */ 1444 | } 1445 | 100% { 1446 | -ms-transform: translate(-1.7rem, -1.3rem); 1447 | /* IE 9 */ 1448 | -webkit-transform: translate(-1.7rem, -1.3rem); 1449 | /* Safari */ 1450 | transform: translate(-1.7rem, -1.3rem); 1451 | /* 标准语法 */ 1452 | } 1453 | 100% { 1454 | -ms-transform: translate(-2rem, -1.3rem); 1455 | /* IE 9 */ 1456 | -webkit-transform: translate(-2rem, -1.3rem); 1457 | /* Safari */ 1458 | transform: translate(-2rem, -1.3rem); 1459 | /* 标准语法 */ 1460 | } 1461 | } 1462 | 1463 | @-webkit-keyframes yinfu { 1464 | 0% { 1465 | -ms-transform: translate(0, 0); 1466 | /* IE 9 */ 1467 | -webkit-transform: translate(0, 0); 1468 | /* Safari */ 1469 | transform: translate(0, 0); 1470 | /* 标准语法 */ 1471 | } 1472 | 50% { 1473 | -ms-transform: translate(0, 0); 1474 | /* IE 9 */ 1475 | -webkit-transform: translate(0, 0); 1476 | /* Safari */ 1477 | transform: translate(0, 0); 1478 | /* 标准语法 */ 1479 | } 1480 | 55% { 1481 | -ms-transform: translate(-.5rem, -.2rem); 1482 | /* IE 9 */ 1483 | -webkit-transform: translate(-.5rem, -.2rem); 1484 | /* Safari */ 1485 | transform: translate(-.5rem, -.2rem); 1486 | /* 标准语法 */ 1487 | } 1488 | 60% { 1489 | -ms-transform: translate(-.8rem, -.4rem); 1490 | /* IE 9 */ 1491 | -webkit-transform: translate(-.8rem, -.4rem); 1492 | /* Safari */ 1493 | transform: translate(-.8rem, -.4rem); 1494 | /* 标准语法 */ 1495 | } 1496 | 65% { 1497 | -ms-transform: translate(-1rem, -.6rem); 1498 | /* IE 9 */ 1499 | -webkit-transform: translate(-1rem, -.6rem); 1500 | /* Safari */ 1501 | transform: translate(-1rem, -.6rem); 1502 | /* 标准语法 */ 1503 | } 1504 | 70% { 1505 | -ms-transform: translate(-1.1rem, -.8rem); 1506 | -webkit-transform: translate(-1.1rem, -.8rem); 1507 | transform: translate(-1.1rem, -.8rem); 1508 | } 1509 | 75% { 1510 | -ms-transform: translate(-1.2rem, -.9rem); 1511 | -webkit-transform: translate(-1.2rem, -.9rem); 1512 | transform: translate(-1.2rem, -.9rem); 1513 | } 1514 | 80% { 1515 | -ms-transform: translate(-1.3rem, -1.1rem); 1516 | -webkit-transform: translate(-1.3rem, -1.1rem); 1517 | transform: translate(-1.3rem, -1.1rem); 1518 | } 1519 | 85% { 1520 | -ms-transform: translate(-1.4rem, -1.2rem); 1521 | -webkit-transform: translate(-1.4rem, -1.2rem); 1522 | transform: translate(-1.4rem, -1.2rem); 1523 | } 1524 | 90% { 1525 | -ms-transform: translate(-1.5rem, -1.3rem); 1526 | -webkit-transform: translate(-1.5rem, -1.3rem); 1527 | transform: translate(-1.5rem, -1.3rem); 1528 | } 1529 | 95% { 1530 | -ms-transform: translate(-1.6rem, -1.3rem); 1531 | -webkit-transform: translate(-1.6rem, -1.3rem); 1532 | transform: translate(-1.6rem, -1.3rem); 1533 | } 1534 | 100% { 1535 | -ms-transform: translate(-1.7rem, -1.3rem); 1536 | -webkit-transform: translate(-1.7rem, -1.3rem); 1537 | transform: translate(-1.7rem, -1.3rem); 1538 | } 1539 | 100% { 1540 | -ms-transform: translate(-2rem, -1.3rem); 1541 | -webkit-transform: translate(-2rem, -1.3rem); 1542 | transform: translate(-2rem, -1.3rem); 1543 | } 1544 | } -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /***********************通用基础样式************************/ 2 | 3 | 4 | /*目前要兼容的浏览器的hack方法*/ 5 | 6 | 7 | /*样式初始化*/ 8 | 9 | 10 | /*屏幕分辨率与字体大小比值为7.5*/ 11 | 12 | @media only screen and (min-width: 1025px), 13 | only screen and (min-device-width:1025px) { 14 | html { 15 | font-size: 50px; 16 | } 17 | } 18 | 19 | @media only screen and (max-width: 1024px), 20 | only screen and (max-device-width:1024px) { 21 | html { 22 | font-size: 136.5333px; 23 | } 24 | } 25 | 26 | @media only screen and (max-width: 960px), 27 | only screen and (max-device-width:960px) { 28 | html { 29 | font-size: 128px; 30 | } 31 | } 32 | 33 | @media only screen and (max-width: 800px), 34 | only screen and (max-device-width:800px) { 35 | html { 36 | font-size: 106.6667px; 37 | } 38 | } 39 | 40 | @media only screen and (max-width: 768px), 41 | only screen and (max-device-width:768px) { 42 | html { 43 | font-size: 102.4px; 44 | } 45 | } 46 | 47 | @media only screen and (max-width: 760px), 48 | only screen and (max-device-width:760px) { 49 | html { 50 | font-size: 101.3333px; 51 | } 52 | } 53 | 54 | @media only screen and (max-width: 720px), 55 | only screen and (max-device-width:720px) { 56 | html { 57 | font-size: 96px; 58 | } 59 | } 60 | 61 | @media only screen and (max-width: 680px), 62 | only screen and (max-device-width:680px) { 63 | html { 64 | font-size: 90.6667px; 65 | } 66 | } 67 | 68 | @media only screen and (max-width: 640px), 69 | only screen and (max-device-width:640px) { 70 | html { 71 | font-size: 85.3333px; 72 | } 73 | } 74 | 75 | @media only screen and (max-width: 600px), 76 | only screen and (max-device-width:600px) { 77 | html { 78 | font-size: 80px; 79 | } 80 | } 81 | 82 | @media only screen and (max-width: 560px), 83 | only screen and (max-device-width:560px) { 84 | html { 85 | font-size: 74.6667px; 86 | } 87 | } 88 | 89 | @media only screen and (max-width: 520px), 90 | only screen and (max-device-width:520px) { 91 | html { 92 | font-size: 69.3333px; 93 | } 94 | } 95 | 96 | @media only screen and (max-width: 480px), 97 | only screen and (max-device-width:480px) { 98 | html { 99 | font-size: 64px; 100 | } 101 | } 102 | 103 | @media only screen and (max-width: 414px), 104 | only screen and (max-device-width:414px) { 105 | html { 106 | font-size: 55.2px; 107 | } 108 | } 109 | 110 | @media only screen and (max-width: 400px), 111 | only screen and (max-device-width:400px) { 112 | html { 113 | font-size: 53.3333px; 114 | } 115 | } 116 | 117 | @media only screen and (max-width: 375px), 118 | only screen and (max-device-width:375px) { 119 | html { 120 | font-size: 50px; 121 | } 122 | } 123 | 124 | @media only screen and (max-width: 360px), 125 | only screen and (max-device-width:360px) { 126 | html { 127 | font-size: 48px; 128 | } 129 | } 130 | 131 | @media only screen and (max-width: 320px), 132 | only screen and (max-device-width:320px) { 133 | html { 134 | font-size: 42.6667px; 135 | } 136 | } 137 | 138 | * { 139 | -webkit-box-sizing: border-box; 140 | -moz-box-sizing: border-box; 141 | -ms-box-sizing: border-box; 142 | -o-box-sizing: border-box; 143 | box-sizing: border-box; 144 | margin: 0; 145 | padding: 0; 146 | } 147 | 148 | 149 | /*通用*/ 150 | 151 | body, 152 | select, 153 | img, 154 | input, 155 | ul, 156 | li, 157 | p, 158 | h1, 159 | h2, 160 | h3, 161 | h4, 162 | h5, 163 | h6, 164 | dl, 165 | dt, 166 | dd { 167 | margin: 0; 168 | padding: 0; 169 | border: none; 170 | list-style: none; 171 | border-style: none; 172 | } 173 | 174 | 175 | /*解决手机中点击的时候会出现奇怪的背景 */ 176 | 177 | a, 178 | a:hover, 179 | a:visited, 180 | a:link, 181 | a:active { 182 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 183 | -webkit-tap-highlight-color: transparent; 184 | outline: none; 185 | background: none; 186 | text-decoration: none; 187 | } 188 | 189 | input, 190 | input:hover, 191 | input:visited, 192 | input:active { 193 | -webkit-tap-highlight-color: transparent; 194 | border: none; 195 | outline: none; 196 | background: none; 197 | text-decoration: none; 198 | -webkit-text-decoration: none; 199 | -webkit-appearance: none; 200 | } 201 | 202 | .fl { 203 | float: left; 204 | } 205 | 206 | .fr { 207 | float: right; 208 | } 209 | 210 | .clearfloat:after { 211 | content: ""; 212 | display: block; 213 | clear: both; 214 | visibility: hidden; 215 | height: 0; 216 | zoom: 1 217 | } 218 | 219 | 220 | /*动画模板*/ 221 | 222 | @keyframes name { 223 | 0% { 224 | transform: translate(0px, 0px) rotate(0deg); 225 | } 226 | 100% { 227 | transfrom: translate(-10px, 0px) rotate(-10deg); 228 | } 229 | } 230 | 231 | .shake { 232 | animation-name: name; 233 | animation-duration: 1s; 234 | animation-timing-function: linear; 235 | animation-iteration-count: infinite; 236 | -webkit-animation-name: shake; 237 | -webkit-animation-duration: 1s; 238 | -webkit-animation-timing-function: linear; 239 | -webkit-animation-iteration-count: infinite; 240 | } 241 | 242 | 243 | /* 244 | 模态框的样式区域 245 | */ 246 | 247 | .modal { 248 | position: fixed; 249 | z-index: 100; 250 | top: 0; 251 | bottom: 0; 252 | left: 0; 253 | right: 0; 254 | background-color: rgba(0, 0, 0, 0); 255 | } 256 | 257 | .modal_in { 258 | position: absolute; 259 | width: 7rem; 260 | height: 2.5rem; 261 | bottom: 6rem; 262 | left: 0; 263 | right: 0; 264 | /* padding:1rem; */ 265 | margin: auto; 266 | background-color: rgba(1, 1, 1, 0.4); 267 | border-radius: 0.1333rem; 268 | } 269 | 270 | .modal p { 271 | width: 100%; 272 | height: 2.5rem; 273 | line-height: 2.5rem; 274 | font-size: 1rem; 275 | text-align: center; 276 | color: #fff; 277 | } 278 | 279 | .modal svg { 280 | position: absolute; 281 | left: 0; 282 | right: 0; 283 | bottom: 1rem; 284 | margin: auto; 285 | } 286 | 287 | .modal img { 288 | position: absolute; 289 | left: 0; 290 | right: 0; 291 | bottom: 1rem; 292 | margin: auto; 293 | } 294 | 295 | 296 | /* 297 | 提交中 298 | */ 299 | 300 | .submiting {} 301 | 302 | 303 | /* 304 | 提交成功 305 | */ 306 | 307 | .succ {} 308 | 309 | .succ img { 310 | width: 4.5rem; 311 | height: 4.5rem; 312 | bottom: 0.3rem; 313 | } 314 | 315 | {} 316 | 317 | .err img { 318 | width: 4rem; 319 | height: 4rem; 320 | bottom: 0.5rem; 321 | } -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | /************** web by yutao on 2017-9-3 *******************/ 2 | 3 | html, 4 | body { 5 | position: relative; 6 | height: 100%; 7 | } 8 | 9 | .swiper-container { 10 | width: 7.5rem; 11 | height: 100%; 12 | margin: 0 auto; 13 | } 14 | 15 | .one { 16 | width: 100%; 17 | height: 100%; 18 | background: url(../images/background.png) no-repeat center center; 19 | background-size: 100% 100%; 20 | } 21 | 22 | .two { 23 | width: 100%; 24 | height: 100%; 25 | position: relative; 26 | background: url(../images/background2.png) no-repeat center center; 27 | background-size: 100% 100%; 28 | } 29 | 30 | .three { 31 | width: 100%; 32 | height: 100%; 33 | background: url(../images/background3.png) no-repeat center center; 34 | background-size: 100% 100%; 35 | } 36 | 37 | .yun { 38 | display: inline-block; 39 | width: .94rem; 40 | height: .54rem; 41 | margin-top: .74rem; 42 | margin-left: 4.2rem; 43 | } 44 | 45 | .yunanimation { 46 | -webkit-animation-name: yun; 47 | animation-name: yun; 48 | -webkit-animation-duration: 4s; 49 | animation-duration: 4s; 50 | -webkit-animation-timing-function: linear; 51 | animation-timing-function: linear; 52 | -webkit-animation-iteration-count: 1; 53 | animation-iteration-count: 1; 54 | animation-fill-mode: forwards; 55 | -webkit-animation-fill-mode: forwards; 56 | /* Safari 和 Chrome */ 57 | } 58 | 59 | .yun2 { 60 | width: 1.62rem; 61 | height: .7rem; 62 | margin-top: .72rem; 63 | margin-left: .7rem; 64 | position: absolute; 65 | } 66 | 67 | .yun2animation { 68 | -webkit-animation-name: yun2; 69 | animation-name: yun2; 70 | -webkit-animation-duration: 4s; 71 | animation-duration: 4s; 72 | -webkit-animation-timing-function: linear; 73 | animation-timing-function: linear; 74 | -webkit-animation-iteration-count: 1; 75 | animation-iteration-count: 1; 76 | animation-fill-mode: forwards; 77 | -webkit-animation-fill-mode: forwards; 78 | /* Safari 和 Chrome */ 79 | } 80 | 81 | .yun3 { 82 | width: .76rem; 83 | height: .43rem; 84 | margin-top: 1.28rem; 85 | margin-left: 1.2rem; 86 | position: absolute; 87 | } 88 | 89 | .yun3animation { 90 | -webkit-animation-name: yun; 91 | animation-name: yun; 92 | -webkit-animation-duration: 4s; 93 | animation-duration: 4s; 94 | -webkit-animation-timing-function: linear; 95 | animation-timing-function: linear; 96 | -webkit-animation-iteration-count: 1; 97 | animation-iteration-count: 1; 98 | animation-fill-mode: forwards; 99 | -webkit-animation-fill-mode: forwards; 100 | /* Safari 和 Chrome */ 101 | } 102 | 103 | .yun22 { 104 | display: inline-block; 105 | width: .94rem; 106 | height: .54rem; 107 | margin-top: .74rem; 108 | margin-left: 4.2rem; 109 | } 110 | 111 | .yun22animation { 112 | -webkit-animation-name: yun; 113 | animation-name: yun; 114 | -webkit-animation-duration: 4s; 115 | animation-duration: 4s; 116 | -webkit-animation-timing-function: linear; 117 | animation-timing-function: linear; 118 | -webkit-animation-iteration-count: 1; 119 | animation-iteration-count: 1; 120 | animation-fill-mode: forwards; 121 | -webkit-animation-fill-mode: forwards; 122 | /* Safari 和 Chrome */ 123 | } 124 | 125 | .yun222 { 126 | width: 1.62rem; 127 | height: .7rem; 128 | margin-top: .72rem; 129 | margin-left: .7rem; 130 | position: absolute; 131 | } 132 | 133 | .yun222animation { 134 | -webkit-animation-name: yun2; 135 | animation-name: yun2; 136 | -webkit-animation-duration: 4s; 137 | animation-duration: 4s; 138 | -webkit-animation-timing-function: linear; 139 | animation-timing-function: linear; 140 | -webkit-animation-iteration-count: 1; 141 | animation-iteration-count: 1; 142 | animation-fill-mode: forwards; 143 | -webkit-animation-fill-mode: forwards; 144 | /* Safari 和 Chrome */ 145 | } 146 | 147 | .yun322 { 148 | width: .76rem; 149 | height: .43rem; 150 | margin-top: 1.28rem; 151 | margin-left: 1.2rem; 152 | position: absolute; 153 | } 154 | 155 | .yun322animation { 156 | -webkit-animation-name: yun; 157 | animation-name: yun; 158 | -webkit-animation-duration: 4s; 159 | animation-duration: 4s; 160 | -webkit-animation-timing-function: linear; 161 | animation-timing-function: linear; 162 | -webkit-animation-iteration-count: 1; 163 | animation-iteration-count: 1; 164 | animation-fill-mode: forwards; 165 | -webkit-animation-fill-mode: forwards; 166 | /* Safari 和 Chrome */ 167 | } 168 | 169 | .yun33 { 170 | display: inline-block; 171 | width: .94rem; 172 | height: .54rem; 173 | margin-top: .74rem; 174 | margin-left: 4.2rem; 175 | } 176 | 177 | .yun33animation { 178 | -webkit-animation-name: yun; 179 | animation-name: yun; 180 | -webkit-animation-duration: 4s; 181 | animation-duration: 4s; 182 | -webkit-animation-timing-function: linear; 183 | animation-timing-function: linear; 184 | -webkit-animation-iteration-count: 1; 185 | animation-iteration-count: 1; 186 | animation-fill-mode: forwards; 187 | -webkit-animation-fill-mode: forwards; 188 | /* Safari 和 Chrome */ 189 | } 190 | 191 | .yun233 { 192 | width: 1.62rem; 193 | height: .7rem; 194 | margin-top: .72rem; 195 | margin-left: .7rem; 196 | position: absolute; 197 | } 198 | 199 | .yun233animation { 200 | -webkit-animation-name: yun2; 201 | animation-name: yun2; 202 | -webkit-animation-duration: 4s; 203 | animation-duration: 4s; 204 | -webkit-animation-timing-function: linear; 205 | animation-timing-function: linear; 206 | -webkit-animation-iteration-count: 1; 207 | animation-iteration-count: 1; 208 | animation-fill-mode: forwards; 209 | -webkit-animation-fill-mode: forwards; 210 | /* Safari 和 Chrome */ 211 | } 212 | 213 | .yun333 { 214 | width: .76rem; 215 | height: .43rem; 216 | margin-top: 1.28rem; 217 | margin-left: 1.2rem; 218 | position: absolute; 219 | } 220 | 221 | .yun333animation { 222 | -webkit-animation-name: yun; 223 | animation-name: yun; 224 | -webkit-animation-duration: 4s; 225 | animation-duration: 4s; 226 | -webkit-animation-timing-function: linear; 227 | animation-timing-function: linear; 228 | -webkit-animation-iteration-count: 1; 229 | animation-iteration-count: 1; 230 | animation-fill-mode: forwards; 231 | -webkit-animation-fill-mode: forwards; 232 | /* Safari 和 Chrome */ 233 | } 234 | 235 | .content { 236 | width: 3.8rem; 237 | /* height: 5.92rem; */ 238 | height: 44.4%; 239 | margin: .5rem auto; 240 | position: relative; 241 | z-index: 111; 242 | border-radius: 6px; 243 | /* background: #ff996d; */ 244 | /* background: #ff589d; 245 | opacity: .1; */ 246 | /* box-shadow: 0px 0px 50px red; */ 247 | background: url(../images/aaa.png) no-repeat center center; 248 | background-size: 3.8rem 5.92rem; 249 | box-shadow: 0 0 35px rgba(209, 49, 0, .41); 250 | } 251 | 252 | .text { 253 | display: flex; 254 | width: 3.28rem; 255 | height: .64rem; 256 | margin: 0 auto; 257 | justify-content: space-between; 258 | align-items: flex-end; 259 | } 260 | 261 | .side { 262 | font-size: .18rem; 263 | color: #fff; 264 | } 265 | 266 | .middle { 267 | font-size: .2rem; 268 | color: #fff; 269 | } 270 | 271 | .backcolor { 272 | overflow: hidden; 273 | /* opacity: .3; */ 274 | width: 100%; 275 | /* background: #fff; */ 276 | height: 100%; 277 | position: absolute; 278 | border-radius: 6px; 279 | } 280 | 281 | .foot { 282 | /* width: 100%; */ 283 | width: 7.5rem; 284 | /* height: 4.44rem; */ 285 | height: 33.3%; 286 | position: absolute; 287 | bottom: 0; 288 | background: url(../images/foot.png) no-repeat center center; 289 | background-size: 100% 100%; 290 | } 291 | 292 | .foot_tit { 293 | margin-top: 1.36rem; 294 | font-size: .42rem; 295 | text-align: center; 296 | color: #ff6325; 297 | font-weight: bold 298 | } 299 | 300 | .foot_titl { 301 | margin-top: .29rem; 302 | font-size: .3rem; 303 | text-align: center; 304 | color: #ff6325; 305 | } 306 | 307 | #canvas { 308 | margin-top: -1.2rem; 309 | } 310 | 311 | .fly { 312 | width: 100%; 313 | height: 1.02rem; 314 | padding: 0 .26rem; 315 | position: absolute; 316 | bottom: 1rem; 317 | -webkit-transition-delay: 0; 318 | transition-delay: 0; 319 | border-radius: 5px; 320 | background: #fff; 321 | box-shadow: 0 0 35px rgba(209, 49, 0, .41); 322 | } 323 | 324 | .flyanimation { 325 | -webkit-animation-name: fly; 326 | animation-name: fly; 327 | -webkit-animation-duration: 4s; 328 | animation-duration: 4s; 329 | -webkit-animation-timing-function: linear; 330 | animation-timing-function: linear; 331 | -webkit-animation-iteration-count: 1; 332 | animation-iteration-count: 1; 333 | animation-fill-mode: forwards; 334 | -webkit-animation-fill-mode: forwards; 335 | /* Safari 和 Chrome */ 336 | } 337 | 338 | .fly1 { 339 | width: 100%; 340 | height: 1.02rem; 341 | padding: 0 .26rem; 342 | position: absolute; 343 | bottom: 1rem; 344 | border-radius: 5px; 345 | background: #fff; 346 | box-shadow: 0 0 35px rgba(209, 49, 0, .41); 347 | } 348 | 349 | .fly1animation { 350 | -webkit-animation-name: fly1; 351 | animation-name: fly1; 352 | -webkit-animation-duration: 4s; 353 | animation-duration: 4s; 354 | -webkit-animation-timing-function: linear; 355 | animation-timing-function: linear; 356 | -webkit-animation-iteration-count: 1; 357 | animation-iteration-count: 1; 358 | animation-fill-mode: forwards; 359 | -webkit-animation-fill-mode: forwards; 360 | /* Safari 和 Chrome */ 361 | } 362 | 363 | .fly2 { 364 | width: 100%; 365 | height: 1.02rem; 366 | padding: 0 .26rem; 367 | position: absolute; 368 | bottom: 1rem; 369 | border-radius: 5px; 370 | background: #fff; 371 | box-shadow: 0 0 35px rgba(209, 49, 0, .41); 372 | } 373 | 374 | .fly2animation { 375 | -webkit-animation-name: fly2; 376 | animation-name: fly2; 377 | -webkit-animation-duration: 4s; 378 | animation-duration: 4s; 379 | -webkit-animation-timing-function: linear; 380 | animation-timing-function: linear; 381 | -webkit-animation-iteration-count: 1; 382 | animation-iteration-count: 1; 383 | animation-fill-mode: forwards; 384 | -webkit-animation-fill-mode: forwards; 385 | /* Safari 和 Chrome */ 386 | } 387 | 388 | .fly_tit { 389 | width: .56rem; 390 | height: .5rem; 391 | margin-top: -.25rem; 392 | position: absolute; 393 | top: 50%; 394 | border-radius: 4px; 395 | background: -webkit-linear-gradient(left, #fb9958, #ffc86b); 396 | background: -o-linear-gradient(right, #fb9958, #ffc86b); 397 | background: -moz-linear-gradient(right, #fb9958, #ffc86b); 398 | } 399 | 400 | .fly_right { 401 | display: flex; 402 | flex-direction: column; 403 | width: 2.62rem; 404 | height: .5rem; 405 | margin-top: -.25rem; 406 | position: absolute; 407 | top: 50%; 408 | right: .26rem; 409 | } 410 | 411 | .fly_right span { 412 | display: inline-block; 413 | position: absolute; 414 | } 415 | 416 | .fly_right .add { 417 | margin-top: -.07rem; 418 | font-size: .181rem; 419 | color: #ff6325; 420 | } 421 | 422 | .lineone { 423 | width: 2.54rem; 424 | height: .06rem; 425 | bottom: .12rem; 426 | border-radius: 25px; 427 | background: #ffc982; 428 | } 429 | 430 | .linetwo { 431 | width: 1.52rem; 432 | height: .06rem; 433 | bottom: 0; 434 | border-radius: 25px; 435 | background: #ffc982; 436 | } 437 | 438 | .ification { 439 | display: flex; 440 | width: 100%; 441 | height: 1.2rem; 442 | position: absolute; 443 | bottom: 0; 444 | justify-content: space-between; 445 | } 446 | 447 | .ification span { 448 | display: inline-block; 449 | width: 33%; 450 | height: 1.2rem; 451 | font-size: .24rem; 452 | line-height: 1.6rem; 453 | text-align: center; 454 | color: #ff6325; 455 | } 456 | 457 | .ification .pic { 458 | background: url(../images/pic.png) no-repeat 48% 14%; 459 | background-size: .4rem .4rem; 460 | } 461 | 462 | .ification .music { 463 | background: url(../images/music.png) no-repeat 48% 14%; 464 | background-size: .4rem .4rem; 465 | } 466 | 467 | .ification .video { 468 | background: url(../images/video.png) no-repeat 48% 14%; 469 | background-size: .4rem .4rem; 470 | } 471 | 472 | .note1 { 473 | width: .5rem; 474 | height: .54rem; 475 | margin-top: -5rem; 476 | margin-left: 6rem; 477 | position: absolute; 478 | } 479 | 480 | .note1animation { 481 | -webkit-animation-name: note1; 482 | animation-name: note1; 483 | -webkit-animation-duration: 4s; 484 | animation-duration: 4s; 485 | -webkit-animation-timing-function: linear; 486 | animation-timing-function: linear; 487 | -webkit-animation-iteration-count: 1; 488 | animation-iteration-count: 1; 489 | animation-fill-mode: forwards; 490 | -webkit-animation-fill-mode: forwards; 491 | /* Safari 和 Chrome */ 492 | } 493 | 494 | .note2 { 495 | width: .26rem; 496 | height: .42rem; 497 | margin-top: -1.5rem; 498 | margin-left: 1rem; 499 | position: absolute; 500 | } 501 | 502 | .note2animation { 503 | -webkit-animation-name: note2; 504 | animation-name: note2; 505 | -webkit-animation-duration: 4s; 506 | animation-duration: 4s; 507 | -webkit-animation-timing-function: linear; 508 | animation-timing-function: linear; 509 | -webkit-animation-iteration-count: 1; 510 | animation-iteration-count: 1; 511 | animation-fill-mode: forwards; 512 | -webkit-animation-fill-mode: forwards; 513 | /* Safari 和 Chrome */ 514 | } 515 | 516 | .skip { 517 | display: block; 518 | width: 1.2rem; 519 | height: .8rem; 520 | font-size: .28rem; 521 | line-height: .8rem; 522 | position: fixed; 523 | top: 0; 524 | right: 0; 525 | text-align: center; 526 | color: #fff; 527 | } 528 | 529 | .skip2 { 530 | display: block; 531 | width: 1.2rem; 532 | height: .8rem; 533 | font-size: .28rem; 534 | line-height: .8rem; 535 | position: absolute; 536 | top: 0; 537 | right: 0rem; 538 | text-align: center; 539 | color: #fff; 540 | } 541 | 542 | .skip3 { 543 | display: block; 544 | width: 1.2rem; 545 | height: .8rem; 546 | font-size: .28rem; 547 | line-height: .8rem; 548 | position: fixed; 549 | top: 0; 550 | right: -15rem; 551 | text-align: center; 552 | color: #fff; 553 | } 554 | 555 | .polygon { 556 | width: .26rem; 557 | height: .36rem; 558 | position: absolute; 559 | top: 1.9rem; 560 | left: .76rem; 561 | } 562 | 563 | .polygonanimation { 564 | -webkit-animation-name: polygon; 565 | animation-name: polygon; 566 | -webkit-animation-duration: 1s; 567 | animation-duration: 1s; 568 | -webkit-animation-timing-function: linear; 569 | animation-timing-function: linear; 570 | -webkit-animation-iteration-count: 1; 571 | animation-iteration-count: 1; 572 | animation-fill-mode: forwards; 573 | -webkit-animation-fill-mode: forwards; 574 | /* Safari 和 Chrome */ 575 | } 576 | 577 | .polygon2 { 578 | width: .38rem; 579 | height: .52rem; 580 | position: absolute; 581 | top: 5.3rem; 582 | left: .75rem; 583 | } 584 | 585 | .polygon2animation { 586 | -webkit-animation-name: polygon; 587 | animation-name: polygon; 588 | -webkit-animation-duration: 2s; 589 | animation-duration: 2s; 590 | -webkit-animation-timing-function: linear; 591 | animation-timing-function: linear; 592 | -webkit-animation-iteration-count: 1; 593 | animation-iteration-count: 1; 594 | animation-fill-mode: forwards; 595 | -webkit-animation-fill-mode: forwards; 596 | /* Safari 和 Chrome */ 597 | } 598 | 599 | .polygon3 { 600 | width: .32rem; 601 | height: .48rem; 602 | position: absolute; 603 | top: 3.8rem; 604 | right: 1.46rem; 605 | } 606 | 607 | .polygon3animation { 608 | -webkit-animation-name: polygon; 609 | animation-name: polygon; 610 | -webkit-animation-duration: 2s; 611 | animation-duration: 2s; 612 | -webkit-animation-timing-function: linear; 613 | animation-timing-function: linear; 614 | -webkit-animation-iteration-count: 1; 615 | animation-iteration-count: 1; 616 | animation-fill-mode: forwards; 617 | -webkit-animation-fill-mode: forwards; 618 | /* Safari 和 Chrome */ 619 | } 620 | 621 | .rectangle { 622 | width: .58rem; 623 | height: .65rem; 624 | position: absolute; 625 | top: 2.8rem; 626 | right: 2.76rem; 627 | } 628 | 629 | .rectangleanimation { 630 | -webkit-animation-name: righttops; 631 | animation-name: righttops; 632 | -webkit-animation-duration: 4s; 633 | animation-duration: 4s; 634 | -webkit-animation-timing-function: linear; 635 | animation-timing-function: linear; 636 | -webkit-animation-iteration-count: 1; 637 | animation-iteration-count: 1; 638 | animation-fill-mode: forwards; 639 | -webkit-animation-fill-mode: forwards; 640 | /* Safari 和 Chrome */ 641 | } 642 | 643 | .rectangle2 { 644 | width: .58rem; 645 | height: .65rem; 646 | position: absolute; 647 | top: 4.72rem; 648 | right: 2.07rem; 649 | } 650 | 651 | .rectangle2animation { 652 | -webkit-animation-name: righttops; 653 | animation-name: righttops; 654 | -webkit-animation-duration: 4s; 655 | animation-duration: 4s; 656 | -webkit-animation-timing-function: linear; 657 | animation-timing-function: linear; 658 | -webkit-animation-iteration-count: 1; 659 | animation-iteration-count: 1; 660 | animation-fill-mode: forwards; 661 | -webkit-animation-fill-mode: forwards; 662 | /* Safari 和 Chrome */ 663 | } 664 | 665 | .ben1 { 666 | width: .9rem; 667 | height: 1.06rem; 668 | position: absolute; 669 | top: 3.28rem; 670 | left: 1.5rem; 671 | } 672 | 673 | .ben1animation { 674 | -webkit-animation-name: benzi; 675 | animation-name: benzi; 676 | -webkit-animation-duration: 4s; 677 | animation-duration: 4s; 678 | -webkit-animation-timing-function: linear; 679 | animation-timing-function: linear; 680 | -webkit-animation-iteration-count: 1; 681 | animation-iteration-count: 1; 682 | animation-fill-mode: forwards; 683 | -webkit-animation-fill-mode: forwards; 684 | /* Safari 和 Chrome */ 685 | } 686 | 687 | .video2 { 688 | width: 1.28rem; 689 | height: 1.54rem; 690 | margin-left: -.64rem; 691 | position: absolute; 692 | top: 44.4%; 693 | left: 50%; 694 | } 695 | 696 | .videoanimation { 697 | -webkit-animation-name: lefttop; 698 | animation-name: lefttop; 699 | -webkit-animation-duration: 4s; 700 | animation-duration: 4s; 701 | -webkit-animation-timing-function: linear; 702 | animation-timing-function: linear; 703 | -webkit-animation-iteration-count: 1; 704 | animation-iteration-count: 1; 705 | animation-fill-mode: forwards; 706 | -webkit-animation-fill-mode: forwards; 707 | /* Safari 和 Chrome */ 708 | } 709 | 710 | .notobvious { 711 | position: absolute; 712 | top: 4.63rem; 713 | left: 0; 714 | } 715 | 716 | .article { 717 | width: 1.26rem; 718 | height: 1.55rem; 719 | position: absolute; 720 | top: 45%; 721 | right: 2.46rem; 722 | } 723 | 724 | .articleanimation { 725 | -webkit-animation-name: righttop; 726 | animation-name: righttop; 727 | -webkit-animation-duration: 4s; 728 | animation-duration: 4s; 729 | -webkit-animation-timing-function: linear; 730 | animation-timing-function: linear; 731 | -webkit-animation-iteration-count: 1; 732 | animation-iteration-count: 1; 733 | animation-fill-mode: forwards; 734 | -webkit-animation-fill-mode: forwards; 735 | /* Safari 和 Chrome */ 736 | } 737 | 738 | .pyramid { 739 | width: 1.05rem; 740 | height: 1.04rem; 741 | position: absolute; 742 | top: 50%; 743 | left: 2.5rem; 744 | } 745 | 746 | .pyramidanimation { 747 | -webkit-animation-name: lefttop2; 748 | animation-name: lefttop2; 749 | -webkit-animation-duration: 4s; 750 | animation-duration: 4s; 751 | -webkit-animation-timing-function: linear; 752 | animation-timing-function: linear; 753 | -webkit-animation-iteration-count: 1; 754 | animation-iteration-count: 1; 755 | animation-fill-mode: forwards; 756 | -webkit-animation-fill-mode: forwards; 757 | /* Safari 和 Chrome */ 758 | } 759 | 760 | .mobile { 761 | width: 4.79rem; 762 | height: .73rem; 763 | margin-left: -2.395rem; 764 | position: absolute; 765 | z-index: 111; 766 | top: 57%; 767 | left: 50%; 768 | } 769 | 770 | .foot .foot_tit2 { 771 | margin-top: 1.36rem; 772 | font-size: .42rem; 773 | font-weight: bold; 774 | text-align: center; 775 | color: #ff5d5c; 776 | } 777 | 778 | .foot .foot_titl2 { 779 | margin-top: .29rem; 780 | font-size: .3rem; 781 | text-align: center; 782 | color: #ff5d5c; 783 | } 784 | 785 | .foot .foot_titl22 { 786 | font-size: .3rem; 787 | text-align: center; 788 | color: #ff5d5c; 789 | } 790 | 791 | .content .list { 792 | width: 100%; 793 | position: absolute; 794 | } 795 | 796 | .list .list1 { 797 | width: 2.58rem; 798 | height: 1.56rem; 799 | margin: .33rem auto; 800 | border-bottom: 2px solid #ff9c00; 801 | } 802 | 803 | .list1 .list1_top { 804 | height: 1.04rem; 805 | border-radius: 4px; 806 | background: #ffda9d; 807 | } 808 | 809 | .list1 .list1_mid { 810 | width: 2.39rem; 811 | height: .11rem; 812 | margin-top: .05rem; 813 | border-radius: 2px; 814 | background: #ffc450; 815 | } 816 | 817 | .list1 .list1_bot { 818 | display: flex; 819 | width: 100%; 820 | height: .11rem; 821 | margin-top: .08rem; 822 | justify-content: space-between; 823 | } 824 | 825 | .bot_left, 826 | .bot_right { 827 | width: .79rem; 828 | height: .11rem; 829 | } 830 | 831 | .backfff { 832 | background: #fff; 833 | } 834 | 835 | .felxs { 836 | display: flex; 837 | justify-content: space-between; 838 | } 839 | 840 | .felxs .left1 { 841 | width: .22rem; 842 | height: .11rem; 843 | border-radius: 1.5px; 844 | background: #ff9c00; 845 | } 846 | 847 | .felxs .left2 { 848 | width: .5rem; 849 | height: .11rem; 850 | border-radius: 1.5px; 851 | background: #ff9c00; 852 | } 853 | 854 | .list2 { 855 | display: flex; 856 | flex-direction: column; 857 | width: 2.58rem; 858 | height: 1.21rem; 859 | margin: -.16rem auto; 860 | -webkit-animation-name: list2; 861 | animation-name: list2; 862 | -webkit-animation-duration: 4s; 863 | animation-duration: 4s; 864 | -webkit-animation-timing-function: linear; 865 | animation-timing-function: linear; 866 | -webkit-animation-iteration-count: 1; 867 | animation-iteration-count: 1; 868 | opacity: 0; 869 | justify-content: space-between; 870 | animation-fill-mode: forwards; 871 | -webkit-animation-fill-mode: forwards; 872 | /* Safari 和 Chrome */ 873 | } 874 | 875 | .list2 .list2_top { 876 | width: 100%; 877 | height: 1.04rem; 878 | border-radius: 2px; 879 | background: #ffe6c6; 880 | } 881 | 882 | .list2 .list2_bot { 883 | width: 100%; 884 | height: .11rem; 885 | border-radius: 2px; 886 | background: #ffc755; 887 | } 888 | 889 | .foot .foot_tit3 { 890 | margin-top: 1.36rem; 891 | font-size: .42rem; 892 | font-weight: bold; 893 | text-align: center; 894 | color: #ff9c00; 895 | } 896 | 897 | .foot .foot_titl3 { 898 | margin-top: .29rem; 899 | font-size: .3rem; 900 | text-align: center; 901 | color: #ff9c00; 902 | } 903 | 904 | .start { 905 | width: 3.19rem; 906 | height: .71rem; 907 | margin: .5rem auto; 908 | font-size: .32rem; 909 | font-weight: bold; 910 | line-height: .71rem; 911 | text-align: center; 912 | color: #fff; 913 | border-radius: 4px; 914 | background: #ffb400; 915 | } 916 | 917 | .smallglob { 918 | width: .42rem; 919 | height: .42rem; 920 | position: absolute; 921 | top: 3.11rem; 922 | right: .7rem; 923 | } 924 | 925 | .satellite { 926 | width: 1.27rem; 927 | height: .64rem; 928 | position: absolute; 929 | top: 2.28rem; 930 | left: .35rem; 931 | } 932 | 933 | .good { 934 | width: 1.19rem; 935 | height: 1.22rem; 936 | margin-left: -.595rem; 937 | position: absolute; 938 | z-index: 222; 939 | top: 6.5rem; 940 | left: 50%; 941 | } 942 | 943 | .goodanimation { 944 | -webkit-animation-name: good; 945 | animation-name: good; 946 | -webkit-animation-duration: 4s; 947 | animation-duration: 4s; 948 | -webkit-animation-timing-function: linear; 949 | animation-timing-function: linear; 950 | -webkit-animation-iteration-count: 1; 951 | animation-iteration-count: 1; 952 | animation-fill-mode: forwards; 953 | -webkit-animation-fill-mode: forwards; 954 | /* Safari 和 Chrome */ 955 | } 956 | 957 | .star1 { 958 | width: .31rem; 959 | height: .3rem; 960 | position: absolute; 961 | top: 2.37rem; 962 | left: 2.43rem; 963 | } 964 | 965 | .star1animation { 966 | -webkit-animation-name: ellipse; 967 | animation-name: ellipse; 968 | -webkit-animation-duration: 1.5s; 969 | animation-duration: 1.5s; 970 | -webkit-animation-timing-function: linear; 971 | animation-timing-function: linear; 972 | -webkit-animation-iteration-count: 1; 973 | animation-iteration-count: 1; 974 | animation-fill-mode: forwards; 975 | -webkit-animation-fill-mode: forwards; 976 | /* Safari 和 Chrome */ 977 | } 978 | 979 | .star2 { 980 | width: .31rem; 981 | height: .3rem; 982 | position: absolute; 983 | top: 2.4rem; 984 | right: 1.38rem; 985 | } 986 | 987 | .star2animation { 988 | -webkit-animation-name: ellipse; 989 | animation-name: ellipse; 990 | -webkit-animation-duration: 1.5s; 991 | animation-duration: 1.5s; 992 | -webkit-animation-timing-function: linear; 993 | animation-timing-function: linear; 994 | -webkit-animation-iteration-count: 1; 995 | animation-iteration-count: 1; 996 | animation-fill-mode: forwards; 997 | -webkit-animation-fill-mode: forwards; 998 | /* Safari 和 Chrome */ 999 | } 1000 | 1001 | .star3 { 1002 | width: .31rem; 1003 | height: .3rem; 1004 | position: absolute; 1005 | top: 4.82rem; 1006 | left: 1.75rem; 1007 | } 1008 | 1009 | .star3animation { 1010 | -webkit-animation-name: ellipse; 1011 | animation-name: ellipse; 1012 | -webkit-animation-duration: 1.5s; 1013 | animation-duration: 1.5s; 1014 | -webkit-animation-timing-function: linear; 1015 | animation-timing-function: linear; 1016 | -webkit-animation-iteration-count: 1; 1017 | animation-iteration-count: 1; 1018 | animation-fill-mode: forwards; 1019 | -webkit-animation-fill-mode: forwards; 1020 | /* Safari 和 Chrome */ 1021 | } 1022 | 1023 | .star4 { 1024 | width: .31rem; 1025 | height: .3rem; 1026 | position: absolute; 1027 | top: 5.78rem; 1028 | right: 1.1rem; 1029 | } 1030 | 1031 | .star4animation { 1032 | -webkit-animation-name: ellipse; 1033 | animation-name: ellipse; 1034 | -webkit-animation-duration: 1.5s; 1035 | animation-duration: 1.5s; 1036 | -webkit-animation-timing-function: linear; 1037 | animation-timing-function: linear; 1038 | -webkit-animation-iteration-count: 1; 1039 | animation-iteration-count: 1; 1040 | animation-fill-mode: forwards; 1041 | -webkit-animation-fill-mode: forwards; 1042 | /* Safari 和 Chrome */ 1043 | } 1044 | 1045 | .circular { 1046 | width: .38rem; 1047 | height: .38rem; 1048 | position: absolute; 1049 | top: 5.66rem; 1050 | left: 1.05rem; 1051 | opacity: .5; 1052 | border-radius: 50%; 1053 | background: #fff; 1054 | box-shadow: 0 0 15px #fff; 1055 | } 1056 | 1057 | .circularanimation { 1058 | -webkit-animation-name: circular2; 1059 | animation-name: circular2; 1060 | -webkit-animation-duration: 4s; 1061 | animation-duration: 4s; 1062 | -webkit-animation-timing-function: linear; 1063 | animation-timing-function: linear; 1064 | -webkit-animation-iteration-count: 1; 1065 | animation-iteration-count: 1; 1066 | animation-fill-mode: forwards; 1067 | -webkit-animation-fill-mode: forwards; 1068 | /* Safari 和 Chrome */ 1069 | } 1070 | 1071 | .circular2 { 1072 | width: .54rem; 1073 | height: .54rem; 1074 | position: absolute; 1075 | top: 3.58rem; 1076 | left: .15rem; 1077 | } 1078 | 1079 | .circular2animation { 1080 | -webkit-animation-name: circular2; 1081 | animation-name: circular2; 1082 | -webkit-animation-duration: 4s; 1083 | animation-duration: 4s; 1084 | -webkit-animation-timing-function: linear; 1085 | animation-timing-function: linear; 1086 | -webkit-animation-iteration-count: 1; 1087 | animation-iteration-count: 1; 1088 | animation-fill-mode: forwards; 1089 | -webkit-animation-fill-mode: forwards; 1090 | /* Safari 和 Chrome */ 1091 | } 1092 | 1093 | .circular3 { 1094 | width: .46rem; 1095 | height: .46rem; 1096 | position: absolute; 1097 | top: 5.5rem; 1098 | left: .99rem; 1099 | } 1100 | 1101 | .circular3animation { 1102 | -webkit-animation-name: circular2; 1103 | animation-name: circular2; 1104 | -webkit-animation-duration: 4s; 1105 | animation-duration: 4s; 1106 | -webkit-animation-timing-function: linear; 1107 | animation-timing-function: linear; 1108 | -webkit-animation-iteration-count: 1; 1109 | animation-iteration-count: 1; 1110 | animation-fill-mode: forwards; 1111 | -webkit-animation-fill-mode: forwards; 1112 | /* Safari 和 Chrome */ 1113 | } 1114 | 1115 | .ellipse { 1116 | width: 5rem; 1117 | height: 1.45rem; 1118 | margin-left: -2.5rem; 1119 | position: absolute; 1120 | top: 56%; 1121 | left: 50%; 1122 | } 1123 | 1124 | .ellipseanimation { 1125 | -webkit-animation-name: ellipse; 1126 | animation-name: ellipse; 1127 | -webkit-animation-duration: 4s; 1128 | animation-duration: 4s; 1129 | -webkit-animation-timing-function: linear; 1130 | animation-timing-function: linear; 1131 | -webkit-animation-iteration-count: 1; 1132 | animation-iteration-count: 1; 1133 | animation-fill-mode: forwards; 1134 | -webkit-animation-fill-mode: forwards; 1135 | /* Safari 和 Chrome */ 1136 | } 1137 | 1138 | .ellipse2 { 1139 | width: 5rem; 1140 | height: 1.45rem; 1141 | margin-left: -2.5rem; 1142 | position: absolute; 1143 | top: 56%; 1144 | left: 50%; 1145 | } 1146 | 1147 | .ellipse2animation { 1148 | -webkit-animation-name: ellipse2; 1149 | animation-name: ellipse2; 1150 | -webkit-animation-duration: 4s; 1151 | animation-duration: 4s; 1152 | -webkit-animation-timing-function: linear; 1153 | animation-timing-function: linear; 1154 | -webkit-animation-iteration-count: 1; 1155 | animation-iteration-count: 1; 1156 | animation-fill-mode: forwards; 1157 | -webkit-animation-fill-mode: forwards; 1158 | /* Safari 和 Chrome */ 1159 | } 1160 | 1161 | .ellipse3 { 1162 | width: 5rem; 1163 | height: 1.45rem; 1164 | margin-left: -2.5rem; 1165 | position: absolute; 1166 | top: 7.5rem; 1167 | left: 50%; 1168 | } 1169 | 1170 | .ellipse3animation { 1171 | -webkit-animation-name: ellipse; 1172 | animation-name: ellipse; 1173 | -webkit-animation-duration: 4s; 1174 | animation-duration: 4s; 1175 | -webkit-animation-timing-function: linear; 1176 | animation-timing-function: linear; 1177 | -webkit-animation-iteration-count: 1; 1178 | animation-iteration-count: 1; 1179 | animation-fill-mode: forwards; 1180 | -webkit-animation-fill-mode: forwards; 1181 | /* Safari 和 Chrome */ 1182 | } 1183 | 1184 | .cebian { 1185 | width: .92rem; 1186 | height: 2.37rem; 1187 | position: absolute; 1188 | top: 3.52rem; 1189 | right: 0; 1190 | } 1191 | 1192 | .cebiananimation { 1193 | -webkit-animation-name: ellipse; 1194 | animation-name: ellipse; 1195 | -webkit-animation-duration: 4s; 1196 | animation-duration: 4s; 1197 | -webkit-animation-timing-function: linear; 1198 | animation-timing-function: linear; 1199 | -webkit-animation-iteration-count: 1; 1200 | animation-iteration-count: 1; 1201 | animation-fill-mode: forwards; 1202 | -webkit-animation-fill-mode: forwards; 1203 | /* Safari 和 Chrome */ 1204 | } 1205 | 1206 | .cebian2 { 1207 | width: .85rem; 1208 | height: 2.31rem; 1209 | position: absolute; 1210 | top: 3.67rem; 1211 | left: 0; 1212 | } 1213 | 1214 | .cebian2animation { 1215 | -webkit-animation-name: ellipse; 1216 | animation-name: ellipse; 1217 | -webkit-animation-duration: 4s; 1218 | animation-duration: 4s; 1219 | -webkit-animation-timing-function: linear; 1220 | animation-timing-function: linear; 1221 | -webkit-animation-iteration-count: 1; 1222 | animation-iteration-count: 1; 1223 | animation-fill-mode: forwards; 1224 | -webkit-animation-fill-mode: forwards; 1225 | /* Safari 和 Chrome */ 1226 | } 1227 | 1228 | .ccc { 1229 | width: 4.97rem; 1230 | height: .8rem; 1231 | margin-left: -2.35rem; 1232 | position: absolute; 1233 | z-index: 111; 1234 | bottom: 38.6%; 1235 | left: 50%; 1236 | } 1237 | 1238 | .cccanimation { 1239 | -webkit-animation-name: ccc; 1240 | animation-name: ccc; 1241 | -webkit-animation-duration: 4s; 1242 | animation-duration: 4s; 1243 | -webkit-animation-timing-function: linear; 1244 | animation-timing-function: linear; 1245 | -webkit-animation-iteration-count: 1; 1246 | animation-iteration-count: 1; 1247 | animation-fill-mode: forwards; 1248 | -webkit-animation-fill-mode: forwards; 1249 | /* Safari 和 Chrome */ 1250 | } 1251 | 1252 | .fly_tit .kaixin { 1253 | width: .36rem; 1254 | height: .36rem; 1255 | margin-top: -.18rem; 1256 | margin-left: -.18rem; 1257 | position: absolute; 1258 | top: 50%; 1259 | left: 50%; 1260 | } 1261 | 1262 | .fly1_top { 1263 | height: .57rem; 1264 | margin-top: .15rem; 1265 | } 1266 | 1267 | .fly1_top img { 1268 | float: left; 1269 | width: 1.46rem; 1270 | height: .57rem; 1271 | position: absolute; 1272 | } 1273 | 1274 | .fly1top_right { 1275 | display: flex; 1276 | float: right; 1277 | flex-direction: column; 1278 | width: 48%; 1279 | height: .5rem; 1280 | margin-top: .04rem; 1281 | justify-content: space-between; 1282 | } 1283 | 1284 | .fly1top_right div { 1285 | width: 100%; 1286 | height: .06rem; 1287 | border-radius: 25px; 1288 | background: #ffc579; 1289 | } 1290 | 1291 | .fly2_bot { 1292 | width: 100%; 1293 | height: .06rem; 1294 | margin-top: .12rem; 1295 | border-radius: 25px; 1296 | background: #ffc982; 1297 | } 1298 | 1299 | .rocketfly_wrap { 1300 | width: 3.33rem; 1301 | height: 6.03rem; 1302 | position: absolute; 1303 | z-index: 222; 1304 | top: 2.05rem; 1305 | right: 1.35rem; 1306 | } 1307 | 1308 | .rocketfly_wrapimg { 1309 | overflow: hidden; 1310 | width: 3.33rem; 1311 | height: 0rem; 1312 | position: absolute; 1313 | z-index: 222; 1314 | bottom: 0rem; 1315 | } 1316 | 1317 | .rocketfly_wrapimganimation { 1318 | -webkit-animation-name: rocketflywrap; 1319 | animation-name: rocketflywrap; 1320 | -webkit-animation-duration: 4s; 1321 | animation-duration: 4s; 1322 | -webkit-animation-timing-function: linear; 1323 | animation-timing-function: linear; 1324 | -webkit-animation-iteration-count: 1; 1325 | animation-iteration-count: 1; 1326 | animation-fill-mode: forwards; 1327 | -webkit-animation-fill-mode: forwards; 1328 | /* Safari 和 Chrome */ 1329 | } 1330 | 1331 | .rocketfly { 1332 | width: 3.33rem; 1333 | height: 6.03rem; 1334 | position: absolute; 1335 | bottom: 0; 1336 | } 1337 | 1338 | .rocket { 1339 | width: 1.1rem; 1340 | height: 1.17rem; 1341 | position: absolute; 1342 | top: 1.5rem; 1343 | left: 2.9rem; 1344 | } 1345 | 1346 | .list_top { 1347 | width: 3.06rem; 1348 | height: 1.88rem; 1349 | margin-left: -1.53rem; 1350 | position: absolute; 1351 | z-index: 333; 1352 | top: 2.83rem; 1353 | left: 50%; 1354 | border-top-left-radius: 4px; 1355 | border-top-right-radius: 4px; 1356 | background: #fff2f3; 1357 | } 1358 | 1359 | .list_top img { 1360 | display: block; 1361 | width: 2.59rem; 1362 | height: 1.39rem; 1363 | margin: .32rem auto; 1364 | } 1365 | 1366 | .list_bot { 1367 | width: 3.06rem; 1368 | height: 3.37rem; 1369 | margin-left: -1.53rem; 1370 | position: absolute; 1371 | top: 4.71rem; 1372 | left: 50%; 1373 | border-bottom-right-radius: 4px; 1374 | border-bottom-left-radius: 4px; 1375 | background: #fff2f3; 1376 | } 1377 | 1378 | .list_midd { 1379 | width: 2.59rem; 1380 | height: 1.85rem; 1381 | margin: auto; 1382 | padding-top: .17rem; 1383 | border-top: 2px solid #ff9e00; 1384 | } 1385 | 1386 | .list_midd img { 1387 | width: 100%; 1388 | height: 1.54rem; 1389 | } 1390 | 1391 | .list_bott { 1392 | width: 2.59rem; 1393 | height: 1.33rem; 1394 | margin: auto; 1395 | border-top: 2px solid #ff9e00; 1396 | } 1397 | 1398 | .lsit_box { 1399 | width: 2.58rem; 1400 | height: 1.04rem; 1401 | margin-top: .13rem; 1402 | border-radius: 4px; 1403 | background: #ffe7cb; 1404 | } 1405 | 1406 | .list_line { 1407 | width: 2.58rem; 1408 | height: .11rem; 1409 | margin-top: .06rem; 1410 | border-radius: 2px; 1411 | background: #ffc75a; 1412 | } 1413 | 1414 | .rocket3 { 1415 | width: 8rem; 1416 | height: 1.41rem; 1417 | position: absolute; 1418 | z-index: 233; 1419 | top: 4.9rem; 1420 | left: -1.8rem; 1421 | transform: rotate(45deg); 1422 | } 1423 | 1424 | .rocket3animation { 1425 | -webkit-animation-name: rocket3; 1426 | animation-name: rocket3; 1427 | -webkit-animation-duration: 4s; 1428 | animation-duration: 4s; 1429 | -webkit-animation-timing-function: linear; 1430 | animation-timing-function: linear; 1431 | -webkit-animation-iteration-count: 1; 1432 | animation-iteration-count: 1; 1433 | animation-fill-mode: forwards; 1434 | -webkit-animation-fill-mode: forwards; 1435 | /* Safari 和 Chrome */ 1436 | } 1437 | 1438 | .wuwrap { 1439 | width: 2.52rem; 1440 | height: 1.69rem; 1441 | position: absolute; 1442 | left: 0; 1443 | top: 3.93rem; 1444 | } 1445 | 1446 | .wuimg { 1447 | width: 0rem; 1448 | height: 1.69rem; 1449 | position: absolute; 1450 | right: 0; 1451 | top: 0; 1452 | overflow: hidden; 1453 | } 1454 | 1455 | .wuimganimation { 1456 | -webkit-animation-name: wuimg; 1457 | animation-name: wuimg; 1458 | -webkit-animation-duration: 4s; 1459 | animation-duration: 4s; 1460 | -webkit-animation-timing-function: linear; 1461 | animation-timing-function: linear; 1462 | -webkit-animation-iteration-count: 1; 1463 | animation-iteration-count: 1; 1464 | animation-fill-mode: forwards; 1465 | -webkit-animation-fill-mode: forwards; 1466 | /* Safari 和 Chrome */ 1467 | } 1468 | 1469 | .wu { 1470 | width: 2.52rem; 1471 | height: 1.69rem; 1472 | position: absolute; 1473 | right: 0; 1474 | top: 0 1475 | } 1476 | 1477 | .yinfu { 1478 | width: .38rem; 1479 | height: .36rem; 1480 | position: absolute; 1481 | top: 5.26rem; 1482 | left: 1.63rem; 1483 | } 1484 | 1485 | .yinfuanimation { 1486 | -webkit-animation-name: yinfu; 1487 | animation-name: yinfu; 1488 | -webkit-animation-duration: 4s; 1489 | animation-duration: 4s; 1490 | -webkit-animation-timing-function: linear; 1491 | animation-timing-function: linear; 1492 | -webkit-animation-iteration-count: 1; 1493 | animation-iteration-count: 1; 1494 | animation-fill-mode: forwards; 1495 | -webkit-animation-fill-mode: forwards; 1496 | /* Safari 和 Chrome */ 1497 | } -------------------------------------------------------------------------------- /css/swiper.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 3.4.2 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * 5 | * http://www.idangero.us/swiper/ 6 | * 7 | * Copyright 2017, Vladimir Kharlampidi 8 | * The iDangero.us 9 | * http://www.idangero.us/ 10 | * 11 | * Licensed under MIT 12 | * 13 | * Released on: March 10, 2017 14 | */ 15 | 16 | .swiper-container { 17 | margin-left: auto; 18 | margin-right: auto; 19 | position: relative; 20 | overflow: hidden; 21 | z-index: 1 22 | } 23 | 24 | .swiper-container-no-flexbox .swiper-slide { 25 | float: left 26 | } 27 | 28 | .swiper-container-vertical>.swiper-wrapper { 29 | -webkit-box-orient: vertical; 30 | -moz-box-orient: vertical; 31 | -ms-flex-direction: column; 32 | -webkit-flex-direction: column; 33 | flex-direction: column 34 | } 35 | 36 | .swiper-wrapper { 37 | position: relative; 38 | width: 100%; 39 | height: 100%; 40 | z-index: 1; 41 | display: -webkit-box; 42 | display: -moz-box; 43 | display: -ms-flexbox; 44 | display: -webkit-flex; 45 | display: flex; 46 | -webkit-transition-property: -webkit-transform; 47 | -moz-transition-property: -moz-transform; 48 | -o-transition-property: -o-transform; 49 | -ms-transition-property: -ms-transform; 50 | transition-property: transform; 51 | -webkit-box-sizing: content-box; 52 | -moz-box-sizing: content-box; 53 | box-sizing: content-box 54 | } 55 | 56 | .swiper-container-android .swiper-slide, 57 | .swiper-wrapper { 58 | -webkit-transform: translate3d(0, 0, 0); 59 | -moz-transform: translate3d(0, 0, 0); 60 | -o-transform: translate(0, 0); 61 | -ms-transform: translate3d(0, 0, 0); 62 | transform: translate3d(0, 0, 0) 63 | } 64 | 65 | .swiper-container-multirow>.swiper-wrapper { 66 | -webkit-box-lines: multiple; 67 | -moz-box-lines: multiple; 68 | -ms-flex-wrap: wrap; 69 | -webkit-flex-wrap: wrap; 70 | flex-wrap: wrap 71 | } 72 | 73 | .swiper-container-free-mode>.swiper-wrapper { 74 | -webkit-transition-timing-function: ease-out; 75 | -moz-transition-timing-function: ease-out; 76 | -ms-transition-timing-function: ease-out; 77 | -o-transition-timing-function: ease-out; 78 | transition-timing-function: ease-out; 79 | margin: 0 auto 80 | } 81 | 82 | .swiper-slide { 83 | -webkit-flex-shrink: 0; 84 | -ms-flex: 0 0 auto; 85 | flex-shrink: 0; 86 | width: 100%; 87 | height: 100%; 88 | position: relative; 89 | overflow: hidden 90 | } 91 | 92 | .swiper-container-autoheight, 93 | .swiper-container-autoheight .swiper-slide { 94 | height: auto 95 | } 96 | 97 | .swiper-container-autoheight .swiper-wrapper { 98 | -webkit-box-align: start; 99 | -ms-flex-align: start; 100 | -webkit-align-items: flex-start; 101 | align-items: flex-start; 102 | -webkit-transition-property: -webkit-transform, height; 103 | -moz-transition-property: -moz-transform; 104 | -o-transition-property: -o-transform; 105 | -ms-transition-property: -ms-transform; 106 | transition-property: transform, height 107 | } 108 | 109 | .swiper-container .swiper-notification { 110 | position: absolute; 111 | left: 0; 112 | top: 0; 113 | pointer-events: none; 114 | opacity: 0; 115 | z-index: -1000 116 | } 117 | 118 | .swiper-wp8-horizontal { 119 | -ms-touch-action: pan-y; 120 | touch-action: pan-y 121 | } 122 | 123 | .swiper-wp8-vertical { 124 | -ms-touch-action: pan-x; 125 | touch-action: pan-x 126 | } 127 | 128 | .swiper-button-next, 129 | .swiper-button-prev { 130 | position: absolute; 131 | top: 50%; 132 | width: 27px; 133 | height: 44px; 134 | margin-top: -22px; 135 | z-index: 10; 136 | cursor: pointer; 137 | -moz-background-size: 27px 44px; 138 | -webkit-background-size: 27px 44px; 139 | background-size: 27px 44px; 140 | background-position: center; 141 | background-repeat: no-repeat 142 | } 143 | 144 | .swiper-button-next.swiper-button-disabled, 145 | .swiper-button-prev.swiper-button-disabled { 146 | opacity: .35; 147 | cursor: auto; 148 | pointer-events: none 149 | } 150 | 151 | .swiper-button-prev, 152 | .swiper-container-rtl .swiper-button-next { 153 | 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"); 154 | left: 10px; 155 | right: auto 156 | } 157 | 158 | .swiper-button-prev.swiper-button-black, 159 | .swiper-container-rtl .swiper-button-next.swiper-button-black { 160 | 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") 161 | } 162 | 163 | .swiper-button-prev.swiper-button-white, 164 | .swiper-container-rtl .swiper-button-next.swiper-button-white { 165 | 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") 166 | } 167 | 168 | .swiper-button-next, 169 | .swiper-container-rtl .swiper-button-prev { 170 | 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"); 171 | right: 10px; 172 | left: auto 173 | } 174 | 175 | .swiper-button-next.swiper-button-black, 176 | .swiper-container-rtl .swiper-button-prev.swiper-button-black { 177 | 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") 178 | } 179 | 180 | .swiper-button-next.swiper-button-white, 181 | .swiper-container-rtl .swiper-button-prev.swiper-button-white { 182 | 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") 183 | } 184 | 185 | .swiper-pagination { 186 | position: absolute; 187 | text-align: center; 188 | -webkit-transition: .3s; 189 | -moz-transition: .3s; 190 | -o-transition: .3s; 191 | transition: .3s; 192 | -webkit-transform: translate3d(0, 0, 0); 193 | -ms-transform: translate3d(0, 0, 0); 194 | -o-transform: translate3d(0, 0, 0); 195 | transform: translate3d(0, 0, 0); 196 | z-index: 10 197 | } 198 | 199 | .swiper-pagination.swiper-pagination-hidden { 200 | opacity: 0 201 | } 202 | 203 | .swiper-container-horizontal>.swiper-pagination-bullets, 204 | .swiper-pagination-custom, 205 | .swiper-pagination-fraction { 206 | bottom: 19px; 207 | left: 0; 208 | width: 100% 209 | } 210 | 211 | .swiper-pagination-bullet { 212 | width: .18rem; 213 | height: .18rem; 214 | display: inline-block; 215 | border-radius: 100%; 216 | background: #d2d2d2; 217 | /* opacity: .2 */ 218 | } 219 | 220 | button.swiper-pagination-bullet { 221 | border: none; 222 | margin: 0; 223 | padding: 0; 224 | box-shadow: none; 225 | -moz-appearance: none; 226 | -ms-appearance: none; 227 | -webkit-appearance: none; 228 | appearance: none 229 | } 230 | 231 | .swiper-pagination-clickable .swiper-pagination-bullet { 232 | cursor: pointer 233 | } 234 | 235 | .swiper-pagination-white .swiper-pagination-bullet { 236 | background: #fff 237 | } 238 | 239 | .swiper-pagination-bullet-active { 240 | opacity: 1; 241 | background: #ff995c; 242 | } 243 | 244 | .swiper-pagination-white .swiper-pagination-bullet-active { 245 | background: #fff 246 | } 247 | 248 | .swiper-pagination-black .swiper-pagination-bullet-active { 249 | background: #000 250 | } 251 | 252 | .swiper-container-vertical>.swiper-pagination-bullets { 253 | right: 10px; 254 | top: 50%; 255 | -webkit-transform: translate3d(0, -50%, 0); 256 | -moz-transform: translate3d(0, -50%, 0); 257 | -o-transform: translate(0, -50%); 258 | -ms-transform: translate3d(0, -50%, 0); 259 | transform: translate3d(0, -50%, 0) 260 | } 261 | 262 | .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { 263 | margin: 5px 0; 264 | display: block 265 | } 266 | 267 | .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { 268 | margin: 0 3.5px 269 | } 270 | 271 | .swiper-pagination-progress { 272 | background: rgba(0, 0, 0, .25); 273 | position: absolute 274 | } 275 | 276 | .swiper-pagination-progress .swiper-pagination-progressbar { 277 | background: #007aff; 278 | position: absolute; 279 | left: 0; 280 | top: 0; 281 | width: 100%; 282 | height: 100%; 283 | -webkit-transform: scale(0); 284 | -ms-transform: scale(0); 285 | -o-transform: scale(0); 286 | transform: scale(0); 287 | -webkit-transform-origin: left top; 288 | -moz-transform-origin: left top; 289 | -ms-transform-origin: left top; 290 | -o-transform-origin: left top; 291 | transform-origin: left top 292 | } 293 | 294 | .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { 295 | -webkit-transform-origin: right top; 296 | -moz-transform-origin: right top; 297 | -ms-transform-origin: right top; 298 | -o-transform-origin: right top; 299 | transform-origin: right top 300 | } 301 | 302 | .swiper-container-horizontal>.swiper-pagination-progress { 303 | width: 100%; 304 | height: 4px; 305 | left: 0; 306 | top: 0 307 | } 308 | 309 | .swiper-container-vertical>.swiper-pagination-progress { 310 | width: 4px; 311 | height: 100%; 312 | left: 0; 313 | top: 0 314 | } 315 | 316 | .swiper-pagination-progress.swiper-pagination-white { 317 | background: rgba(255, 255, 255, .5) 318 | } 319 | 320 | .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { 321 | background: #fff 322 | } 323 | 324 | .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { 325 | background: #000 326 | } 327 | 328 | .swiper-container-3d { 329 | -webkit-perspective: 1200px; 330 | -moz-perspective: 1200px; 331 | -o-perspective: 1200px; 332 | perspective: 1200px 333 | } 334 | 335 | .swiper-container-3d .swiper-cube-shadow, 336 | .swiper-container-3d .swiper-slide, 337 | .swiper-container-3d .swiper-slide-shadow-bottom, 338 | .swiper-container-3d .swiper-slide-shadow-left, 339 | .swiper-container-3d .swiper-slide-shadow-right, 340 | .swiper-container-3d .swiper-slide-shadow-top, 341 | .swiper-container-3d .swiper-wrapper { 342 | -webkit-transform-style: preserve-3d; 343 | -moz-transform-style: preserve-3d; 344 | -ms-transform-style: preserve-3d; 345 | transform-style: preserve-3d 346 | } 347 | 348 | .swiper-container-3d .swiper-slide-shadow-bottom, 349 | .swiper-container-3d .swiper-slide-shadow-left, 350 | .swiper-container-3d .swiper-slide-shadow-right, 351 | .swiper-container-3d .swiper-slide-shadow-top { 352 | position: absolute; 353 | left: 0; 354 | top: 0; 355 | width: 100%; 356 | height: 100%; 357 | pointer-events: none; 358 | z-index: 10 359 | } 360 | 361 | .swiper-container-3d .swiper-slide-shadow-left { 362 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 363 | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 364 | background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 365 | background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 366 | background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 367 | } 368 | 369 | .swiper-container-3d .swiper-slide-shadow-right { 370 | background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 371 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 372 | background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 373 | background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 374 | background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 375 | } 376 | 377 | .swiper-container-3d .swiper-slide-shadow-top { 378 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 379 | background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 380 | background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 381 | background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 382 | background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 383 | } 384 | 385 | .swiper-container-3d .swiper-slide-shadow-bottom { 386 | background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); 387 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 388 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 389 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 390 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) 391 | } 392 | 393 | .swiper-container-coverflow .swiper-wrapper, 394 | .swiper-container-flip .swiper-wrapper { 395 | -ms-perspective: 1200px 396 | } 397 | 398 | .swiper-container-cube, 399 | .swiper-container-flip { 400 | overflow: visible 401 | } 402 | 403 | .swiper-container-cube .swiper-slide, 404 | .swiper-container-flip .swiper-slide { 405 | pointer-events: none; 406 | -webkit-backface-visibility: hidden; 407 | -moz-backface-visibility: hidden; 408 | -ms-backface-visibility: hidden; 409 | backface-visibility: hidden; 410 | z-index: 1 411 | } 412 | 413 | .swiper-container-cube .swiper-slide .swiper-slide, 414 | .swiper-container-flip .swiper-slide .swiper-slide { 415 | pointer-events: none 416 | } 417 | 418 | .swiper-container-cube .swiper-slide-active, 419 | .swiper-container-cube .swiper-slide-active .swiper-slide-active, 420 | .swiper-container-flip .swiper-slide-active, 421 | .swiper-container-flip .swiper-slide-active .swiper-slide-active { 422 | pointer-events: auto 423 | } 424 | 425 | .swiper-container-cube .swiper-slide-shadow-bottom, 426 | .swiper-container-cube .swiper-slide-shadow-left, 427 | .swiper-container-cube .swiper-slide-shadow-right, 428 | .swiper-container-cube .swiper-slide-shadow-top, 429 | .swiper-container-flip .swiper-slide-shadow-bottom, 430 | .swiper-container-flip .swiper-slide-shadow-left, 431 | .swiper-container-flip .swiper-slide-shadow-right, 432 | .swiper-container-flip .swiper-slide-shadow-top { 433 | z-index: 0; 434 | -webkit-backface-visibility: hidden; 435 | -moz-backface-visibility: hidden; 436 | -ms-backface-visibility: hidden; 437 | backface-visibility: hidden 438 | } 439 | 440 | .swiper-container-cube .swiper-slide { 441 | visibility: hidden; 442 | -webkit-transform-origin: 0 0; 443 | -moz-transform-origin: 0 0; 444 | -ms-transform-origin: 0 0; 445 | transform-origin: 0 0; 446 | width: 100%; 447 | height: 100% 448 | } 449 | 450 | .swiper-container-cube.swiper-container-rtl .swiper-slide { 451 | -webkit-transform-origin: 100% 0; 452 | -moz-transform-origin: 100% 0; 453 | -ms-transform-origin: 100% 0; 454 | transform-origin: 100% 0 455 | } 456 | 457 | .swiper-container-cube .swiper-slide-active, 458 | .swiper-container-cube .swiper-slide-next, 459 | .swiper-container-cube .swiper-slide-next+.swiper-slide, 460 | .swiper-container-cube .swiper-slide-prev { 461 | pointer-events: auto; 462 | visibility: visible 463 | } 464 | 465 | .swiper-container-cube .swiper-cube-shadow { 466 | position: absolute; 467 | left: 0; 468 | bottom: 0; 469 | width: 100%; 470 | height: 100%; 471 | background: #000; 472 | opacity: .6; 473 | -webkit-filter: blur(50px); 474 | filter: blur(50px); 475 | z-index: 0 476 | } 477 | 478 | .swiper-container-fade.swiper-container-free-mode .swiper-slide { 479 | -webkit-transition-timing-function: ease-out; 480 | -moz-transition-timing-function: ease-out; 481 | -ms-transition-timing-function: ease-out; 482 | -o-transition-timing-function: ease-out; 483 | transition-timing-function: ease-out 484 | } 485 | 486 | .swiper-container-fade .swiper-slide { 487 | pointer-events: none; 488 | -webkit-transition-property: opacity; 489 | -moz-transition-property: opacity; 490 | -o-transition-property: opacity; 491 | transition-property: opacity 492 | } 493 | 494 | .swiper-container-fade .swiper-slide .swiper-slide { 495 | pointer-events: none 496 | } 497 | 498 | .swiper-container-fade .swiper-slide-active, 499 | .swiper-container-fade .swiper-slide-active .swiper-slide-active { 500 | pointer-events: auto 501 | } 502 | 503 | .swiper-zoom-container { 504 | width: 100%; 505 | height: 100%; 506 | display: -webkit-box; 507 | display: -moz-box; 508 | display: -ms-flexbox; 509 | display: -webkit-flex; 510 | display: flex; 511 | -webkit-box-pack: center; 512 | -moz-box-pack: center; 513 | -ms-flex-pack: center; 514 | -webkit-justify-content: center; 515 | justify-content: center; 516 | -webkit-box-align: center; 517 | -moz-box-align: center; 518 | -ms-flex-align: center; 519 | -webkit-align-items: center; 520 | align-items: center; 521 | text-align: center 522 | } 523 | 524 | .swiper-zoom-container>canvas, 525 | .swiper-zoom-container>img, 526 | .swiper-zoom-container>svg { 527 | max-width: 100%; 528 | max-height: 100%; 529 | object-fit: contain 530 | } 531 | 532 | .swiper-scrollbar { 533 | border-radius: 10px; 534 | position: relative; 535 | -ms-touch-action: none; 536 | background: rgba(0, 0, 0, .1) 537 | } 538 | 539 | .swiper-container-horizontal>.swiper-scrollbar { 540 | position: absolute; 541 | left: 1%; 542 | bottom: 3px; 543 | z-index: 50; 544 | height: 5px; 545 | width: 98% 546 | } 547 | 548 | .swiper-container-vertical>.swiper-scrollbar { 549 | position: absolute; 550 | right: 3px; 551 | top: 1%; 552 | z-index: 50; 553 | width: 5px; 554 | height: 98% 555 | } 556 | 557 | .swiper-scrollbar-drag { 558 | height: 100%; 559 | width: 100%; 560 | position: relative; 561 | background: rgba(0, 0, 0, .5); 562 | border-radius: 10px; 563 | left: 0; 564 | top: 0 565 | } 566 | 567 | .swiper-scrollbar-cursor-drag { 568 | cursor: move 569 | } 570 | 571 | .swiper-lazy-preloader { 572 | width: 42px; 573 | height: 42px; 574 | position: absolute; 575 | left: 50%; 576 | top: 50%; 577 | margin-left: -21px; 578 | margin-top: -21px; 579 | z-index: 10; 580 | -webkit-transform-origin: 50%; 581 | -moz-transform-origin: 50%; 582 | transform-origin: 50%; 583 | -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; 584 | -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; 585 | animation: swiper-preloader-spin 1s steps(12, end) infinite 586 | } 587 | 588 | .swiper-lazy-preloader:after { 589 | display: block; 590 | content: ""; 591 | width: 100%; 592 | height: 100%; 593 | 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"); 594 | background-position: 50%; 595 | -webkit-background-size: 100%; 596 | background-size: 100%; 597 | background-repeat: no-repeat 598 | } 599 | 600 | .swiper-lazy-preloader-white:after { 601 | 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") 602 | } 603 | 604 | @-webkit-keyframes swiper-preloader-spin { 605 | 100% { 606 | -webkit-transform: rotate(360deg) 607 | } 608 | } 609 | 610 | @keyframes swiper-preloader-spin { 611 | 100% { 612 | transform: rotate(360deg) 613 | } 614 | } -------------------------------------------------------------------------------- /images/aaa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/aaa.png -------------------------------------------------------------------------------- /images/addmusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/addmusic.png -------------------------------------------------------------------------------- /images/article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/article.png -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/background.png -------------------------------------------------------------------------------- /images/background2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/background2.png -------------------------------------------------------------------------------- /images/background3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/background3.png -------------------------------------------------------------------------------- /images/ben1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/ben1.png -------------------------------------------------------------------------------- /images/ccc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/ccc.png -------------------------------------------------------------------------------- /images/cebian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/cebian.png -------------------------------------------------------------------------------- /images/cebian2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/cebian2.png -------------------------------------------------------------------------------- /images/circular2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/circular2.png -------------------------------------------------------------------------------- /images/circular3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/circular3.png -------------------------------------------------------------------------------- /images/dd.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/dd.gif -------------------------------------------------------------------------------- /images/ellipse1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/ellipse1.png -------------------------------------------------------------------------------- /images/ellipse2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/ellipse2.png -------------------------------------------------------------------------------- /images/ellipse3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/ellipse3.png -------------------------------------------------------------------------------- /images/foot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/foot.png -------------------------------------------------------------------------------- /images/good.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/good.png -------------------------------------------------------------------------------- /images/huojian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/huojian.png -------------------------------------------------------------------------------- /images/kaixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/kaixin.png -------------------------------------------------------------------------------- /images/list_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/list_b.png -------------------------------------------------------------------------------- /images/list_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/list_top.png -------------------------------------------------------------------------------- /images/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/mobile.png -------------------------------------------------------------------------------- /images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/music.png -------------------------------------------------------------------------------- /images/note1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/note1.png -------------------------------------------------------------------------------- /images/note2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/note2.png -------------------------------------------------------------------------------- /images/notobvious.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/notobvious.png -------------------------------------------------------------------------------- /images/pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/pic.png -------------------------------------------------------------------------------- /images/polygon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/polygon.png -------------------------------------------------------------------------------- /images/polygon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/polygon2.png -------------------------------------------------------------------------------- /images/pyramid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/pyramid.png -------------------------------------------------------------------------------- /images/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/rectangle.png -------------------------------------------------------------------------------- /images/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/rocket.png -------------------------------------------------------------------------------- /images/rocket2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/rocket2.png -------------------------------------------------------------------------------- /images/rocket3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/rocket3.png -------------------------------------------------------------------------------- /images/rocketfly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/rocketfly.png -------------------------------------------------------------------------------- /images/satellite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/satellite.png -------------------------------------------------------------------------------- /images/smallglob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/smallglob.png -------------------------------------------------------------------------------- /images/star11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/star11.png -------------------------------------------------------------------------------- /images/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/start.png -------------------------------------------------------------------------------- /images/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/video.png -------------------------------------------------------------------------------- /images/video2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/video2.png -------------------------------------------------------------------------------- /images/wu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/wu.png -------------------------------------------------------------------------------- /images/yinfu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/yinfu.png -------------------------------------------------------------------------------- /images/yuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/yuan.png -------------------------------------------------------------------------------- /images/yun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/yun.png -------------------------------------------------------------------------------- /images/yun2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/yun2.png -------------------------------------------------------------------------------- /images/yun3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yutao331763646/swiperAndcss3/e812ccfe87057749a0eabdceb4a4eefbf0f890e4/images/yun3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 引导页 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 | 跳过 27 | 28 | 29 | 30 |
31 |
32 | 取消 33 | 传统模式 34 | 发布 35 |
36 |
37 |
38 |
39 | 加入视频文件 40 | 41 | 42 |
43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 | 编辑封面 61 | 62 | 63 |
64 |
65 |
66 | 图片 67 | 音乐 68 | 视频 69 |
70 |
71 | 72 | 73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |

图文并茂的经典模式

83 |

图文编辑神器，制作精美文章就是So easy！

84 |
85 |
86 |
87 |
88 |
89 | 跳过 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
107 |

创意十足的自由模式

108 |

图文自由排版, 你也可以做出这么好看的手账!

109 |

(即将上线)

110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 |
135 |
136 | 137 | 138 |
139 | 140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |

点赞文章的首页推荐

152 |

图文编辑神器，制作精美文章就是So easy！

153 |
立即体验
154 |
155 |
156 |
157 |
158 |
159 |
160 | 161 | 162 | 169 | 170 | 171 | --------------------------------------------------------------------------------