A small avatar is displayed randomly. The random number includes the position, level, size, and transparency;
First look at the figure:
A simple Effect
First, html
<Ul> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> </ul>
CSS
Ul, Li { Margin : 0 ; Padding : 0 ;}
Ul { Position : Relative ; Width : 100% ; Height : 333px ;}
Li {Border : 4px solid gray ; Border-radius : 3px ; List-style : None ;}
IMG { Width : 100% ; Height : 100% ;}
Slightly smaller JS
( Function (){
VaR Ul = Document. getelementsbytagname ('ul ') [0];
VaR Li = ul. getelementsbytagname ('lil ');
For ( VaR I = 0, L = Li. length; I <L; I ++ ){
VaR S = Li [I]. style;
S. Position = 'absolute ';
S. zindex = math. Floor (math. Random () * 90) + 10; // Hierarchical basic random number
S. width = S. Height = S. zindex + 'px ';// Width and height
S. Left = math. Floor (math. Random () * (UL. offsetWidth-s.zIndex) + 'px ';
S. Top = math. Floor (math. Random () * (UL. offsetHeight-s.zIndex) + 'px ';
S. Opacity = S. zindex/100; // Transparency
S. Filter = 'Alpha (opacity = '+ S. zindex + ')';
S. Alpha = S. zindex;
}
})()
The final result is: the higher the header level, the lower the transparency. If the outer ul is large enough, the level is clearer.