今天为大家带来的是一款由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>

View Code

js代码:

 function random(min, max) {return Math.floor(Math.random() * (1 + max - min) + min);}// setupvar 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

View Code

注:本文爱编程原创文章,转载请注明原文地址:http://***/Article/5798

jquery和css3打造超梦幻的三维动画背景相关推荐

  1. jquery控制css3动画 列表,10款jQuery/CSS3动画应用 超实用

    本文作者html5tricks,转载请注明出处 这次我们要带来10款最新的jQuery/CSS3动画应用,这里有不少 1.jQuery/CSS3书本翻页动画特效 多功能选项支持 这是一款基于jQuer ...

  2. html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js

    jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...

  3. 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

    今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某 ...

  4. jQuery和CSS3炫酷滚动页面内容元素动画特效

    jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...

  5. html页面飘落花瓣不是全屏,jQuery css3全屏花瓣飘落动画特效

    特效描述:jQuery css3 全屏花瓣飘落 动画特效.jQuery css3从上往下飘落爱心花瓣动画特效.(不兼容IE6,7,8) 代码结构 1. 引入JS 2. HTML代码 $(functio ...

  6. html5文章标题定格,jQuery和css3文章标题动画特效

    这是一款效果非常不错的jQuery和css3文章标题动画特效. HTML结构 所有效果的html结构是一样的,使用一个作为wrapper,给它一些margins和max-width.标题使用的是 标签 ...

  7. CSS3打造的10种创意动画菜单效果

    CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...

  8. html5云朵效果,纯CSS3打造逼真的多层云彩动画特效

    这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构 该多层 ...

  9. html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效

    这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...

最新文章

  1. Spark shuffle调优
  2. 用户自定义的标识符的一些注意事项
  3. opencv 解析yuv_OpenCV Mat格式存储YUV图像
  4. nosql介绍、memrcached介绍、安装memcached、查看memcachedq状态
  5. 谜题 (Puzzle,ACM/ICPC World Finals 1993,UVa227)
  6. chemdraw怎么连接两个结构_利用神经结构搜索构建快速准确轻量级的超分辨率网络...
  7. C++设计模式之策略模式(Strategy)
  8. Visual C++中的ODBC编程实例
  9. 经典面试题(3):关于this指向的常见面试题
  10. MySQL集群:高可用性DBMS
  11. Modelarts与无感识别技术生态总结(浅出版)
  12. 以太坊2.0合约余额新增3872 ETH
  13. python @的作用
  14. 【高项】第6章 项目进度管理【知识点精华笔记】
  15. 【测试】对网易邮箱登录的测试流程
  16. android配置wifi,详解Android通过修改配置文件设置wifi密码
  17. 推荐10款笔者一直在使用的Chrome提效插件
  18. 2021-2022年十类(30+)热门资质证书汇总分享
  19. Java Web 开发 从入门到入?
  20. 可视化搭建移动端店铺解决方案

热门文章

  1. ssh远程执行多个命令
  2. shell [] [[ ]] {}区别
  3. 度量,跟踪和日志记录
  4. 仔细选择会话状态提供程序
  5. Jenkins简介及在Windows上的简单使用示例
  6. OpenCV提取轮廓(去掉面积小的轮廓)
  7. 【Qt】设置窗口透明度
  8. mvc的宿舍管理系统源码 基于jsp_[源码和文档分享]基于JSP的MVC框架实现的图书推荐系统展示平台网站...
  9. 3650服务器性能,全新联想System x3650 M4服务器性能出色
  10. java pdf插件下载_免费java pdf控件