你的位置:首页 > 网页设计

[网页设计]【视觉控】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