Home > Developer > Web Develop
The principle of blinking stars is simple:
HTML code:
<body style= "background: #000" ><div id= "Stars_box" ></div></body>
var Stars_box=document.getelementbyid (' Stars_box '); Get the element with ID star_box var obj=function () {}//Create an Object Obj.prototype.drawstar=function () {//Add Object prototype method Drawstarvar odiv= Document.createelement (' div '); Create divodiv.style.width= ' 7px '; odiv.style.height= ' 7px '; odiv.style.position= ' relative '; Set DIV to relative positioning Odiv.style.left=math.floor (Document.body.clientwidth*math.random ()) + ' px '; The left value of the div cannot exceed the width of the screen Odiv.style.top=math.floor (Document.body.clientheight*math.random ()) + ' px ';// The left value of the div cannot exceed the height of the screen odiv.style.overflow= ' hidden '; Set the div's overflow to hiddenstars_box.appendchild (ODIV); Add div to Stars_box element on var ostar=document.createelement (' img '); Re-Create the img element ostar.style.width= ' 49px '; ostar.style.height= ' 7px '; ostar.src= ' star.png '; ostar.style.position= ' Absolute '; Set img to absolute position ostar.style.top= ' 0px '; Odiv.appendchild (Ostar); Add img to the div in play (Ostar); The way to animate flicker play ();} function Play (ele) {var i=math.floor (Math.random () *7); To make the stars not blink at the same time, set the random value var timer=setinterval (function () {//per 100ms to perform an anonymous method if (i<7){ele.style.left=-i*7+ ' px '; i++;} ELSE{I=0;}},100);} Use a For loop to create 30 different objects for (Var i=0;i<30;i++) {var obj=new obj (); Obj.drawstar ();}
Stars blinking Static:
Finally, attach the star img diagram:
Native JS to achieve star blink effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
