Parsing: Creating a radial animation menu with CSS3 and JavaScript

Original author's analysis (English): http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/

Original author's resolution: Http://developer.51cto.com/art/201404/437152.htm

This article is not reproduced, for personal original analysis, reprint please contact Bo Master first. Thank you ~

First, look at the structure of the HTML:

<!  DOCTYPE html>
--CSS Complete Code Please refer to the end of the article.
--js Complete Code Please refer to the end of the article.
Then, look at the page:
Figure 1-1
At the beginning, only two are "visible" elements, One class is. Menu-button, and one of the classes is. Circular-menu, because the position property of the button is to be set in the absolute, so it's the parent element of the outer box. Menu-button set position to relative, now analyzed. Menu-bu Properties of the Tton:

 
 

  
  
 
   
1, top and left values are calc (50%-30px), 50% very good understanding, how does 30px come? Notice that both the height and left are 40px, while the top and right properties of the absolute position represent the distance between the upper and lower upper-right corner of the element, respectively, 1-2. In order for the center point of the element to be centered, the distance should be less than half the length and width of the element, but its length is 20px, why is it minus 30px? The reason for this is that its Padding property is 10px, which is equivalent to adding 20px to its length and width respectively.
 
  
 
 
(30px = 40PX/2 +10px)
Figure 1-2

 
 

  
  
 
   
2, line-height and height are 40px. Allows text to be centered vertically.
 
  
 
 
 
 

  
  
 
   
3, border-radius:50%. Circular.
 
  
 
 
 
 

  
  
 
   
4, Display:block, delete seems to have no effect.
 
   
 
 
  
 
 
Then look at the "hidden". Circle, which contains a few <a> tags, it has a transparency of 0, also set the CSS3 animation--transform and transition. Among them, Transition:all 0.4s ease-out for a Web page to see a few white spots suddenly hidden behind the big button effect is it dry, explain the meaning, all the properties in the 0.4s gradually disappear. In fact complete it has 4 parameters. After you click the button, switch a class for the Div. Open.
. open.circle {  opacity:1;  -webkit-transform:scale (1);  -moz-transform:scale (1);  Transform:scale (1);}
fade/Fade. Zoom in from 0 times to 1 time times and turn into figure 1-3. 
Figure 1-3
Now. Let's take a look at the JS code, the document loaded and added the top and left properties for each small <a>. To be read more easy. I changed the original demo code a little bit, like this:
Items[i].style.left = (50-35*math.cos (2*math.pi*i/len)). toFixed (4) + "%"; items[i].style.top = (+ 35*math.sin (2*Math . Pi*i/len)). toFixed (4) + "%";
35 The following piece means to start at a point. Experience 2π. The number of points divided by 2π is determined by the amount of <a>. Like our example. There are 8 <a>, starting from x=0. A positive 2 π is taken, and 2 π is flattened into 8 segments. Take 8 points in turn, their Y value 1-4 to see, we can see, 8 points on the Y value change does not match our circle position change law? 35 means, top and left to take up to 85%, the minimum to take 15%. 
Figure 1-4

Extrapolate

 
 

  
  
 
   
1, said the above. 2π is divided into several segments depending on the number of <a>. Try to delete a few <a> see it.
 
   
 
 
  
 
 
 
 

  
  
 
   
2, the above code is from the beginning of 0 to take 2π, try to change it. Note that things that are always constant are 2π*i/len, you can add or subtract something, or add a minus sign to it. In particular. The time to add and subtract something. If you add Π/5, the value of the first point is affected. Indirectly affect the value of other points, you will find that all the <a> composition of the circle seems to be a smooth/counterclockwise twist, the detailed effect is how, you can try to make a look.
 
  
 
 

Now back to look at the style,. Circle A needs to be aware of Margin-left and margin-top. Remember what we just said. The left and top properties in Menu-button? Yes, the two are almost the same meaning. Let's go back and look at Figure 1-3. The dotted box position in the figure is the same as when we did not set the position of Margin-left and Margin-top. We take Margin-left and margin-top as half the length of the <a> element. Remember the minus sign.

Comprehend by analogy

 
 

  
  
 
   
They say it's almost the same as the previous Menu-button. Then we will not set Margin-top and Margin-left. How do you change that?
 
  
 
 
 
 

  
  
 
   
Answer: (The font color is white.) Select text visible --in JS, Items[i].style.left and items[i].style.top are reduced 20px can be <--)
 
  
 
 

Forget to say it. Note that if there are border, the same needs to be subtracted from the border value.
At last. Thank you for your careful reading, the shortcomings, welcome to point out!

Complete JS and CSS code such as the following:
$ (document). Ready (function () {//Demo by Http://creative-punch.net//Modified by  xzh-20140701 var items = Document.queryselectorall ('. Circle a '); for (var i = 0, len = items.length; i < Len; i++) {Items[i].style.left = (50-35*math.cos (2*math.pi*i/len)). toFixed    (4) + "%";    Items[i].style.top = (+ 35*math.sin (2*math.pi*i/len)). toFixed (4) + "%";  Console.log (items[i].style.left+ "" +items[i].style.top);    } document.queryselector ('. Menu-button '). onclick = function (e) {e.preventdefault ();  Document.queryselector ('. Circle '). Classlist.toggle (' open '); }});
/* Demo by Http://creative-punch.net *//* Modified by xzh-20140701 */body {background: #39D;}.  Circular-menu {width:250px;  height:250px;  margin:0 Auto; Position:relative;}.  Circle {width:250px;  height:250px;    opacity:0;  -webkit-transform:scale (0);  -moz-transform:scale (0);  Transform:scale (0);  -webkit-transition:all 0.4s ease-out;  -moz-transition:all 0.4s ease-out; Transition:all 0.4s ease-out;}.  open.circle {opacity:1;  -webkit-transform:scale (1);  -moz-transform:scale (1); Transform:scale (1);}.  Circle a {text-decoration:none;  Color:white;  Display:block;  height:40px;  width:40px;  line-height:40px;  Margin-left: -20px;  Margin-top: -20px;  Position:absolute; Text-align:center;}. Circle A:hover {color: #eef;}.  Menu-button {position:absolute;  Top:calc (50%-30px);  Left:calc (50%-30px);  Text-decoration:none;  Text-align:center;  Color: #444;  border-radius:50%;  Display:block;  height:40px;  width:40px;  line-height:40px; Padding:10px; Background: #dde;}. Menu-button:hover {background-color: #eef;}  /* Author stuff */h1.author {text-align:center;  Color:white;  Font-family:helvetica, Arial, Sans-serif; font-weight:300;}  H1.author a {color: #348; Text-decoration:none;}  H1.author a:hover {color: #ddd;}

 
Parsing: Creating a radial animation menu with CSS3 and JavaScript