TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Incredible Portrait Made Entirely with HTML and CSS

3 pointsby breitlingabout 7 years ago

1 comment

offbytwoabout 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]&gt;50)?-1:1);i = setInterval(function(){ za[div] += fda[div]; div.style.height = za[div]+&quot;%&quot; ; 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 = &quot;rotate(&quot;+r[div]+&quot;deg)&quot;; 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(&quot;.eye&quot;));},100); setTimeout(function f(){setH(document.querySelector(&quot;.mouth&quot;));},200); setTimeout(function f(){setR(document.querySelector(&quot;.rightarm&quot;));},300); setTimeout(function f(){setR(document.querySelector(&quot;.face&quot;));},400); setTimeout(function f(){setH(document.querySelector(&quot;.body&quot;));},100);