Now that I have learned the transition effect, I have begun to have the awareness of making animation effects, and I will realize some more dazzling gadgets. Adding transition animation effects to a web page will make people look beautiful, not stiff, and have a good look. Animation is one of the main manifestations of the beauty of a web page. Here are some examples of lottery using transition effects to achieve.
Let’s first take the renderings:
This implementation requires some js code.
Required pictures:
This picture is in the location of pointer.png.
turntable-bg.jpg This picture is the background image, in the background position.
This picture is in the turntable.png location.
These three pictures are needed. If you want to implement them, just save these three pictures and introduce them into it. If not, please modify it to the corresponding image name and put it in the same file.
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Release lottery</title> <!-- Here is the css part--> <style> #bg{ width: 650px; height: 600px; margin: 0 auto; background: url(turntable-bg.jpg) no-repeat; position: relative; } img[src^="pointer"]{ position: absolute; z-index: 10; top: 155px; left: 247px; } img[src^="turntable"]{ position: absolute; z-index: 5; top: 60px; left: 116px; transition: all 4s; } </style></head><body><!-- Here is the HTML structure part--> <div id="bg"> <img src="pointer.png"> <img src="turntable.png"> </div> <!-- Here is the js part--> <script> var oPointer=document.getElementsByTagName("img")[0]; var oTurntable=document.getElementsByTagName("img")[1]; var cat=51.4; var num=0; var offOn=true; document.title=""; oPointer.onclick=function(){ if(offOn){ oTurntable.style.transform="rotate(0deg)"; offOn=!offOn; ratating(); } } function rationing(){ var timer=null; var rdm=0; clearInterval(timer); timer=setInterval(function(){ if(Math.floor(rdm/360)<3){ rdm=Math.floor(Math.random()*3600); }else{ oTurntable.style.transform="rotate("+rdm+"deg)"; clearInterval(timer); setTimeout(function(){ offOn=!offOn; num=rdm%360; if(num<=cat*1){ alert("4999 yuan"); }else if(num<=cat*2){ alert("50 yuan"); }else if(num<=cat*3){ alert("10 yuan"); }else if(num<=cat*4){ alert("5 yuan"); }else if(num<=cat*5){ alert("interest-free service"); }else if(num<=cat*6){ alert("Submit Platinum"); }else if(num<=cat*7){ alert("Unwined"); } },4000); } },30); } </script></body></html>There is not much css and HTML code, mainly to achieve transition settings, and to implement cascade positioning, so the element is positioned to get the clicks of elements and events, and the clicking pointer will rotate, so you need to add a click event to the pointer, and then determine whether the rotation stops. If there is no click, you cannot call the function ratating(). This function performs rotation of the turntable and determines where the pointer is stopped, and then pops up the corresponding content. The process of implementing rotation in the function is to obtain the elements of the turntable, and then use js to control the attribute of the css-transform:rotate(). Haven't we used this property to directly achieve the rotation effect in css? It is implemented with the pseudo-class selector:hover and transition attributes. Therefore, because css cannot implement the number operation and mouse click, let js implement and control the css attribute to realize the function of click rotation. However, the use of the timer is not to mention the timer. The idea is to use js to implement the number operation, mouse click and css attribute control to achieve the effect of rotation.
Math.random() is the generation of random numbers, and Math.floor() rounds downwards.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.