日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用CSS3和JavaScript制作徑向動畫菜單

今天，讓我們來看看：如何使用CSS3和JavaScript輕松地實現(xiàn)一個簡單的徑向動畫菜單。

站在用戶的角度思考問題，與客戶深入溝通，找到九龍坡網(wǎng)站設(shè)計與九龍坡網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋九龍坡地區(qū)。

看看下面的演示，點擊按鈕，彈出徑向菜單。

上面的codepen示例呈現(xiàn)了代碼，那么我們來介紹其中的一些細節(jié)。

HTML

我們看看HTML。我們使用HTML5的nav元素，包含一些鏈接元素和激活徑向菜單的按鈕。

 
 
    
  
  
  1.  
    2. 
  
  
  2.    
    3. 
  
  
  3.    
    4. 
  
  
  4.      
    5. 
  
  
  5.      
    6. 
  
  
  6.      
    7. 
  
  
  7.      
    8. 
  
  
  8.      
    9. 
  
  
  9.      
    10. 
  
  
  10.      
    11. 
  
  
  11.      
    12. 
  
  
  12.   
 
  •    
  •    
  •    
  •  

    • 我使用了Font Awesome圖標(biāo)，同時在a標(biāo)簽中添加了必要的類，以便為徑向菜單中的菜單項附著漂亮的圖標(biāo)。

    CSS

    下面，我們看看部分CSS。首先，我們定義了徑向菜單根容器（這里指帶有circular-menu類的nav元素）的寬和高。我們也將position屬性定義為relative，以便于相對定位所含的菜單項。

      
 
      
   
  
    1. .circular-menu {  
      2. 
   
  
    2.   width: 250px;  
      3. 
   
  
    3.   height: 250px;  
      4. 
   
  
    4.   margin: 50px auto 0;  
      5. 
   
  
    5.   position: relative;  
      6. 
   
  
    6. } 
      7.

    默認情況下，菜單項是隱藏的。我們想作出漂亮的“淡入淡出+縮放”效果，所以初始化菜單項時，將透明度設(shè)為0，并把transform屬性的scale值設(shè)為0。

      
 
      
   
  
    1. .circle {  
      2. 
   
  
    2.   width: 250px;  
      3. 
   
  
    3.   height: 250px;  
      4. 
   
  
    4.   opacity: 0;  
      5. 
   
  
    5.    
      6. 
   
  
    6.   -webkit-transform: scale(0);  
      7. 
   
  
    7.   -moz-transform: scale(0);  
      8. 
   
  
    8.   -transform: scale(0);  
      9. 
   
  
    9.    
      10. 
   
  
    10.   -webkit-transition: all 0.4s ease-out;  
      11. 
   
  
    11.   -moz-transition: all 0.4s ease-out;  
      12. 
   
  
    12.   transition: all 0.4s ease-out;  
      13. 
   
  
    13. } 
      14.

    你可以看到：我們使用transition屬性來定義動畫。

    為了讓菜單項完成放大和淡入效果，我們希望在類之間進行切換。因此我們?yōu)閺较虿藛味x了一個open類。

      
 
      
   
  
    1. .open.circle {  
      2. 
   
  
    2.   opacity: 1;  
      3. 
   
  
    3.    
      4. 
   
  
    4.   -webkit-transform: scale(1);  
      5. 
   
  
    5.   -moz-transform: scale(1);  
      6. 
   
  
    6.   -transform: scale(1);  
      7. 
   
  
    7. } 
      8.

    一旦open類和circle類出現(xiàn)在同一個元素中，那么這個元素將根據(jù)動畫長度和transition屬性的類型應(yīng)用新的樣式屬性。

    當(dāng)然，嵌在circle類里面的a元素也需要樣式。除了一些常規(guī)的大小樣式，將position設(shè)置為absolute非常重要，這使得JavaScript能夠絕對定位徑向菜單中的菜單項。

      
 
      
   
  
    1. .circle a {  
      2. 
   
  
    2.   text-decoration: none;  
      3. 
   
  
    3.   color: white;  
      4. 
   
  
    4.   display: block;  
      5. 
   
  
    5.   height: 40px;  
      6. 
   
  
    6.   width: 40px;  
      7. 
   
  
    7.   line-height: 40px;  
      8. 
   
  
    8.   margin-left: -20px;  
      9. 
   
  
    9.   margin-top: -20px;  
      10. 
   
  
    10.   position: absolute;  
      11. 
   
  
    11.   text-align: center;  
      12. 
   
  
    12.    
      13. 
   
  
    13. }  
      14. 
   
  
    14.    
      15. 
   
  
    15. .circle a:hover {  
      16. 
   
  
    16.   color: #eef;  
      17. 
   
  
    17. } 
      18.

    同時我們需要定位、設(shè)計菜單的開關(guān)按鈕。

      
 
      
   
  
    1. .menu-button {  
      2. 
   
  
    2.   position: absolute;  
      3. 
   
  
    3.   top: calc(50% - 30px);  
      4. 
   
  
    4.   left: calc(50% - 30px);  
      5. 
   
  
    5.   text-decoration: none;  
      6. 
   
  
    6.   text-align: center;  
      7. 
   
  
    7.   color: #444;  
      8. 
   
  
    8.   border-radius: 50%;  
      9. 
   
  
    9.   display: block;  
      10. 
   
  
    10.   height: 40px;  
      11. 
   
  
    11.   width: 40px;  
      12. 
   
  
    12.   line-height: 40px;  
      13. 
   
  
    13.   padding: 10px;  
      14. 
   
  
    14.   background: #dde;  
      15. 
   
  
    15. }  
      16. 
   
  
    16.    
      17. 
   
  
    17. .menu-button:hover {  
      18. 
   
  
    18.   background-color: #eef;  
      19. 
   
  
    19. } 
      20.

    現(xiàn)在讓我們移步至***部分，這部分使我們的菜單變成真正的徑向菜單。

    JavaScript

    首先，我們實現(xiàn)點擊菜單開關(guān)按鈕能夠顯示、隱藏菜單項的功能。

      
 
      
   
  
    1. document.querySelector('.menu-button').onclick = function(e) {  
      2. 
   
  
    2.    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');  
      3. 
   
  
    3. } 
      4.

    選取含menu-button類的元素來監(jiān)聽點擊事件。一旦你點擊它，它會選取含circle類元素，并向之添加open類。

    現(xiàn)在，***的任務(wù)是：確定菜單項的位置。

      
 
      
   
  
    1. var items = document.querySelectorAll('.circle a');  
      2. 
   
  
    2.    
      3. 
   
  
    3. for(var i = 0, l = items.length; i < l; i++) {  
      4. 
   
  
    4.   items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";  
      5. 
   
  
    5.   items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";  
      6. 
   
  
    6. } 
      7.

    ***行代碼所做的就是選取嵌在circle類元素里的所有鏈接元素。之后可以遍歷這些元素。

    然后，利用基本的幾何圖形，正弦、余弦函數(shù)，迭代(ⅰ)來計算的CSS的 top和left屬性。

    用JavaScript來定位元素，這允許您在菜單使用任何數(shù)量的子元素a，接下來就交給JavaScript的數(shù)學(xué)魔法。

    搞定！

    我希望這篇文章能幫助你實現(xiàn)一個很酷的徑向菜單。如果你做的東西真棒，盡情地在評論中分享吧！如果你真心喜歡這個教程，分享到您最喜愛的社交媒體吧！

    原文鏈接： CREATIVE PUNCH   翻譯： 伯樂在線 - heloowird

    譯文鏈接： http://blog.jobbole.com/65551/


    本文標(biāo)題：用CSS3和JavaScript制作徑向動畫菜單
    文章URL：http://www.dlmjj.cn/article/dpsdjcd.html