自学了几天的网页设计学到了CSS，之前看到旋转的方块，突然想到要写个旋转的球。我们都知道球是圆的所以要360°。所以接下来是创建360个盒子外加一个包容所有的盒子。一共361个盒子。所以以下就是创建盒子的代码：
创建盒子
<div class="circle">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8"></div>
<div class="circle9"></div>
<div class="circle10"></div>
<div class="circle11"></div>
<div class="circle12"></div>
<div class="circle13"></div>
<div class="circle14"></div>
<div class="circle15"></div>
<div class="circle16"></div>
<div class="circle17"></div>
<div class="circle18"></div>
<div class="circle19"></div>
<div class="circle20"></div>
<div class="circle21"></div>
<div class="circle22"></div>
<div class="circle23"></div>
<div class="circle24"></div>
<div class="circle25"></div>
<div class="circle26"></div>
<div class="circle27"></div>
<div class="circle28"></div>
<div class="circle29"></div>
<div class="circle30"></div>
<div class="circle31"></div>
<div class="circle32"></div>
<div class="circle33"></div>
<div class="circle34"></div>
<div class="circle35"></div>
<div class="circle36"></div>
<div class="circle37"></div>
<div class="circle38"></div>
<div class="circle39"></div>
<div class="circle40"></div>
<div class="circle41"></div>
<div class="circle42"></div>
<div class="circle43"></div>
<div class="circle44"></div>
<div class="circle45"></div>
<div class="circle46"></div>
<div class="circle47"></div>
<div class="circle48"></div>
<div class="circle49"></div>
<div class="circle50"></div>
<div class="circle51"></div>
<div class="circle52"></div>
<div class="circle53"></div>
<div class="circle54"></div>
<div class="circle55"></div>
<div class="circle56"></div>
<div class="circle57"></div>
<div class="circle58"></div>
<div class="circle59"></div>
<div class="circle60"></div>
<div class="circle61"></div>
<div class="circle62"></div>
<div class="circle63"></div>
<div class="circle64"></div>
<div class="circle65"></div>
<div class="circle66"></div>
<div class="circle67"></div>
<div class="circle68"></div>
<div class="circle69"></div>
<div class="circle70"></div>
<div class="circle71"></div>
<div class="circle72"></div>
<div class="circle73"></div>
<div class="circle74"></div>
<div class="circle75"></div>
<div class="circle76"></div>
<div class="circle77"></div>
<div class="circle78"></div>
<div class="circle79"></div>
<div class="circle80"></div>
<div class="circle81"></div>
<div class="circle82"></div>
<div class="circle83"></div>
<div class="circle84"></div>
<div class="circle85"></div>
<div class="circle86"></div>
<div class="circle87"></div>
<div class="circle88"></div>
<div class="circle89"></div>
<div class="circle90"></div>
<div class="circle91"></div>
<div class="circle92"></div>
<div class="circle93"></div>
<div class="circle94"></div>
<div class="circle95"></div>
<div class="circle96"></div>
<div class="circle97"></div>
<div class="circle98"></div>
<div class="circle99"></div>
<div class="circle100"></div>
<div class="circle101"></div>
<div class="circle102"></div>
<div class="circle103"></div>
<div class="circle104"></div>
<div class="circle105"></div>
<div class="circle106"></div>
<div class="circle107"></div>
<div class="circle108"></div>
<div class="circle109"></div>
<div class="circle110"></div>
<div class="circle111"></div>
<div class="circle112"></div>
<div class="circle113"></div>
<div class="circle114"></div>
<div class="circle115"></div>
<div class="circle116"></div>
<div class="circle117"></div>
<div class="circle118"></div>
<div class="circle119"></div>
<div class="circle120"></div>
<div class="circle121"></div>
<div class="circle122"></div>
<div class="circle123"></div>
<div class="circle124"></div>
<div class="circle125"></div>
<div class="circle126"></div>
<div class="circle127"></div>
<div class="circle128"></div>
<div class="circle129"></div>
<div class="circle130"></div>
<div class="circle131"></div>
<div class="circle132"></div>
<div class="circle133"></div>
<div class="circle134"></div>
<div class="circle135"></div>
<div class="circle136"></div>
<div class="circle137"></div>
<div class="circle138"></div>
<div class="circle139"></div>
<div class="circle140"></div>
<div class="circle141"></div>
<div class="circle142"></div>
<div class="circle143"></div>
<div class="circle144"></div>
<div class="circle145"></div>
<div class="circle146"></div>
<div class="circle147"></div>
<div class="circle148"></div>
<div class="circle149"></div>
<div class="circle150"></div>
<div class="circle151"></div>
<div class="circle152"></div>
<div class="circle153"></div>
<div class="circle154"></div>
<div class="circle155"></div>
<div class="circle156"></div>
<div class="circle157"></div>
<div class="circle158"></div>
<div class="circle159"></div>
<div class="circle160"></div>
<div class="circle161"></div>
<div class="circle162"></div>
<div class="circle163"></div>
<div class="circle164"></div>
<div class="circle165"></div>
<div class="circle166"></div>
<div class="circle167"></div>
<div class="circle168"></div>
<div class="circle169"></div>
<div class="circle170"></div>
<div class="circle171"></div>
<div class="circle172"></div>
<div class="circle173"></div>
<div class="circle174"></div>
<div class="circle175"></div>
<div class="circle176"></div>
<div class="circle177"></div>
<div class="circle178"></div>
<div class="circle179"></div>
<div class="circle180"></div>
<div class="circle181"></div>
<div class="circle182"></div>
<div class="circle183"></div>
<div class="circle184"></div>
<div class="circle185"></div>
<div class="circle186"></div>
<div class="circle187"></div>
<div class="circle188"></div>
<div class="circle189"></div>
<div class="circle190"></div>
<div class="circle191"></div>
<div class="circle192"></div>
<div class="circle193"></div>
<div class="circle194"></div>
<div class="circle195"></div>
<div class="circle196"></div>
<div class="circle197"></div>
<div class="circle198"></div>
<div class="circle199"></div>
<div class="circle200"></div>
<div class="circle201"></div>
<div class="circle202"></div>
<div class="circle203"></div>
<div class="circle204"></div>
<div class="circle205"></div>
<div class="circle206"></div>
<div class="circle207"></div>
<div class="circle208"></div>
<div class="circle209"></div>
<div class="circle210"></div>
<div class="circle211"></div>
<div class="circle212"></div>
<div class="circle213"></div>
<div class="circle214"></div>
<div class="circle215"></div>
<div class="circle216"></div>
<div class="circle217"></div>
<div class="circle218"></div>
<div class="circle219"></div>
<div class="circle220"></div>
<div class="circle221"></div>
<div class="circle222"></div>
<div class="circle223"></div>
<div class="circle224"></div>
<div class="circle225"></div>
<div class="circle226"></div>
<div class="circle227"></div>
<div class="circle228"></div>
<div class="circle229"></div>
<div class="circle230"></div>
<div class="circle231"></div>
<div class="circle232"></div>
<div class="circle233"></div>
<div class="circle234"></div>
<div class="circle235"></div>
<div class="circle236"></div>
<div class="circle237"></div>
<div class="circle238"></div>
<div class="circle239"></div>
<div class="circle240"></div>
<div class="circle241"></div>
<div class="circle242"></div>
<div class="circle243"></div>
<div class="circle244"></div>
<div class="circle245"></div>
<div class="circle246"></div>
<div class="circle247"></div>
<div class="circle248"></div>
<div class="circle249"></div>
<div class="circle250"></div>
<div class="circle251"></div>
<div class="circle252"></div>
<div class="circle253"></div>
<div class="circle254"></div>
<div class="circle255"></div>
<div class="circle256"></div>
<div class="circle257"></div>
<div class="circle258"></div>
<div class="circle259"></div>
<div class="circle260"></div>
<div class="circle261"></div>
<div class="circle262"></div>
<div class="circle263"></div>
<div class="circle264"></div>
<div class="circle265"></div>
<div class="circle266"></div>
<div class="circle267"></div>
<div class="circle268"></div>
<div class="circle269"></div>
<div class="circle270"></div>
<div class="circle271"></div>
<div class="circle272"></div>
<div class="circle273"></div>
<div class="circle274"></div>
<div class="circle275"></div>
<div class="circle276"></div>
<div class="circle277"></div>
<div class="circle278"></div>
<div class="circle279"></div>
<div class="circle280"></div>
<div class="circle281"></div>
<div class="circle282"></div>
<div class="circle283"></div>
<div class="circle284"></div>
<div class="circle285"></div>
<div class="circle286"></div>
<div class="circle287"></div>
<div class="circle288"></div>
<div class="circle289"></div>
<div class="circle290"></div>
<div class="circle291"></div>
<div class="circle292"></div>
<div class="circle293"></div>
<div class="circle294"></div>
<div class="circle295"></div>
<div class="circle296"></div>
<div class="circle297"></div>
<div class="circle298"></div>
<div class="circle299"></div>
<div class="circle300"></div>
<div class="circle301"></div>
<div class="circle302"></div>
<div class="circle303"></div>
<div class="circle304"></div>
<div class="circle305"></div>
<div class="circle306"></div>
<div class="circle307"></div>
<div class="circle308"></div>
<div class="circle309"></div>
<div class="circle310"></div>
<div class="circle311"></div>
<div class="circle312"></div>
<div class="circle313"></div>
<div class="circle314"></div>
<div class="circle315"></div>
<div class="circle316"></div>
<div class="circle317"></div>
<div class="circle318"></div>
<div class="circle319"></div>
<div class="circle320"></div>
<div class="circle321"></div>
<div class="circle322"></div>
<div class="circle323"></div>
<div class="circle324"></div>
<div class="circle325"></div>
<div class="circle326"></div>
<div class="circle327"></div>
<div class="circle328"></div>
<div class="circle329"></div>
<div class="circle330"></div>
<div class="circle331"></div>
<div class="circle332"></div>
<div class="circle333"></div>
<div class="circle334"></div>
<div class="circle335"></div>
<div class="circle336"></div>
<div class="circle337"></div>
<div class="circle338"></div>
<div class="circle339"></div>
<div class="circle340"></div>
<div class="circle341"></div>
<div class="circle342"></div>
<div class="circle343"></div>
<div class="circle344"></div>
<div class="circle345"></div>
<div class="circle346"></div>
<div class="circle347"></div>
<div class="circle348"></div>
<div class="circle349"></div>
<div class="circle350"></div>
<div class="circle351"></div>
<div class="circle352"></div>
<div class="circle353"></div>
<div class="circle354"></div>
<div class="circle355"></div>
<div class="circle356"></div>
<div class="circle357"></div>
<div class="circle358"></div>
<div class="circle359"></div>
<div class="circle360"></div>
</div>
是不是感觉代码有点多，感觉那么多怎么写啊！其实很简单每个代码都是差不多唯一不同的是数字，我是用for循环打印在复制过来的。
那盒子建好之后，那接下来就是把盒子装饰一番，也就是使用CSS了
装饰盒子的代码如下：
给盒子装饰
/*包裹所有容器的大盒子*/
.circle{
width: 300px;
height: 300px;
margin: 150px auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg) ;
border-radius: 50%;
-webkit-animation: rotate 10s infinite;/*rotate 名称 10s 旋转的时间 infinite 无限循环*/
animation-timing-function: linear;/*匀速*/
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.circle div{
position: absolute;
width: 300px;
height: 300px;
transition: all .4s;
border-radius: 50%;
/* background: url(img/chaoshenxueyuan10.jpeg) repeat fixed center; */ /* 放照片 */
}
.circle1{
transform: rotateX(1deg);
background-color:indigo;
}
.circle2{
transform: rotateX(2deg);
background-color:indigo;
}
.circle3{
transform: rotateX(3deg);
background-color:green;
}
.circle4{
transform: rotateX(4deg);
background-color:indigo;
}
.circle5{
transform: rotateX(5deg);
background-color:purple;
}
.circle6{
transform: rotateX(6deg);
background-color:blue;
}
.circle7{
transform: rotateX(7deg);
background-color:purple;
}
.circle8{
transform: rotateX(8deg);
background-color:orange;
}
.circle9{
transform: rotateX(9deg);
background-color:purple;
}
.circle10{
transform: rotateX(10deg);
background-color:orange;
}
.circle11{
transform: rotateX(11deg);
background-color:blue;
}
.circle12{
transform: rotateX(12deg);
background-color:Red;
}
.circle13{
transform: rotateX(13deg);
background-color:purple;
}
.circle14{
transform: rotateX(14deg);
background-color:yellow;
}
.circle15{
transform: rotateX(15deg);
background-color:green;
}
.circle16{
transform: rotateX(16deg);
background-color:green;
}
.circle17{
transform: rotateX(17deg);
background-color:purple;
}
.circle18{
transform: rotateX(18deg);
background-color:blue;
}
.circle19{
transform: rotateX(19deg);
background-color:green;
}
.circle20{
transform: rotateX(20deg);
background-color:green;
}
.circle21{
transform: rotateX(21deg);
background-color:Red;
}
.circle22{
transform: rotateX(22deg);
background-color:purple;
}
.circle23{
transform: rotateX(23deg);
background-color:green;
}
.circle24{
transform: rotateX(24deg);
background-color:Red;
}
.circle25{
transform: rotateX(25deg);
background-color:indigo;
}
.circle26{
transform: rotateX(26deg);
background-color:Red;
}
.circle27{
transform: rotateX(27deg);
background-color:purple;
}
.circle28{
transform: rotateX(28deg);
background-color:Red;
}
.circle29{
transform: rotateX(29deg);
background-color:indigo;
}
.circle30{
transform: rotateX(30deg);
background-color:purple;
}
.circle31{
transform: rotateX(31deg);
background-color:purple;
}
.circle32{
transform: rotateX(32deg);
background-color:purple;
}
.circle33{
transform: rotateX(33deg);
background-color:yellow;
}
.circle34{
transform: rotateX(34deg);
background-color:indigo;
}
.circle35{
transform: rotateX(35deg);
background-color:green;
}
.circle36{
transform: rotateX(36deg);
background-color:Red;
}
.circle37{
transform: rotateX(37deg);
background-color:yellow;
}
.circle38{
transform: rotateX(38deg);
background-color:blue;
}
.circle39{
transform: rotateX(39deg);
background-color:Red;
}
.circle40{
transform: rotateX(40deg);
background-color:purple;
}
.circle41{
transform: rotateX(41deg);
background-color:blue;
}
.circle42{
transform: rotateX(42deg);
background-color:green;
}
.circle43{
transform: rotateX(43deg);
background-color:purple;
}
.circle44{
transform: rotateX(44deg);
background-color:purple;
}
.circle45{
transform: rotateX(45deg);
background-color:green;
}
.circle46{
transform: rotateX(46deg);
background-color:blue;
}
.circle47{
transform: rotateX(47deg);
background-color:orange;
}
.circle48{
transform: rotateX(48deg);
background-color:indigo;
}
.circle49{
transform: rotateX(49deg);
background-color:orange;
}
.circle50{
transform: rotateX(50deg);
background-color:Red;
}
.circle51{
transform: rotateX(51deg);
background-color:indigo;
}
.circle52{
transform: rotateX(52deg);
background-color:yellow;
}
.circle53{
transform: rotateX(53deg);
background-color:green;
}
.circle54{
transform: rotateX(54deg);
background-color:yellow;
}
.circle55{
transform: rotateX(55deg);
background-color:Red;
}
.circle56{
transform: rotateX(56deg);
background-color:Red;
}
.circle57{
transform: rotateX(57deg);
background-color:indigo;
}
.circle58{
transform: rotateX(58deg);
background-color:indigo;
}
.circle59{
transform: rotateX(59deg);
background-color:indigo;
}
.circle60{
transform: rotateX(60deg);
background-color:purple;
}
.circle61{
transform: rotateX(61deg);
background-color:indigo;
}
.circle62{
transform: rotateX(62deg);
background-color:orange;
}
.circle63{
transform: rotateX(63deg);
background-color:Red;
}
.circle64{
transform: rotateX(64deg);
background-color:indigo;
}
.circle65{
transform: rotateX(65deg);
background-color:orange;
}
.circle66{
transform: rotateX(66deg);
background-color:purple;
}
.circle67{
transform: rotateX(67deg);
background-color:yellow;
}
.circle68{
transform: rotateX(68deg);
background-color:indigo;
}
.circle69{
transform: rotateX(69deg);
background-color:indigo;
}
.circle70{
transform: rotateX(70deg);
background-color:Red;
}
.circle71{
transform: rotateX(71deg);
background-color:yellow;
}
.circle72{
transform: rotateX(72deg);
background-color:purple;
}
.circle73{
transform: rotateX(73deg);
background-color:blue;
}
.circle74{
transform: rotateX(74deg);
background-color:Red;
}
.circle75{
transform: rotateX(75deg);
background-color:blue;
}
.circle76{
transform: rotateX(76deg);
background-color:green;
}
.circle77{
transform: rotateX(77deg);
background-color:purple;
}
.circle78{
transform: rotateX(78deg);
background-color:purple;
}
.circle79{
transform: rotateX(79deg);
background-color:Red;
}
.circle80{
transform: rotateX(80deg);
background-color:yellow;
}
.circle81{
transform: rotateX(81deg);
background-color:Red;
}
.circle82{
transform: rotateX(82deg);
background-color:blue;
}
.circle83{
transform: rotateX(83deg);
background-color:orange;
}
.circle84{
transform: rotateX(84deg);
background-color:Red;
}
.circle85{
transform: rotateX(85deg);
background-color:purple;
}
.circle86{
transform: rotateX(86deg);
background-color:orange;
}
.circle87{
transform: rotateX(87deg);
background-color:green;
}
.circle88{
transform: rotateX(88deg);
background-color:purple;
}
.circle89{
transform: rotateX(89deg);
background-color:Red;
}
.circle90{
transform: rotateX(90deg);
background-color:green;
}
.circle91{
transform: rotateX(91deg);
background-color:blue;
}
.circle92{
transform: rotateX(92deg);
background-color:orange;
}
.circle93{
transform: rotateX(93deg);
background-color:indigo;
}
.circle94{
transform: rotateX(94deg);
background-color:purple;
}
.circle95{
transform: rotateX(95deg);
background-color:yellow;
}
.circle96{
transform: rotateX(96deg);
background-color:blue;
}
.circle97{
transform: rotateX(97deg);
background-color:indigo;
}
.circle98{
transform: rotateX(98deg);
background-color:yellow;
}
.circle99{
transform: rotateX(99deg);
background-color:Red;
}
.circle100{
transform: rotateX(100deg);
background-color:orange;
}
.circle101{
transform: rotateX(101deg);
background-color:yellow;
}
.circle102{
transform: rotateX(102deg);
background-color:blue;
}
.circle103{
transform: rotateX(103deg);
background-color:indigo;
}
.circle104{
transform: rotateX(104deg);
background-color:purple;
}
.circle105{
transform: rotateX(105deg);
background-color:Red;
}
.circle106{
transform: rotateX(106deg);
background-color:green;
}
.circle107{
transform: rotateX(107deg);
background-color:yellow;
}
.circle108{
transform: rotateX(108deg);
background-color:blue;
}
.circle109{
transform: rotateX(109deg);
background-color:orange;
}
.circle110{
transform: rotateX(110deg);
background-color:blue;
}
.circle111{
transform: rotateX(111deg);
background-color:purple;
}
.circle112{
transform: rotateX(112deg);
background-color:purple;
}
.circle113{
transform: rotateX(113deg);
background-color:orange;
}
.circle114{
transform: rotateX(114deg);
background-color:Red;
}
.circle115{
transform: rotateX(115deg);
background-color:yellow;
}
.circle116{
transform: rotateX(116deg);
background-color:indigo;
}
.circle117{
transform: rotateX(117deg);
background-color:blue;
}
.circle118{
transform: rotateX(118deg);
background-color:purple;
}
.circle119{
transform: rotateX(119deg);
background-color:green;
}
.circle120{
transform: rotateX(120deg);
background-color:purple;
}
.circle121{
transform: rotateX(121deg);
background-color:orange;
}
.circle122{
transform: rotateX(122deg);
background-color:indigo;
}
.circle123{
transform: rotateX(123deg);
background-color:orange;
}
.circle124{
transform: rotateX(124deg);
background-color:green;
}
.circle125{
transform: rotateX(125deg);
background-color:Red;
}
.circle126{
transform: rotateX(126deg);
background-color:orange;
}
.circle127{
transform: rotateX(127deg);
background-color:yellow;
}
.circle128{
transform: rotateX(128deg);
background-color:green;
}
.circle129{
transform: rotateX(129deg);
background-color:purple;
}
.circle130{
transform: rotateX(130deg);
background-color:green;
}
.circle131{
transform: rotateX(131deg);
background-color:purple;
}
.circle132{
transform: rotateX(132deg);
background-color:Red;
}
.circle133{
transform: rotateX(133deg);
background-color:blue;
}
.circle134{
transform: rotateX(134deg);
background-color:yellow;
}
.circle135{
transform: rotateX(135deg);
background-color:purple;
}
.circle136{
transform: rotateX(136deg);
background-color:yellow;
}
.circle137{
transform: rotateX(137deg);
background-color:green;
}
.circle138{
transform: rotateX(138deg);
background-color:yellow;
}
.circle139{
transform: rotateX(139deg);
background-color:indigo;
}
.circle140{
transform: rotateX(140deg);
background-color:purple;
}
.circle141{
transform: rotateX(141deg);
background-color:Red;
}
.circle142{
transform: rotateX(142deg);
background-color:green;
}
.circle143{
transform: rotateX(143deg);
background-color:blue;
}
.circle144{
transform: rotateX(144deg);
background-color:Red;
}
.circle145{
transform: rotateX(145deg);
background-color:Red;
}
.circle146{
transform: rotateX(146deg);
background-color:Red;
}
.circle147{
transform: rotateX(147deg);
background-color:indigo;
}
.circle148{
transform: rotateX(148deg);
background-color:blue;
}
.circle149{
transform: rotateX(149deg);
background-color:yellow;
}
.circle150{
transform: rotateX(150deg);
background-color:yellow;
}
.circle151{
transform: rotateX(151deg);
background-color:yellow;
}
.circle152{
transform: rotateX(152deg);
background-color:Red;
}
.circle153{
transform: rotateX(153deg);
background-color:blue;
}
.circle154{
transform: rotateX(154deg);
background-color:yellow;
}
.circle155{
transform: rotateX(155deg);
background-color:purple;
}
.circle156{
transform: rotateX(156deg);
background-color:orange;
}
.circle157{
transform: rotateX(157deg);
background-color:Red;
}
.circle158{
transform: rotateX(158deg);
background-color:blue;
}
.circle159{
transform: rotateX(159deg);
background-color:indigo;
}
.circle160{
transform: rotateX(160deg);
background-color:orange;
}
.circle161{
transform: rotateX(161deg);
background-color:green;
}
.circle162{
transform: rotateX(162deg);
background-color:purple;
}
.circle163{
transform: rotateX(163deg);
background-color:green;
}
.circle164{
transform: rotateX(164deg);
background-color:Red;
}
.circle165{
transform: rotateX(165deg);
background-color:orange;
}
.circle166{
transform: rotateX(166deg);
background-color:indigo;
}
.circle167{
transform: rotateX(167deg);
background-color:Red;
}
.circle168{
transform: rotateX(168deg);
background-color:Red;
}
.circle169{
transform: rotateX(169deg);
background-color:orange;
}
.circle170{
transform: rotateX(170deg);
background-color:green;
}
.circle171{
transform: rotateX(171deg);
background-color:Red;
}
.circle172{
transform: rotateX(172deg);
background-color:purple;
}
.circle173{
transform: rotateX(173deg);
background-color:green;
}
.circle174{
transform: rotateX(174deg);
background-color:purple;
}
.circle175{
transform: rotateX(175deg);
background-color:blue;
}
.circle176{
transform: rotateX(176deg);
background-color:indigo;
}
.circle177{
transform: rotateX(177deg);
background-color:purple;
}
.circle178{
transform: rotateX(178deg);
background-color:blue;
}
.circle179{
transform: rotateX(179deg);
background-color:yellow;
}
.circle180{
transform: rotateX(180deg);
background-color:blue;
}
.circle181{
transform: rotateX(181deg);
background-color:orange;
}
.circle182{
transform: rotateX(182deg);
background-color:indigo;
}
.circle183{
transform: rotateX(183deg);
background-color:yellow;
}
.circle184{
transform: rotateX(184deg);
background-color:yellow;
}
.circle185{
transform: rotateX(185deg);
background-color:purple;
}
.circle186{
transform: rotateX(186deg);
background-color:blue;
}
.circle187{
transform: rotateX(187deg);
background-color:green;
}
.circle188{
transform: rotateX(188deg);
background-color:orange;
}
.circle189{
transform: rotateX(189deg);
background-color:purple;
}
.circle190{
transform: rotateX(190deg);
background-color:Red;
}
.circle191{
transform: rotateX(191deg);
background-color:indigo;
}
.circle192{
transform: rotateX(192deg);
background-color:indigo;
}
.circle193{
transform: rotateX(193deg);
background-color:purple;
}
.circle194{
transform: rotateX(194deg);
background-color:Red;
}
.circle195{
transform: rotateX(195deg);
background-color:yellow;
}
.circle196{
transform: rotateX(196deg);
background-color:purple;
}
.circle197{
transform: rotateX(197deg);
background-color:yellow;
}
.circle198{
transform: rotateX(198deg);
background-color:Red;
}
.circle199{
transform: rotateX(199deg);
background-color:green;
}
.circle200{
transform: rotateX(200deg);
background-color:indigo;
}
.circle201{
transform: rotateX(201deg);
background-color:blue;
}
.circle202{
transform: rotateX(202deg);
background-color:orange;
}
.circle203{
transform: rotateX(203deg);
background-color:indigo;
}
.circle204{
transform: rotateX(204deg);
background-color:blue;
}
.circle205{
transform: rotateX(205deg);
background-color:green;
}
.circle206{
transform: rotateX(206deg);
background-color:purple;
}
.circle207{
transform: rotateX(207deg);
background-color:orange;
}
.circle208{
transform: rotateX(208deg);
background-color:purple;
}
.circle209{
transform: rotateX(209deg);
background-color:indigo;
}
.circle210{
transform: rotateX(210deg);
background-color:Red;
}
.circle211{
transform: rotateX(211deg);
background-color:purple;
}
.circle212{
transform: rotateX(212deg);
background-color:indigo;
}
.circle213{
transform: rotateX(213deg);
background-color:orange;
}
.circle214{
transform: rotateX(214deg);
background-color:indigo;
}
.circle215{
transform: rotateX(215deg);
background-color:yellow;
}
.circle216{
transform: rotateX(216deg);
background-color:green;
}
.circle217{
transform: rotateX(217deg);
background-color:green;
}
.circle218{
transform: rotateX(218deg);
background-color:green;
}
.circle219{
transform: rotateX(219deg);
background-color:blue;
}
.circle220{
transform: rotateX(220deg);
background-color:purple;
}
.circle221{
transform: rotateX(221deg);
background-color:indigo;
}
.circle222{
transform: rotateX(222deg);
background-color:Red;
}
.circle223{
transform: rotateX(223deg);
background-color:yellow;
}
.circle224{
transform: rotateX(224deg);
background-color:blue;
}
.circle225{
transform: rotateX(225deg);
background-color:orange;
}
.circle226{
transform: rotateX(226deg);
background-color:Red;
}
.circle227{
transform: rotateX(227deg);
background-color:yellow;
}
.circle228{
transform: rotateX(228deg);
background-color:indigo;
}
.circle229{
transform: rotateX(229deg);
background-color:blue;
}
.circle230{
transform: rotateX(230deg);
background-color:purple;
}
.circle231{
transform: rotateX(231deg);
background-color:blue;
}
.circle232{
transform: rotateX(232deg);
background-color:orange;
}
.circle233{
transform: rotateX(233deg);
background-color:Red;
}
.circle234{
transform: rotateX(234deg);
background-color:yellow;
}
.circle235{
transform: rotateX(235deg);
background-color:indigo;
}
.circle236{
transform: rotateX(236deg);
background-color:orange;
}
.circle237{
transform: rotateX(237deg);
background-color:Red;
}
.circle238{
transform: rotateX(238deg);
background-color:purple;
}
.circle239{
transform: rotateX(239deg);
background-color:yellow;
}
.circle240{
transform: rotateX(240deg);
background-color:green;
}
.circle241{
transform: rotateX(241deg);
background-color:green;
}
.circle242{
transform: rotateX(242deg);
background-color:purple;
}
.circle243{
transform: rotateX(243deg);
background-color:green;
}
.circle244{
transform: rotateX(244deg);
background-color:purple;
}
.circle245{
transform: rotateX(245deg);
background-color:Red;
}
.circle246{
transform: rotateX(246deg);
background-color:green;
}
.circle247{
transform: rotateX(247deg);
background-color:orange;
}
.circle248{
transform: rotateX(248deg);
background-color:purple;
}
.circle249{
transform: rotateX(249deg);
background-color:green;
}
.circle250{
transform: rotateX(250deg);
background-color:orange;
}
.circle251{
transform: rotateX(251deg);
background-color:purple;
}
.circle252{
transform: rotateX(252deg);
background-color:orange;
}
.circle253{
transform: rotateX(253deg);
background-color:green;
}
.circle254{
transform: rotateX(254deg);
background-color:Red;
}
.circle255{
transform: rotateX(255deg);
background-color:Red;
}
.circle256{
transform: rotateX(256deg);
background-color:Red;
}
.circle257{
transform: rotateX(257deg);
background-color:purple;
}
.circle258{
transform: rotateX(258deg);
background-color:indigo;
}
.circle259{
transform: rotateX(259deg);
background-color:purple;
}
.circle260{
transform: rotateX(260deg);
background-color:indigo;
}
.circle261{
transform: rotateX(261deg);
background-color:yellow;
}
.circle262{
transform: rotateX(262deg);
background-color:orange;
}
.circle263{
transform: rotateX(263deg);
background-color:indigo;
}
.circle264{
transform: rotateX(264deg);
background-color:green;
}
.circle265{
transform: rotateX(265deg);
background-color:blue;
}
.circle266{
transform: rotateX(266deg);
background-color:orange;
}
.circle267{
transform: rotateX(267deg);
background-color:green;
}
.circle268{
transform: rotateX(268deg);
background-color:Red;
}
.circle269{
transform: rotateX(269deg);
background-color:yellow;
}
.circle270{
transform: rotateX(270deg);
background-color:Red;
}
.circle271{
transform: rotateX(271deg);
background-color:Red;
}
.circle272{
transform: rotateX(272deg);
background-color:purple;
}
.circle273{
transform: rotateX(273deg);
background-color:green;
}
.circle274{
transform: rotateX(274deg);
background-color:purple;
}
.circle275{
transform: rotateX(275deg);
background-color:indigo;
}
.circle276{
transform: rotateX(276deg);
background-color:indigo;
}
.circle277{
transform: rotateX(277deg);
background-color:purple;
}
.circle278{
transform: rotateX(278deg);
background-color:yellow;
}
.circle279{
transform: rotateX(279deg);
background-color:Red;
}
.circle280{
transform: rotateX(280deg);
background-color:blue;
}
.circle281{
transform: rotateX(281deg);
background-color:orange;
}
.circle282{
transform: rotateX(282deg);
background-color:yellow;
}
.circle283{
transform: rotateX(283deg);
background-color:blue;
}
.circle284{
transform: rotateX(284deg);
background-color:purple;
}
.circle285{
transform: rotateX(285deg);
background-color:purple;
}
.circle286{
transform: rotateX(286deg);
background-color:orange;
}
.circle287{
transform: rotateX(287deg);
background-color:yellow;
}
.circle288{
transform: rotateX(288deg);
background-color:indigo;
}
.circle289{
transform: rotateX(289deg);
background-color:purple;
}
.circle290{
transform: rotateX(290deg);
background-color:green;
}
.circle291{
transform: rotateX(291deg);
background-color:purple;
}
.circle292{
transform: rotateX(292deg);
background-color:orange;
}
.circle293{
transform: rotateX(293deg);
background-color:Red;
}
.circle294{
transform: rotateX(294deg);
background-color:yellow;
}
.circle295{
transform: rotateX(295deg);
background-color:yellow;
}
.circle296{
transform: rotateX(296deg);
background-color:Red;
}
.circle297{
transform: rotateX(297deg);
background-color:orange;
}
.circle298{
transform: rotateX(298deg);
background-color:purple;
}
.circle299{
transform: rotateX(299deg);
background-color:green;
}
.circle300{
transform: rotateX(300deg);
background-color:green;
}
.circle301{
transform: rotateX(301deg);
background-color:yellow;
}
.circle302{
transform: rotateX(302deg);
background-color:orange;
}
.circle303{
transform: rotateX(303deg);
background-color:orange;
}
.circle304{
transform: rotateX(304deg);
background-color:orange;
}
.circle305{
transform: rotateX(305deg);
background-color:Red;
}
.circle306{
transform: rotateX(306deg);
background-color:purple;
}
.circle307{
transform: rotateX(307deg);
background-color:orange;
}
.circle308{
transform: rotateX(308deg);
background-color:green;
}
.circle309{
transform: rotateX(309deg);
background-color:Red;
}
.circle310{
transform: rotateX(310deg);
background-color:green;
}
.circle311{
transform: rotateX(311deg);
background-color:green;
}
.circle312{
transform: rotateX(312deg);
background-color:yellow;
}
.circle313{
transform: rotateX(313deg);
background-color:blue;
}
.circle314{
transform: rotateX(314deg);
background-color:green;
}
.circle315{
transform: rotateX(315deg);
background-color:green;
}
.circle316{
transform: rotateX(316deg);
background-color:indigo;
}
.circle317{
transform: rotateX(317deg);
background-color:indigo;
}
.circle318{
transform: rotateX(318deg);
background-color:indigo;
}
.circle319{
transform: rotateX(319deg);
background-color:indigo;
}
.circle320{
transform: rotateX(320deg);
background-color:Red;
}
.circle321{
transform: rotateX(321deg);
background-color:Red;
}
.circle322{
transform: rotateX(322deg);
background-color:yellow;
}
.circle323{
transform: rotateX(323deg);
background-color:Red;
}
.circle324{
transform: rotateX(324deg);
background-color:orange;
}
.circle325{
transform: rotateX(325deg);
background-color:orange;
}
.circle326{
transform: rotateX(326deg);
background-color:orange;
}
.circle327{
transform: rotateX(327deg);
background-color:orange;
}
.circle328{
transform: rotateX(328deg);
background-color:blue;
}
.circle329{
transform: rotateX(329deg);
background-color:blue;
}
.circle330{
transform: rotateX(330deg);
background-color:yellow;
}
.circle331{
transform: rotateX(331deg);
background-color:yellow;
}
.circle332{
transform: rotateX(332deg);
background-color:Red;
}
.circle333{
transform: rotateX(333deg);
background-color:indigo;
}
.circle334{
transform: rotateX(334deg);
background-color:purple;
}
.circle335{
transform: rotateX(335deg);
background-color:yellow;
}
.circle336{
transform: rotateX(336deg);
background-color:green;
}
.circle337{
transform: rotateX(337deg);
background-color:yellow;
}
.circle338{
transform: rotateX(338deg);
background-color:blue;
}
.circle339{
transform: rotateX(339deg);
background-color:blue;
}
.circle340{
transform: rotateX(340deg);
background-color:purple;
}
.circle341{
transform: rotateX(341deg);
background-color:orange;
}
.circle342{
transform: rotateX(342deg);
background-color:orange;
}
.circle343{
transform: rotateX(343deg);
background-color:blue;
}
.circle344{
transform: rotateX(344deg);
background-color:green;
}
.circle345{
transform: rotateX(345deg);
background-color:indigo;
}
.circle346{
transform: rotateX(346deg);
background-color:orange;
}
.circle347{
transform: rotateX(347deg);
background-color:indigo;
}
.circle348{
transform: rotateX(348deg);
background-color:indigo;
}
.circle349{
transform: rotateX(349deg);
background-color:blue;
}
.circle350{
transform: rotateX(350deg);
background-color:green;
}
.circle351{
transform: rotateX(351deg);
background-color:indigo;
}
.circle352{
transform: rotateX(352deg);
background-color:Red;
}
.circle353{
transform: rotateX(353deg);
background-color:purple;
}
.circle354{
transform: rotateX(354deg);
background-color:indigo;
}
.circle355{
transform: rotateX(355deg);
background-color:indigo;
}
.circle356{
transform: rotateX(356deg);
background-color:Red;
}
.circle357{
transform: rotateX(357deg);
background-color:green;
}
.circle358{
transform: rotateX(358deg);
background-color:purple;
}
.circle359{
transform: rotateX(359deg);
background-color:green;
}
.circle360{
transform: rotateX(360deg);
background-color:green;
}
同样也是那么多的代码，同样也是用for循环打印出来的（不然自己写可能会吐血。）
到后面附上效果图吧（毕竟有图有真相）
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
