本文实例讲述了框架实现炫丽的三维(三维的缩写)旋转星空效果。分享给大家供大家参考，具体如下：

该特效也是在框架插件库中找到的，感觉效果不错，说不定以后项目中要有绚丽的星空背景，拿来即用，收藏了下。

下载解压后的目录结构

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' titlejQuery和CSS3超绚丽的三维(三维的缩写)星空动画特效/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式类=' CP-pen-style '正文{背景：径向-渐变(底部中心200% 100%，#0070aa，#0b2570，# 00035，# 000)；背景技术：径向渐变（顶部中心220% 105%、#000 10%、#000035 40%、#0b2570 65%、# 0070 aa)；背景-附件：固定；飞越：隐藏；} @关键帧旋转{ 0% { transform:透视(400 px)rotateZ(20度)rotateX(-40度)rotateY(0)；} 100% { transform:透视(400 px)rotateZ(20)rotateX(-40)rotateY(-360)；} } .恒星{ transform:透视(500像素)；变换样式： preserve-3d；绝对位置：底部： 0；透视-原始： 50% 100%;左侧： 50%;动画：旋转90年代无限线性；} .星形{ width : 2px h8 : 2px background : # F7F7b 6绝对位置：top : 0；左： 0；变换原点： 0 0-300 px；transform: translate3d(0，0，-300 px)；背面-可见性：隐藏；}/style/head body div class=' stars '/div script src=' js/StOpexecutiontime out。js '/script脚本$(文档)。ready(function(){ var star=800；var $ stars=$(' .星星');var r=800 for(var I=0；我是星星；i ) { if (window .比较应该停止执行(1)){ break；} var $star=$('div/').addCLaSS(' star ')；$星星。append($ star)；}窗口CP。existedloop(1)；$('.星')。每个(function(){ var cur=$(this)；var s=0.2数学。random()* 1；var CurR=r Math。random()* 300；cur。CSS({ transform origin : ' 0 ' CurR ' px '，transform: ' translate3d(0，0，-curR ' px)rotateY(' math。random()* 360 ' deg)rotateX(' math。随机()*-50 )刻度(' s '，' s ')})；});});/脚本/正文/html运行的效果如下：

其中stopExecutionOnTimeout.js如下：复制代码代码如下："使用严格";对象！=窗口类型CP(窗口CP={})，窗口CP。penti mer={ programnolongerbeingmonitore d :1，TIME offer scollito should STOP LOOP :0，_loopExits:{}，_loopTimers:{}，START_MONITORING_AFTER:2e3，STOP _ ALL _ MONITORING _ TIME out :5 E3，MAX _ TIME _ IN _ LOOP _ WO _ exit 33602200，退出LOOP 3360函数(o){ this ._ LoopExents[o]=！0},应该停止循环：函数(o){ if(this。programkilledsostopmonitoring)返回！0;如果(这个。programnolongerbeingmonitored)返回！1;如果（这个_ LoopExents[o])返回！1;var t=这个_ _ GetTime()；if(0===this。time offer葱到应该停止操作)返回这个。time offer葱shouldstoplop=t，1;var I=t-这个。time offer不应循环；如果是开始监控后)返回！1;如果是停止所有监控超时)返回此。0,1;试试这个_checkOnInfiniteLoop(o，t)} catch(n){ 0返回此_ sendErrorMessageToEditor()，这。programkilledsostopmonitoring=！0,0 }返回！1}，_ senderrormessagetoeditor : function(){ try { if(this ._ shot post message()){ var o={ action : '无限循环，第：行._ FindAroundLineNumber()}；父母。postmessage(JSON。stringify(o)，' *)否则这个._ throwanerrortstopen()} catch(t){ this ._ throwanerrortstopen()} }、short _ post message :函数(){返回文档。位置。href。match(/boomerang/)}、_ throwanerrortstopen : function(){ throw '我们在您的笔中发现了一个无限循环。我们已经停止了笔的运行。请更正或联系[emailprotected]'}，_ findaroundlinenumber :函数(){ var o=new Error，t=0；if(o . stack){ var I=o . stack。match(/boomerang S :( d): d/)；I(t=I[1])}返回t}，_ checkoninfinetiloop :函数(o，t){if(！这个_loopTimers[o])返回这个_loopTimers[o]=t，1;var I=t-这个_ Looptimers[o]；如果是最大时间循环退出)在loop: ' o}上抛出"发现无限循环"，gettimes _ : function(){ 0返回新日期}},窗口CP。应该停止执行=函数(o){ 0返回窗口。窗口. CP.exitedLoop=函数{窗口.比较彭蒂默。existedloop(o)}；

效果还是挺不错的，你可以改变背景颜色等等定制。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。