本文實(shí)例講述了jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果。分享給大家供大家參考，具體如下：
該特效也是在Jquery插件庫中找到的，感覺效果不錯(cuò)，說不定以后項(xiàng)目中要有絢麗的星空背景，拿來即用，收藏了下。
下載解壓后的目錄結(jié)構(gòu)
index.html頁面代碼：
<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery和CSS3超絢麗的3D星空動畫特效</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style class="cp-pen-styles">body { background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000); background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa); background-attachment: fixed; overflow: hidden; } @keyframes rotate { 0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); } 100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); } } .stars { transform: perspective(500px); transform-style: preserve-3d; position: absolute; bottom: 0; perspective-origin: 50% 100%; left: 50%; animation: rotate 90s infinite linear; } .star { width: 2px; height: 2px; background: #F7F7B6; position: absolute; top: 0; left: 0; transform-origin: 0 0 -300px; transform: translate3d(0, 0, -300px); backface-visibility: hidden; } </style></head><body> <div class="stars"> </div> <script src='js/stopExecutionOnTimeout.js'></script> <script> $(document).ready(function () { var stars = 800; var $stars = $('.stars'); var r = 800; for (var i = 0; i < stars; i++) { if (window.CP.shouldStopExecution(1)) { break; } var $star = $('<div/>').addClass('star'); $stars.append($star); } window.CP.exitedLoop(1); $('.star').each(function () { var cur = $(this); var s = 0.2 + Math.random() * 1; var curR = r + Math.random() * 300; cur.css({ transformOrigin: '0 0 ' + curR + 'px', transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')' }); }); }); </script></body></html>運(yùn)行的效果如下：
其中stopExecutionOnTimeout.js如下：
效果還是挺不錯(cuò)的，你可以改變背景顏色等等定制。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
