【视觉控】3D时钟
心心念念的新年过完了~却没念到年会，更没念到年终奖~哎，以任何理由不发年终奖的公司都是臭流氓~然，我们公司没有理由，压根儿就没提这事，哇卡卡卡卡！！！
======================== 华丽丽的跳水线===========================
年后第一天，公司人不多，闲来逛逛各个论坛，发现一个小特效，拿出来共享一下，顺便请大拿帮忙看看一个奇葩的BUG~
来人~上代码！
喳~
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 <title>Countdown Clock</title> 6 <style> 7 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ 8 /* Reset */ 9 * { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13 } 14 15 a { 16 cursor: pointer; 17 text-decoration: none; 18 color: #ccc; 19 } 20 21 a:hover { 22 color: #fff; 23 } 24 25 ul { 26 list-style: none 27 } 28 29 .clearfix:before, 30 .clearfix:after { 31 content: " "; 32 display: table; 33 } 34 35 .clearfix:after { 36 clear: both; 37 } 38 39 .clearfix { 40 *zoom: 1; 41 } 42 43 /* Main */ 44 45 html, body { 46 min-height: 100%; 47 } 48 49 body { 50 font: normal 11px "Helvetica Neue", Helvetica, sans-serif; 51 user-select: none; 52 color: #888; 53 text-shadow: 0 1px 0 rgba(0, 0, 0, .3); 54 background: rgb(150, 150, 150); 55 background: -moz-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 56 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(150, 150, 150, 1)), color-stop(100%, rgba(89, 89, 89, 1))); 57 background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 58 background: -o-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 59 background: -ms-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 60 background: radial-gradient(ellipse at center, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%); 61 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#969696', endColorstr = '#595959', GradientType = 1); 62 63 } 64 65 .container { 66 text-align: center; 67 position: absolute; 68 left: 50%; 69 top: 50%; 70 width: 140px; 71 height: 90px; 72 margin: -45px 0 0 -70px; 73 } 74 75 #social { 76 text-align: center; 77 position: absolute; 78 bottom: 14%; 79 width: 100%; 80 } 81 #social p{ 82 margin-bottom: 10px; 83 } 84 85 #social ul, 86 #social li { 87 display: inline-block; 88 } 89 90 /* Skeleton */ 91 92 ul.flip { 93 position: relative; 94 float: left; 95 margin: 5px; 96 width: 60px; 97 height: 90px; 98 font-size: 80px; 99 font-weight: bold; 100 line-height: 87px; 101 border-radius: 6px; 102 box-shadow: 0 2px 5px rgba(0, 0, 0, .7); 103 } 104 105 ul.flip li { 106 z-index: 1; 107 position: absolute; 108 left: 0; 109 top: 0; 110 width: 100%; 111 height: 100%; 112 113 } 114 115 ul.flip li:first-child { 116 z-index: 2; 117 } 118 119 ul.flip li a { 120 display: block; 121 height: 100%; 122 perspective: 200px; 123 } 124 125 ul.flip li a div { 126 z-index: 1; 127 position: absolute; 128 left: 0; 129 width: 100%; 130 height: 50%; 131 overflow: hidden; 132 } 133 134 ul.flip li a div .shadow { 135 position: absolute; 136 width: 100%; 137 height: 100%; 138 z-index: 2; 139 } 140 141 ul.flip li a div.up { 142 transform-origin: 50% 100%; 143 top: 0; 144 } 145 146 ul.flip li a div.up:after { 147 content: ""; 148 position:absolute; 149 top:44px; 150 left:0; 151 z-index: 5; 152 width: 100%; 153 height: 3px; 154 background-color: rgba(0,0,0,.4); 155 } 156 157 ul.flip li a div.down { 158 transform-origin: 50% 0%; 159 bottom: 0; 160 } 161 162 ul.flip li a div div.inn { 163 position: absolute; 164 left: 0; 165 z-index: 1; 166 width: 100%; 167 height: 200%; 168 color: #ccc; 169 text-shadow: 0 1px 2px #000; 170 text-align: center; 171 background-color: #333; 172 border-radius: 6px; 173 } 174 175 ul.flip li a div.up div.inn { 176 top: 0; 177 178 } 179 180 ul.flip li a div.down div.inn { 181 bottom: 0; 182 } 183 184 /* PLAY */ 185 186 body.play ul li.before { 187 z-index: 3; 188 } 189 190 body.play ul li.active { 191 animation: asd .5s .5s linear both; 192 z-index: 2; 193 } 194 195 @keyframes asd { 196 0% { 197 z-index: 2; 198 } 199 5% { 200 z-index: 4; 201 } 202 100% { 203 z-index: 4; 204 } 205 } 206 207 body.play ul li.active .down { 208 z-index: 2; 209 animation: turn .5s .5s linear both; 210 } 211 212 @keyframes turn { 213 0% { 214 transform: rotateX(90deg); 215 } 216 100% { 217 transform: rotateX(0deg); 218 } 219 } 220 221 body.play ul li.before .up { 222 z-index: 2; 223 animation: turn2 .5s linear both; 224 } 225 226 @keyframes turn2 { 227 0% { 228 transform: rotateX(0deg); 229 } 230 100% { 231 transform: rotateX(-90deg); 232 } 233 } 234 235 /* SHADOW */ 236 237 body.play ul li.before .up .shadow { 238 background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 239 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); 240 background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 241 background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 242 background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 243 background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 244 animation: show .5s linear both; 245 } 246 247 body.play ul li.active .up .shadow { 248 background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 249 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); 250 background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 251 background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 252 background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 253 background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); 254 animation: hide .5s .3s linear both; 255 } 256 257 /*DOWN*/ 258 259 body.play ul li.before .down .shadow { 260 background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 261 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1))); 262 background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 263 background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 264 background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 265 background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 266 animation: show .5s linear both; 267 } 268 269 body.play ul li.active .down .shadow { 270 background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 271 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1))); 272 background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 273 background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 274 background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 275 background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%); 276 animation: hide .5s .3s linear both; 277 } 278 279 @keyframes show { 280 0% { 281 opacity: 0; 282 } 283 100% { 284 opacity: 1; 285 } 286 } 287 288 @keyframes hide { 289 0% { 290 opacity: 1; 291 } 292 100% { 293 opacity: 0; 294 } 295 } 296 </style> 297 </head> 298 299 <body> 300 301 <div class="container"> 302 <ul class="flip minutePlay"> 303 <li> 304 <a href="#"> 305 <div class="up"> 306 <div class="shadow"></div> 307 <div class="inn">0</div> 308 </div> 309 <div class="down"> 310 <div class="shadow"></div> 311 <div class="inn">0</div> 312 </div> 313 </a> 314 </li> 315 <li> 316 <a href="#"> 317 <div class="up"> 318 <div class="shadow"></div> 319 <div class="inn">0</div> 320 </div> 321 <div class="down"> 322 <div class="shadow"></div> 323 <div class="inn">0</div> 324 </div> 325 </a> 326 </li> 327 <li> 328 <a href="#"> 329 <div class="up"> 330 <div class="shadow"></div> 331 <div class="inn">1</div> 332 </div> 333 <div class="down"> 334 <div class="shadow"></div> 335 <div class="inn">1</div> 336 </div> 337 </a> 338 </li> 339 <li> 340 <a href="#"> 341 <div class="up"> 342 <div class="shadow"></div> 343 <div class="inn">2</div> 344 </div> 345 <div class="down"> 346 <div class="shadow"></div> 347 <div class="inn">2</div> 348 </div> 349 </a> 350 </li> 351 <li> 352 <a href="#"> 353 <div class="up"> 354 <div class="shadow"></div> 355 <div class="inn">3</div> 356 </div> 357 <div class="down"> 358 <div class="shadow"></div> 359 <div class="inn">3</div> 360 </div> 361 </a> 362 </li> 363 <li> 364 <a href="#"> 365 <div class="up"> 366 <div class="shadow"></div> 367 <div class="inn">4</div> 368 </div> 369 <div class="down"> 370 <div class="shadow"></div> 371 <div class="inn">4</div> 372 </div> 373 </a> 374 </li> 375 <li> 376 <a href="#"> 377 <div class="up"> 378 <div class="shadow"></div> 379 <div class="inn">5</div> 380 </div> 381 <div class="down"> 382 <div class="shadow"></div> 383 <div class="inn">5</div> 384 </div> 385 </a> 386 </li> 387 </ul> 388 <ul class="flip secondPlay"> 389 <li> 390 <a href="#"> 391 <div class="up"> 392 <div class="shadow"></div> 393 <div class="inn">0</div> 394 </div> 395 <div class="down"> 396 <div class="shadow"></div> 397 <div class="inn">0</div> 398 </div> 399 </a> 400 </li> 401 <li> 402 <a href="#"> 403 <div class="up"> 404 <div class="shadow"></div> 405 <div class="inn">1</div> 406 </div> 407 <div class="down"> 408 <div class="shadow"></div> 409 <div class="inn">1</div> 410 </div> 411 </a> 412 </li> 413 <li> 414 <a href="#"> 415 <div class="up"> 416 <div class="shadow"></div> 417 <div class="inn">2</div> 418 </div> 419 <div class="down"> 420 <div class="shadow"></div> 421 <div class="inn">2</div> 422 </div> 423 </a> 424 </li> 425 <li> 426 <a href="#"> 427 <div class="up"> 428 <div class="shadow"></div> 429 <div class="inn">3</div> 430 </div> 431 <div class="down"> 432 <div class="shadow"></div> 433 <div class="inn">3</div> 434 </div> 435 </a> 436 </li> 437 <li> 438 <a href="#"> 439 <div class="up"> 440 <div class="shadow"></div> 441 <div class="inn">4</div> 442 </div> 443 <div class="down"> 444 <div class="shadow"></div> 445 <div class="inn">4</div> 446 </div> 447 </a> 448 </li> 449 <li> 450 <a href="#"> 451 <div class="up"> 452 <div class="shadow"></div> 453 <div class="inn">5</div> 454 </div> 455 <div class="down"> 456 <div class="shadow"></div> 457 <div class="inn">5</div> 458 </div> 459 </a> 460 </li> 461 <li> 462 <a href="#"> 463 <div class="up"> 464 <div class="shadow"></div> 465 <div class="inn">6</div> 466 </div> 467 <div class="down"> 468 <div class="shadow"></div> 469 <div class="inn">6</div> 470 </div> 471 </a> 472 </li> 473 <li> 474 <a href="#"> 475 <div class="up"> 476 <div class="shadow"></div> 477 <div class="inn">7</div> 478 </div> 479 <div class="down"> 480 <div class="shadow"></div> 481 <div class="inn">7</div> 482 </div> 483 </a> 484 </li> 485 <li> 486 <a href="#"> 487 <div class="up"> 488 <div class="shadow"></div> 489 <div class="inn">8</div> 490 </div> 491 <div class="down"> 492 <div class="shadow"></div> 493 <div class="inn">8</div> 494 </div> 495 </a> 496 </li> 497 <li> 498 <a href="#"> 499 <div class="up"> 500 <div class="shadow"></div> 501 <div class="inn">9</div> 502 </div> 503 <div class="down"> 504 <div class="shadow"></div> 505 <div class="inn">9</div> 506 </div> 507 </a> 508 </li> 509 </ul> 510 </div> 511 </body> 512 </html> 513 <script type="text/javascript" src="jq.js"></script> 514 <script type="text/javascript"> 515 setInterval(function () { 516 secondPlay() 517 }, 1000); 518 519 520 setInterval(function () { 521 minutePlay() 522 }, 10000); 523 524 525 function secondPlay() { 526 $("body").removeClass("play"); 527 var aa = $("ul.secondPlay li.active"); 528 529 if (aa.html() == undefined) { 530 aa = $("ul.secondPlay li").eq(0); 531 aa.addClass("before") 532 .removeClass("active") 533 .next("li") 534 .addClass("active") 535 .closest("body") 536 .addClass("play"); 537 538 } 539 else if (aa.is(":last-child")) { 540 $("ul.secondPlay li").removeClass("before"); 541 aa.addClass("before").removeClass("active"); 542 aa = $("ul.secondPlay li").eq(0); 543 aa.addClass("active") 544 .closest("body") 545 .addClass("play"); 546 } 547 else { 548 $("ul.secondPlay li").removeClass("before"); 549 aa.addClass("before") 550 .removeClass("active") 551 .next("li") 552 .addClass("active") 553 .closest("body") 554 .addClass("play"); 555 } 556 557 } 558 559 function minutePlay() { 560 $("body").removeClass("play"); 561 var aa = $("ul.minutePlay li.active"); 562 563 if (aa.html() == undefined) { 564 aa = $("ul.minutePlay li").eq(0); 565 aa.addClass("before") 566 .removeClass("active") 567 .next("li") 568 .addClass("active") 569 .closest("body") 570 .addClass("play"); 571 572 } 573 else if (aa.is(":last-child")) { 574 $("ul.minutePlay li").removeClass("before"); 575 aa.addClass("before").removeClass("active"); 576 aa = $("ul.minutePlay li").eq(0); 577 aa.addClass("active") 578 .closest("body") 579 .addClass("play"); 580 } 581 else { 582 $("ul.minutePlay li").removeClass("before"); 583 aa.addClass("before") 584 .removeClass("active") 585 .next("li") 586 .addClass("active") 587 .closest("body") 588 .addClass("play"); 589 } 590 591 } 592 </script>
以上源代码经测，在chrome和Firefox下均可正常运行，显示结果如下：
可是在Safari下，显示如下：
IE没有，暂时未测。
===========================================================
自我分析感觉问题出在了一些css3样式上，所以将所以需要添加前缀的属性都添加了-webkit-,-o-,-ms-,-moz-等前缀（测试代码有加，上边附的代码保留的源码），依旧不起作用。
话说，chrome没有问题的话，Safari不应该是同样正常显示的吗？
求赐教~~~~
============================================================
解决方案：
prefixfree.min.js
