心心念念的新年过完了~却没念到年会,更没念到年终奖~哎,以任何理由不发年终奖的公司都是臭流氓~然,我们公司没有理由,压根儿就没提这事,哇卡卡卡卡!!!======================== 华丽丽的跳水线===========================年后第一天, ...
心心念念的新年过完了~却没念到年会,更没念到年终奖~哎,以任何理由不发年终奖的公司都是臭流氓~然,我们公司没有理由,压根儿就没提这事,哇卡卡卡卡!!!
======================== 华丽丽的跳水线===========================
年后第一天,公司人不多,闲来逛逛各个论坛,发现一个小特效,拿出来共享一下,顺便请大拿帮忙看看一个奇葩的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='/images/loading.gif' data-original="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>
原标题:【视觉控】3D时钟
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。