首页 > 代码库 > jquery和css3打造超梦幻的三维动画背景
jquery和css3打造超梦幻的三维动画背景
今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近，由近到远一种飞跃效果。效果非常好看，我们一起看下效果图：
在线预览 源码下载
我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。
html代码：
<div class="container" style="opacity: 0.55; -webkit-perspective: 50px;"> <div style="opacity: 0.2947823575597065; top: 25.280094302041324%; left: 15.581679259241795%; -webkit-transform: translate3d(0px, 0px, -432.3485655846125px);"> </div> <div style="opacity: 0.2362372545831523; top: 36.062830199416766%; left: 49.03769811965006%; -webkit-transform: translate3d(0px, 0px, -300.9242458682137px);"> </div> <div style="opacity: 0.7945728285013693; top: 1.1005283190668242%; left: 89.45601886040826%; -webkit-transform: translate3d(0px, 0px, 220.87633925971335px);"> </div> <div style="opacity: 0.6032704371280895; top: -10.861773561283117%; left: 70.82407544163306%; -webkit-transform: translate3d(0px, 0px, -290.90311310554074px);"> </div> <div style="opacity: 0.5473793530207037; top: -13.786377321983%; left: 77.1884905982503%; -webkit-transform: translate3d(0px, 0px, 236.43288643918842px);"> </div> <div style="opacity: 0.8321063074591623; top: 36.35549054134144%; left: 15.581679259241795%; -webkit-transform: translate3d(0px, 0px, -258.51720729376433px);"> </div> <div style="opacity: 0.2638954450395508; top: 91.56911321935844%; left: 26.51884905982503%; -webkit-transform: translate3d(0px, 0px, 308.45037777725383px);"> </div> <div style="opacity: 0.821706110252273; top: 73.08796227918347%; left: 1.5816792592417945%; -webkit-transform: translate3d(0px, 0px, -373.3157927631445px);"> </div> <div style="opacity: 0.41247042161282194; top: 30.493716980058323%; left: 92.54398113959174%; -webkit-transform: translate3d(0px, 0px, -606.8885474071105px);"> </div> <div style="opacity: 0.5431607328785839; top: 48.50628301994168%; left: 32.91203772081653%; -webkit-transform: translate3d(0px, 0px, 13.21326478553084px);"> </div> <div style="opacity: 0.3379231634960905; top: -5.773811282099647%; left: 59.342924501458086%; -webkit-transform: translate3d(0px, 0px, 115.39683008559905px);"> </div> <div style="opacity: 0.4976874633790573; top: 64.0251320797667%; left: 40.418320740758205%; -webkit-transform: translate3d(0px, 0px, -114.38026472862197px);"> </div> <div style="opacity: 0.5212611585208831; top: 23.824075441633056%; left: 29.07539623930012%; -webkit-transform: translate3d(0px, 0px, -295.4256035899733px);"> </div> <div style="opacity: 0.9216158130296365; top: 92.5816792592418%; left: 26.012566039883353%; -webkit-transform: translate3d(0px, 0px, -263.57639606857356px);"> </div> <div style="opacity: 0.803085562468689; top: 39.98743396011665%; left: -5.430886780641559%; -webkit-transform: translate3d(0px, 0px, -475.36077373200965px);"> </div> <div style="opacity: 0.5951313066301442; top: 64.83664148151641%; left: 43.1884905982503%; -webkit-transform: translate3d(0px, 0px, 130.41996250681888px);"> </div> <div style="opacity: 0.5548650668221975; top: -6.824075441633058%; left: 78.68220757830862%; -webkit-transform: translate3d(0px, 0px, 547.9246037606999px);"> </div> <div style="opacity: 0.26480921421653314; top: 6.543981139591736%; left: 44.92460376069988%; -webkit-transform: translate3d(0px, 0px, -198.63158552628903px);"> </div> <div style="opacity: 0.12745373368645582; top: 12.405754700874851%; left: 76.71990569795868%; -webkit-transform: translate3d(0px, 0px, -173.22418905935348px);"> </div> <div style="opacity: 0.38244975239875467; top: 72.48115094017497%; left: 8.405754700874851%; -webkit-transform: translate3d(0px, 0px, -202.05718911626235px);"> </div> <div style="opacity: 0.4255795852350481; top: 59.12566039883353%; left: 19.40575470087485%; -webkit-transform: translate3d(0px, 0px, 660.4454524790717px);"> </div> <div style="opacity: 0.2793291263417266; top: 84.11309435895018%; left: 46.51884905982503%; -webkit-transform: translate3d(0px, 0px, 328.741754245604px);"> </div> <div style="opacity: 0.43063469609787397; top: 7.924603760699882%; left: 51.08796227918347%; -webkit-transform: translate3d(0px, 0px, -607.3396409693366px);"> </div> <div style="opacity: 0.3743294547206851; top: 50.12566039883353%; left: 31.59424529912515%; -webkit-transform: translate3d(0px, 0px, -822.497716297152px);"> </div> <div style="opacity: 0.5052618019934247; top: 16.569113219358442%; left: 8.631943418775206%; -webkit-transform: translate3d(0px, 0px, 819.5946031916113px);"> </div> <div style="opacity: 0.7319100587968272; top: 59.05026415953341%; left: 13.824075441633058%; -webkit-transform: translate3d(0px, 0px, -320.460018177502px);"> </div> <div style="opacity: 0.45248395095645616; top: -7.3429245014580875%; left: 16.73247173784203%; -webkit-transform: translate3d(0px, 0px, 181.44837811870696px);"> </div> <div style="opacity: 0.9878215328111059; top: 90.51884905982503%; left: 44.025132079766706%; -webkit-transform: translate3d(0px, 0px, 357.19049025679715px);"> </div> <div style="opacity: 0.6463783658299369; top: 31.380622621108145%; left: 94.49371698005832%; -webkit-transform: translate3d(0px, 0px, 670.5135658691568px);"> </div> <div style="opacity: 0.5487027797896961; top: 36.581679259241795%; left: 95.55654717947509%; -webkit-transform: translate3d(0px, 0px, -485.131301481988px);"> </div> <div style="opacity: 0.6260105173758076; top: 58.84920752139976%; left: 88.28009430204132%; -webkit-transform: translate3d(0px, 0px, 160.80950974320282px);"> </div> <div style="opacity: 0.844145209092942; top: 105.79894336186635%; left: 81.33035846157473%; -webkit-transform: translate3d(0px, 0px, 349.6355848433828px);"> </div> <div style="opacity: 0.624518486962012; top: 106.89947168093317%; left: 43.92460376069988%; -webkit-transform: translate3d(0px, 0px, 552.1005283190668px);"> </div> <div style="opacity: 0.45238944136321246; top: 60.100528319066825%; left: 11.025132079766706%; -webkit-transform: translate3d(0px, 0px, -669.2930182344109px);"> </div> <div style="opacity: 0.9006378674194274; top: 93.30522638180803%; left: 71.16335851848359%; -webkit-transform: translate3d(0px, 0px, -227.29594387404606px);"> </div> <div style="opacity: 0.8292944255367867; top: 4.012566039883353%; left: 22.92460376069988%; -webkit-transform: translate3d(0px, 0px, -775.6448673511447px);"> </div> <div style="opacity: 0.450899859431296; top: 51.46858490029162%; left: 9.594245299125149%; -webkit-transform: translate3d(0px, 0px, -804.6339430773221px);"> </div> <div style="opacity: 0.8460599553511161; top: 51.51884905982503%; left: 7.087962279183471%; -webkit-transform: translate3d(0px, 0px, 56.456018860408264px);"> </div> <div style="opacity: 0.6444665822879965; top: 2.7073396580753233%; left: 64.84920752139976%; -webkit-transform: translate3d(0px, 0px, 210.33764131078985px);"> </div> <div style="opacity: 0.5697111950362651; top: 64.35549054134144%; left: 89.50628301994168%; -webkit-transform: translate3d(0px, 0px, 484.80458444502074px);"> </div> <div style="opacity: 0.23027849810136836; top: 38.50628301994168%; left: 79.34292450145809%; -webkit-transform: translate3d(0px, 0px, 379.1524342446609px);"> </div> <div style="opacity: 0.5769023793048005; top: 33.8115094017497%; left: 0.6822075783086188%; -webkit-transform: translate3d(0px, 0px, -132.95301937258796px);"> </div> <div style="opacity: 0.5669354839192088; top: 50.619377378891855%; left: 78.69477361819197%; -webkit-transform: translate3d(0px, 0px, 185.93881156664392px);"> </div> <div style="opacity: 0.5582677264920424; top: 76.59424529912515%; left: 14.150792478600236%; -webkit-transform: translate3d(0px, 0px, -339.03205703649564px);"> </div> <div style="opacity: 0.5150511454597172; top: 32.8115094017497%; left: 64.49371698005832%; -webkit-transform: translate3d(0px, 0px, 392.06283019941674px);"> </div> <div style="opacity: 0.5526981849835917; top: 81.96230188034994%; left: 57.15079247860024%; -webkit-transform: translate3d(0px, 0px, -732.2334715671154px);"> </div> <div style="opacity: 0.32638600507880755; top: 18.468584900291617%; left: 85.55654717947509%; -webkit-transform: translate3d(0px, 0px, -572.8670567519514px);"> </div> <div style="opacity: 0.5777876989580621; top: 63.619377378891855%; left: 50.76124524221629%; -webkit-transform: translate3d(0px, 0px, -459.2225472932928px);"> </div> <div style="opacity: 0.42548854502495664; top: 67.70733965807533%; left: 35.50628301994168%; -webkit-transform: translate3d(0px, 0px, 5.998358233939314px);"> </div> <div style="opacity: 0.820079646281509; top: 32.44345282052491%; left: 98.89947168093317%; -webkit-transform: translate3d(0px, 0px, -715.5747543025129px);"> </div> <div style="opacity: 0.9576128643932926; top: 67.12566039883353%; left: 36.83664148151641%; -webkit-transform: translate3d(0px, 0px, 779.2192637611714px);"> </div> <div style="opacity: 0.8373481672868216; top: 32.98743396011665%; left: 32.51884905982503%; -webkit-transform: translate3d(0px, 0px, 554.9302448438543px);"> </div> <div style="opacity: 0.8658646064081912; top: 96.9748679202333%; left: 94.84920752139976%; -webkit-transform: translate3d(0px, 0px, -369.69441572570577px);"> </div> <div style="opacity: 0.39606496978041933; top: 14.44345282052491%; left: 39.43088678064156%; -webkit-transform: translate3d(0px, 0px, -889.5139237616429px);"> </div> <div style="opacity: 0.432057976649524; top: 60.694773618191974%; left: 40.26752826215797%; -webkit-transform: translate3d(0px, 0px, -546.016565356977px);"> </div> <div style="opacity: 0.9127657033858957; top: 63.51884905982503%; left: 81.40575470087485%; -webkit-transform: translate3d(0px, 0px, 533.0109242738226px);"> </div> <div style="opacity: 0.48131641995247765; top: 41.70733965807533%; left: 94.96230188034994%; -webkit-transform: translate3d(0px, 0px, 557.3432823939443px);"> </div> <div style="opacity: 0.8493540463783269; top: -3.824075441633058%; left: 76.15079247860024%; -webkit-transform: translate3d(0px, 0px, 585.6068113390085px);"> </div> <div style="opacity: 0.6245654973289664; top: 15.912037720816528%; left: 8.949735840466587%; -webkit-transform: translate3d(0px, 0px, -95.15971709387603px);"> </div> <div style="opacity: 0.40098049294659993; top: 75.33035846157473%; left: 73.71990569795868%; -webkit-transform: translate3d(0px, 0px, 348.25132079766706px);"> </div> <div style="opacity: 0.15368353771179627; top: 50.64450945865856%; left: 73.92460376069988%; -webkit-transform: translate3d(0px, 0px, 545.6392262679904px);"> </div> <div style="opacity: 0.7505115812067529; top: 92.89947168093317%; left: 42.138226438716885%; -webkit-transform: translate3d(0px, 0px, 228.89911378844698px);"> </div> <div style="opacity: 0.714504079131281; top: 18.974867920233294%; left: 51.33035846157473%; -webkit-transform: translate3d(0px, 0px, -5.90839629620897px);"> </div> <div style="opacity: 0.30769639283241773; top: 26.188490598250297%; left: 4.075396239300118%; -webkit-transform: translate3d(0px, 0px, -376.6647162402432px);"> </div> <div style="opacity: 1.0131818885403767; top: 19.368056581224792%; left: 60.974867920233294%; -webkit-transform: translate3d(0px, 0px, -362.91603703791026px);"> </div> <div style="opacity: 0.5314067490749046; top: 72.1884905982503%; left: 49.6068113390085%; -webkit-transform: translate3d(0px, 0px, -119.71626427335113px);"> </div> <div style="opacity: 0.31324689812193834; top: 99.45601886040826%; left: 55.98743396011665%; -webkit-transform: translate3d(0px, 0px, -157.48515025726869px);"> </div> <div style="opacity: 0.5164192337813795; top: 47.08796227918347%; left: 81.17592455836694%; -webkit-transform: translate3d(0px, 0px, 527.8240754416331px);"> </div> <div style="opacity: 0.5067106877008114; top: 57.861773561283115%; left: 82.48115094017497%; -webkit-transform: translate3d(0px, 0px, 212.88526387498914px);"> </div> <div style="opacity: 0.4240497661909056; top: 37.456018860408264%; left: 91.55654717947509%; -webkit-transform: translate3d(0px, 0px, 206.69841504279952px);"> </div> <div style="opacity: 0.8076888611667428; top: 30.368056581224792%; left: 49.35549054134144%; -webkit-transform: translate3d(0px, 0px, 697.3234335048458px);"> </div> <div style="opacity: 0.5923478128759918; top: 0.4937169800583235%; left: 15.493716980058323%; -webkit-transform: translate3d(0px, 0px, -188.38790547032326px);"> </div> <div style="opacity: 0.44059618922329974; top: 40.77381128209964%; left: 87.94973584046659%; -webkit-transform: translate3d(0px, 0px, 126.6676418798784px);"> </div> <div style="opacity: 0.4614041014922332; top: 53.98743396011665%; left: 38.73247173784203%; -webkit-transform: translate3d(0px, 0px, 598.7900187465906px);"> </div> <div style="opacity: 0.4962862234839861; top: 66.59424529912515%; left: 10.12566039883353%; -webkit-transform: translate3d(0px, 0px, -782.7596034761556px);"> </div> <div style="opacity: 0.8699765769609815; top: 56.35549054134144%; left: 15.3931886609915%; -webkit-transform: translate3d(0px, 0px, -452.91896267754544px);"> </div> <div style="opacity: 0.47631975601803056; top: 93.93716980058323%; left: 60.35549054134144%; -webkit-transform: translate3d(0px, 0px, 483.87633925971335px);"> </div> <div style="opacity: 0.4192526593030663; top: 13.631943418775206%; left: 25.44345282052491%; -webkit-transform: translate3d(0px, 0px, -49.76817019894523px);"> </div> <div style="opacity: 0.3937115110923392; top: -4.280094302041324%; left: 60.899471680933175%; -webkit-transform: translate3d(0px, 0px, -266.07211270717875px);"> </div> <div style="opacity: 0.7728430737809499; top: 40.6068113390085%; left: 7.251320797667059%; -webkit-transform: translate3d(0px, 0px, -380.9821507694484px);"> </div> <div style="opacity: 0.5009402821608286; top: 34.91203772081653%; left: 6.443452820524912%; -webkit-transform: translate3d(0px, 0px, 153.69841504279952px);"> </div> <div style="opacity: 0.41528560736884934; top: 57.694773618191974%; left: 30.12566039883353%; -webkit-transform: translate3d(0px, 0px, 277.57767994214805px);"> </div> <div style="opacity: 0.30860871726442246; top: 48.062830199416766%; left: 12.238754757783706%; -webkit-transform: translate3d(0px, 0px, -97.86541498589068px);"> </div> <div style="opacity: 0.22883482242769476; top: 93.96230188034994%; left: 83.5816792592418%; -webkit-transform: translate3d(0px, 0px, 61.28937680980329px);"> </div> <div style="opacity: 0.6308894992744223; top: 24.280094302041324%; left: 70.56911321935844%; -webkit-transform: translate3d(0px, 0px, 269.03041527043496px);"> </div> <div style="opacity: 0.2887155508812919; top: 54.88690564104982%; left: 86.35549054134144%; -webkit-transform: translate3d(0px, 0px, 586.4580185189551px);"> </div> <div style="opacity: 0.6007739924879153; top: 46.83664148151641%; left: 4.175924558366942%; -webkit-transform: translate3d(0px, 0px, -19.145151395445822px);"> </div> <div style="opacity: 0.6108126305487662; top: 69.82407544163306%; left: 55.51884905982503%; -webkit-transform: translate3d(0px, 0px, 272.11309435895015px);"> </div> <div style="opacity: 0.4552901689810411; top: 59.94973584046659%; left: 0.2513207976670593%; -webkit-transform: translate3d(0px, 0px, -718.0360563535894px);"> </div> <div style="opacity: 0.6243567037643859; top: 66.1884905982503%; left: 6.493716980058323%; -webkit-transform: translate3d(0px, 0px, 702.5836789177887px);"> </div> <div style="opacity: 0.6382329138560177; top: -3.3303584615747344%; left: 3.5942452991251477%; -webkit-transform: translate3d(0px, 0px, 245.2731693453124px);"> </div> <div style="opacity: 0.3415451599114475; top: 24.912037720816528%; left: 17.20105663813365%; -webkit-transform: translate3d(0px, 0px, -827.3594898584352px);"> </div> <div style="opacity: 0.6963576411280878; top: 25.100528319066825%; left: 47.26752826215797%; -webkit-transform: translate3d(0px, 0px, -42.694773618191974px);"> </div> <div style="opacity: 0.6054379693208507; top: 66.92460376069988%; left: -0.9371698005832352%; -webkit-transform: translate3d(0px, 0px, -10.576038176087366px);"> </div> <div style="opacity: 0.3577430399365196; top: 55.543981139591736%; left: -19.254962222274617%; -webkit-transform: translate3d(0px, 0px, 86.23475544068998px);"> </div> <div style="opacity: 0.237993585689399; top: 54.50628301994168%; left: 2.619377378891853%; -webkit-transform: translate3d(0px, 0px, -581.4239618239126px);"> </div> <div style="opacity: 0.8394841599942787; top: 73.66964153842527%; left: 12.987433960116647%; -webkit-transform: translate3d(0px, 0px, -714.4831505987219px);"> </div> <div style="opacity: 0.43878905698041676; top: 14.493716980058323%; left: 106.79894336186635%; -webkit-transform: translate3d(0px, 0px, 89.46694313423093px);"> </div> <div style="opacity: 0.8401818872526222; top: 57.694773618191974%; left: 11.6068113390085%; -webkit-transform: translate3d(0px, 0px, 112.40611259336106px);"> </div> <div style="opacity: 0.5201176693529403; top: 59.92460376069988%; left: 19.861773561283115%; -webkit-transform: translate3d(0px, 0px, 766.5747543025129px);"> </div> <div style="opacity: 0.5382026821159639; top: 4.631943418775206%; left: 82.84920752139976%; -webkit-transform: translate3d(0px, 0px, -656.7202635904448px);"> </div> <div style="opacity: 0.5184303640187078; top: 92.86177356128312%; left: 60.73247173784203%; -webkit-transform: translate3d(0px, 0px, -320.25096290518087px);"> </div> <div style="opacity: 0.7107626656844216; top: 69.9748679202333%; left: 97.93716980058323%; -webkit-transform: translate3d(0px, 0px, -47.69877293528572px);"> </div> <div style="opacity: 0.5063944607627032; top: 38.22618871790036%; left: 118.26752826215797%; -webkit-transform: translate3d(0px, 0px, 25.07539623930012px);"> </div> <div style="opacity: 0.5358165529850207; top: 8.087962279183472%; left: 60.3931886609915%; -webkit-transform: translate3d(0px, 0px, 131px);"> </div> <div style="opacity: 0.7539047334435577; top: 35.88690564104982%; left: 70.73247173784203%; -webkit-transform: translate3d(0px, 0px, -373.65543373248124px);"> </div> <div style="opacity: 0.31011703714266436; top: 54.694773618191974%; left: 91.28009430204132%; -webkit-transform: translate3d(0px, 0px, -304.2837357266489px);"> </div> <div style="opacity: 0.5361109570530102; top: 71.86177356128312%; left: 48.49371698005832%; -webkit-transform: translate3d(0px, 0px, -250.4288871220947px);"> </div> <div style="opacity: 0.37286888361439163; top: 92.53141509970838%; left: 38.66964153842527%; -webkit-transform: translate3d(0px, 0px, -112.07539623930012px);"> </div> <div style="opacity: 0.6803797790522811; top: 75.68220757830862%; left: 71.786377321983%; -webkit-transform: translate3d(0px, 0px, 334.6011702558541px);"> </div> <div style="opacity: 0.8387977265409172; top: 31.987433960116647%; left: 82.34292450145809%; -webkit-transform: translate3d(0px, 0px, -184.168999601638px);"> </div> <div style="opacity: 0.6602200675737488; top: 71.45601886040826%; left: 66.71990569795868%; -webkit-transform: translate3d(0px, 0px, 262.8710560690451px);"> </div> <div style="opacity: 0.358246480936524; top: 86.59424529912515%; left: 58.43088678064156%; -webkit-transform: translate3d(0px, 0px, -85.05554735020165px);"> </div> <div style="opacity: 0.5725118722549849; top: 10.631943418775206%; left: 64.61937737889185%; -webkit-transform: translate3d(0px, 0px, -661.046980627412px);"> </div> <div style="opacity: 0.5610712978837; top: 76.6068113390085%; left: -0.4685849002916176%; -webkit-transform: translate3d(0px, 0px, -345.9996421075138px);"> </div> <div style="opacity: 0.22222044380352302; top: 52.83664148151641%; left: 37.100528319066825%; -webkit-transform: translate3d(0px, 0px, -400.42160427287956px);"> </div> <div style="opacity: 0.47330101682285075; top: 88.53141509970838%; left: -11.836641481516411%; -webkit-transform: translate3d(0px, 0px, -283.55126398880685px);"> </div> <div style="opacity: 0.38229503489198824; top: 4.644509458658559%; left: 89.92460376069988%; -webkit-transform: translate3d(0px, 0px, -172.7341135039027px);"> </div> <div style="opacity: 0.6457548044243568; top: 105.3931886609915%; left: 5.987433960116647%; -webkit-transform: translate3d(0px, 0px, -518.4381696298567px);"> </div> <div style="opacity: 0.5934738557367476; top: 15.35549054134144%; left: 10.163358518483589%; -webkit-transform: translate3d(0px, 0px, -124.20434017025502px);"> </div> <div style="opacity: 0.3821871566083709; top: 35.43088678064156%; left: 50.91203772081653%; -webkit-transform: translate3d(0px, 0px, -450.1061694022212px);"> </div> <div style="opacity: 0.6380792420794819; top: 22.468584900291617%; left: 4.012566039883353%; -webkit-transform: translate3d(0px, 0px, 179.60645344652232px);"> </div> <div style="opacity: 0.2558180220280034; top: 77.63194341877521%; left: 49.23875475778371%; -webkit-transform: translate3d(0px, 0px, -395.6120945296767px);"> </div> <div style="opacity: 0.35789300319670864; top: 109.29266034192467%; left: 33.59424529912515%; -webkit-transform: translate3d(0px, 0px, -15.213622678017px);"> </div> <div style="opacity: 0.8155507982807113; top: 53.694773618191974%; left: 97.786377321983%; -webkit-transform: translate3d(0px, 0px, 101.47586774950673px);"> </div> <div style="opacity: 0.2986670959713058; top: 26.59424529912515%; left: -17.773811282099647%; -webkit-transform: translate3d(0px, 0px, -879.4867920233294px);"> </div> <div style="opacity: 0.6562094298205445; top: 31.16335851848359%; left: 15.075396239300119%; -webkit-transform: translate3d(0px, 0px, -458.96758507101816px);"> </div> <div style="opacity: 0.6818672609622133; top: 74.29266034192467%; left: 45.23875475778371%; -webkit-transform: translate3d(0px, 0px, -20.858490029161743px);"> </div> <div style="opacity: 0.7124118451068036; top: 19.35549054134144%; left: 5.443452820524912%; -webkit-transform: translate3d(0px, 0px, -163.07339658075324px);"> </div> <div style="opacity: 0.40211719961051695; top: 78.46858490029162%; left: 35.35549054134144%; -webkit-transform: translate3d(0px, 0px, -273.26788615464415px);"> </div> <div style="opacity: 0.1905104061760466; top: 44.43088678064156%; left: 48%; -webkit-transform: translate3d(0px, 0px, 87.06283019941677px);"> </div> <div style="opacity: 0.34208791326396865; top: 65.06283019941677%; left: 50.062830199416766%; -webkit-transform: translate3d(0px, 0px, -136.0194909966123px);"> </div> <div style="opacity: 0.5551722278813114; top: 55.305226381808026%; left: 9.226188717900353%; -webkit-transform: translate3d(0px, 0px, 377.26917002821864px);"> </div> <div style="opacity: 0.36974901760768153; top: -8.330358461574734%; left: 30.25132079766706%; -webkit-transform: translate3d(0px, 0px, -80.79166051265125px);"> </div> <div style="opacity: 0.6977127874354069; top: 17.330358461574733%; left: 70.77381128209964%; -webkit-transform: translate3d(0px, 0px, 186.71462250729044px);"> </div> <div style="opacity: 0.5831992305519382; top: 102.45601886040826%; left: 112.8115094017497%; -webkit-transform: translate3d(0px, 0px, 614.7308299717813px);"> </div> <div style="opacity: 0.5675460973376805; top: 18.418320740758205%; left: 64.66964153842527%; -webkit-transform: translate3d(0px, 0px, 453.4021132762673px);"> </div> <div style="opacity: 0.1292663889925884; top: 52.84920752139976%; left: 54.55654717947509%; -webkit-transform: translate3d(0px, 0px, -245.98943361866353px);"> </div> <div style="opacity: 0.4737238237103155; top: 6.682207578308619%; left: 63.03769811965006%; -webkit-transform: translate3d(0px, 0px, 382.8564903706149px);"> </div> <div style="opacity: 0.5965602626781422; top: 107.79894336186635%; left: 15.087962279183472%; -webkit-transform: translate3d(0px, 0px, 129.1435096293851px);"> </div> <div style="opacity: 0.7497209898623872; top: 66.1884905982503%; left: 32.50628301994168%; -webkit-transform: translate3d(0px, 0px, -819.7883769805298px);"> </div> <div style="opacity: 0.43948507743590437; top: 68.3931886609915%; left: 47.1884905982503%; -webkit-transform: translate3d(0px, 0px, 103.36241549807036px);"> </div> <div style="opacity: 0.46943234358591734; top: 10.937169800583234%; left: 14.012566039883353%; -webkit-transform: translate3d(0px, 0px, -512.0826790885152px);"> </div> <div style="opacity: 0.6782098603898916; top: 98.96230188034994%; left: 64.66964153842527%; -webkit-transform: translate3d(0px, 0px, -261.4682270078054px);"> </div> <div style="opacity: 1.0353394873600892; top: 40.824075441633056%; left: 44.20105663813365%; -webkit-transform: translate3d(0px, 0px, 456.65343407393436px);"> </div> <div style="opacity: 0.6269328548289838; top: 34.88690564104982%; left: 52.96230188034994%; -webkit-transform: translate3d(0px, 0px, -950.4510935622262px);"> </div> <div style="opacity: 0.6130747438033195; top: 100.45601886040826%; left: 73.46858490029162%; -webkit-transform: translate3d(0px, 0px, -565.4490939036793px);"> </div> <div style="opacity: 0.3411878316802337; top: 103.79894336186635%; left: 8.188490598250295%; -webkit-transform: translate3d(0px, 0px, 466.93716980058326px);"> </div> <div style="opacity: 0.6523572707168036; top: 37.3931886609915%; left: 53.254962222274614%; -webkit-transform: translate3d(0px, 0px, -227.86177356128312px);"> </div> <div style="opacity: 0.8681007740387923; top: 67.77381128209964%; left: 14.949735840466587%; -webkit-transform: translate3d(0px, 0px, 226.03969777819694px);"> </div> <div style="opacity: 0.38475589856728754; top: 58.98743396011665%; left: 14.201056638133648%; -webkit-transform: translate3d(0px, 0px, -565.2569618808214px);"> </div> <div style="opacity: 0.7606582523468411; top: 45.84920752139976%; left: 30.087962279183472%; -webkit-transform: translate3d(0px, 0px, 575.4203203993051px);"> </div> <div style="opacity: 0.49179903752284154; top: 51.63194341877521%; left: 10.238754757783706%; -webkit-transform: translate3d(0px, 0px, -170.65379196642053px);"> </div> <div style="opacity: 0.4893798607295712; top: 14.456018860408264%; left: 46.22618871790036%; -webkit-transform: translate3d(0px, 0px, -656.9371698005832px);"> </div> <div style="opacity: 0.5685081481239442; top: 68.34292450145809%; left: 102.92460376069988%; -webkit-transform: translate3d(0px, 0px, 143.93552803452255px);"> </div> <div style="opacity: 0.661947387022489; top: 20.213622678017%; left: 20.824075441633056%; -webkit-transform: translate3d(0px, 0px, 458.9590183482286px);"> </div> <div style="opacity: 0.19258232030110017; top: 19.16335851848359%; left: -6.773811282099647%; -webkit-transform: translate3d(0px, 0px, -141.1884905982503px);"> </div> <div style="opacity: 0.6096141726263856; top: 20.631943418775208%; left: -19.74867920233294%; -webkit-transform: translate3d(0px, 0px, -10.515207635217472px);"> </div> <div style="opacity: 0.5483274079964251; top: 72.88690564104982%; left: 78.98743396011665%; -webkit-transform: translate3d(0px, 0px, 434.1187354421046px);"> </div> <div style="opacity: 0.36780886791711526; top: 31.619377378891855%; left: 77.0251320797667%; -webkit-transform: translate3d(0px, 0px, 497.8297165247875px);"> </div> <div style="opacity: 0.6671979290079355; top: 48.6068113390085%; left: 98.89947168093317%; -webkit-transform: translate3d(0px, 0px, 673.6752826215798px);"> </div> <div style="opacity: 0.524474369083155; top: -5.811509401749705%; left: 76.94973584046659%; -webkit-transform: translate3d(0px, 0px, -910.6537919664205px);"> </div> <div style="opacity: 0.4154300114314185; top: 40.33035846157473%; left: 57.88690564104982%; -webkit-transform: translate3d(0px, 0px, 200.89911378844698px);"> </div> <div style="opacity: 0.9030289176620128; top: 52.84920752139976%; left: 90.83664148151641%; -webkit-transform: translate3d(0px, 0px, 328.91896267754544px);"> </div> <div style="opacity: 0.389389160781196; top: -1.924603760699882%; left: 36.50628301994168%; -webkit-transform: translate3d(0px, 0px, 550.4543770943476px);"> </div> <div style="opacity: 0.7937396284898923; top: 41.062830199416766%; left: 108.786377321983%; -webkit-transform: translate3d(0px, 0px, 135.61537806179814px);"> </div> <div style="opacity: 0.26055136507302956; top: 96.54398113959174%; left: 40.28009430204132%; -webkit-transform: translate3d(0px, 0px, 211.51484974273131px);"> </div> <div style="opacity: 0.2549705096463745; top: 103.38062262110815%; left: -8.886905641049824%; -webkit-transform: translate3d(0px, 0px, -815.5066409124279px);"> </div> <div style="opacity: 0.5193377617346461; top: 51.28009430204132%; left: 52.213622678017%; -webkit-transform: translate3d(0px, 0px, 167.48279270623567px);"> </div> <div style="opacity: 0.40598020049390204; top: 76.65707549854191%; left: 61.745037777725386%; -webkit-transform: translate3d(0px, 0px, 111.41667897469752px);"> </div> <div style="opacity: 0.7926559342896404; top: 100.77381128209964%; left: 78.9748679202333%; -webkit-transform: translate3d(0px, 0px, 22.303584615747354px);"> </div> <div style="opacity: 0.692151590546611; top: 45.8115094017497%; left: 76.36805658122479%; -webkit-transform: translate3d(0px, 0px, 104.71590638086496px);"> </div> <div style="opacity: 0.5508007379091381; top: 24.811509401749703%; left: 96.30522638180803%; -webkit-transform: translate3d(0px, 0px, -79.69277395964511px);"> </div> <div style="opacity: 0.6940000335741796; top: 94.93716980058323%; left: 75.786377321983%; -webkit-transform: translate3d(0px, 0px, 9.97650968629398px);"> </div> <div style="opacity: 0.22567197707670705; top: 51.01256603988335%; left: 13.163358518483589%; -webkit-transform: translate3d(0px, 0px, 524.9103959547558px);"> </div> </div>
js代码：
function random(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); } // setup var tl = new TimelineMax({ repeat: -1 }), container = $(".container"), html = "", isMobile = !!("ontouchstart" in window), dotsCount = isMobile ? 80 : 175; for (var i = 0; i < dotsCount; i++) { html += "<div></div>"; } var dots = $(html).appendTo(container); // animation dots.each(function () { tl.add(TweenMax.fromTo(this, 6, { left: random(0, 100) + "%", top: random(0, 100) + "%", z: random(-725, 600), opacity: Math.random() }, { left: "+=" + random(-40, 40) + "%", top: "+=" + random(-36, 36) + "%", z: "+=" + random(-725, 600), opacity: Math.random() + 0.1, repeat: 1, yoyo: true, ease: Sine.easeInOut }), 0); }); tl.fromTo(container, .8, { perspective: 50, opacity: .55 }, { perspective: 215, opacity: .9, ease: Sine.easeInOut }, 3.25) .to(container, .8, { perspective: 50, opacity: .55, ease: Sine.easeInOut }, 6.5); //@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/5798
jquery和css3打造超梦幻的三维动画背景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。