javascript实现简单加载随机色方块

用碎片加载小方块实现简单的随机色块，直接上代码：效果图：

具体代码：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；字符集=UTF-8 '元字符集=' utf-8 ' title koringz/title link rel='样式表href=' CSS/demo。CSS/headdy div class=' container ' div class=' main ' div class=' colombined '/div/div/body/html CSS代码：

* {-web套件-box-siz :边框-盒子；-moz-box-siz :边框盒；盒子尺寸：边框盒子；} html { font-size : 10px-网络套件-点击-高亮-颜色：透明；}正文{边距： ^ 0；padd : 0；字体系列： 'Helvetica纽伊，Helvetica，阿里亚尔，无衬线；font-size : 14px线高： 1.42857143;颜色： # 333背景-color: rgba(211，232，132，0.8)；}.集装箱{ overflow:可见；}.主{位置：相对；宽度： 90%;高度：200 pxmargin:auto}。多彩{ overflow:可见；宽度： 100%;高度： 100%;}.七彩a { float:左；显示器：块；宽度： 50px高度： 50pxzoom:2}。多彩：悬停{-WebKit-动画：无限2s轻松进出开始滚动；-moz-动画：无限2s轻松进出开始滚动；动画：无限2s轻松进入开始滚动；} @-网络工具包-关键帧开始-滚动{ 0% {-web kit-transform :旋转(0)；/*chrome*/-moz-transform:旋转(0度);/*火狐*/-ms-变压器：旋转(0度);/*IE*/transform:旋转(0度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);zoom :1 } 50% {-WebKit-transform :旋转(180度);/*chrome*/-moz-transform:旋转(180度);/*火狐*/-ms-变压器：旋转(180度);/*IE*/transform:旋转(180度);-网络套件-transit :不透明度1s线性；过渡：不透明度1s线性；opa城市3360 1；filter: alpha(不透明度=100);zoom :2 } 100% {-WebKit-transform :旋转(360度);/*chrome*/-moz-transform:旋转(360度);/*火狐*/-ms-变压器：旋转(360度);/*IE*/transform:旋转(360度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);zoom:1} } @-moz-关键帧开始-滚动{ 0% {-web kit-transform :旋转(0)；/*chrome*/-moz-transform:旋转(0度);/*火狐*/-ms-变压器：旋转(0度);/*IE*/transform:旋转(0度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);} 50% { -webkit-transform:旋转(180度);/*chrome*/-moz-transform:旋转(180度);/*火狐*/-ms-变压器：旋转(180度);/*IE*/transform:旋转(180度);-网络套件-transit :不透明度1s线性；过渡：不透明度1s线性；opa city 3360 . 5 filter : alpha(不透明度=50);} 100% { -webkit-transform:旋转(360度);/*chrome*/-moz-transform:旋转(360度);/*火狐*/-ms-变压器：旋转(360度);/*IE*/transform:旋转(360度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);} } @关键帧开始滚动{ 0% {-web kit-transform :旋转(0)；/*chrome*/-moz-transform:旋转(0度);/*火狐*/-ms-变压器：旋转(0度);/*IE*/transform:旋转(0度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);} 50% { -webkit-transform:旋转(180度);/*chrome*/-moz-transform:旋转(180度);/*火狐*/-ms-变压器：旋转(180度);/*IE*/transform:旋转(180度);-网络套件-transit :不透明度1s线性；过渡：不透明度1s线性；opa city 3360 . 5 filter : alpha(不透明度=50);} 100% { -webkit-transform:旋转(360度);/*chrome*/-moz-transform:旋转(360度);/*火狐*/-ms-变压器：旋转(360度);/*IE*/transform:旋转(360度);-网络套件-transit :不透明度。3s线性；过渡：不透明度。3s线性；opa city 3360 . 5 filter : alpha(不透明度=50);}}

射流研究…代码：

（函数（窗口){ var document=window.document函数on(elem，evtnm，event HD){ var one vtnm=' on ' evt nm；elem[one vtnm]=事件高清；}函数grc() { var val=[]，I=0；而(I=3){ val。推(数学。地板(数学。random()* 255))；}返回" RGB('val。join()')"；}函数FBC(){ var El=document。queryselectorall(' .多彩)[0]，合计=数学。楼层(El。offsetwitth/50)*数学楼层(El。偏置高度/50)，df=文档。createdocumentfragment()，a；while(total-0){ a=文档。创建元素(' a ')；风格。背景色=GRC()；df。append child(a)；} El。appendchild} on(window，' load '，function(){ FBC()；});})(窗口)希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。