TE
TechEcho
Home
24h Top
Newest
Best
Ask
Show
Jobs
English
GitHub
Twitter
Home
Incredible Portrait Made Entirely with HTML and CSS
3 points
by
breitling
about 7 years ago
1 comment
offbytwo
about 7 years ago
Try this out on the portrait page:<p>r = {}; za = {}; fda = {}; intv = {}; function setH(div){za[div]=Math.floor(Math.random()<i>100);fda[div]=((za[div]>50)?-1:1);i = setInterval(function(){ za[div] += fda[div]; div.style.height = za[div]+"%" ; if(za[div]==100||za[div]==0){fda[div]=-fda[div];}},Math.floor(Math.random() </i> 540) + 60); intv[div] = i; return i}; function setR(div){r[div]=Math.floor(Math.random()<i>100);i = setInterval(function(e){ ++r[div]; div.style.transform = "rotate("+r[div]+"deg)"; if(r[div]==360){r[div]=0;}},Math.floor(Math.random() </i> 540) + 60); intv[div] = i; return i}; function killall(){for (k in intv){clearInterval(intv[k]);}}; setTimeout(function f(){setR(document.querySelector(".eye"));},100); setTimeout(function f(){setH(document.querySelector(".mouth"));},200); setTimeout(function f(){setR(document.querySelector(".rightarm"));},300); setTimeout(function f(){setR(document.querySelector(".face"));},400); setTimeout(function f(){setH(document.querySelector(".body"));},100);