CSS/HTML |菜單轉換：圓形到方形

我嘗試製作簡單的css-dropdownmenu。我的目標是創建一個過渡點，如果將鼠標懸停在主菜單元素上，點將轉換爲正方形。點我的意思是一個非常小的圓圈，不能被看到，直到徘徊，然後變成一個正方形。我的菜單已經能夠將廣場轉變成具有不同顏色的圓形，但我不能想到反之亦然的方法，特別是因爲圓形首先必須'隱藏'直到徘徊。CSS/HTML |菜單轉換：圓形到方形

這裏是我到目前爲止有：http://jsfiddle.net/eaqw4m38/3/

HTML：測試

<link href="css/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="container"> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#s1">Menu 1</a> 
       <span id="s1"></span> 
       <ul class="subs"> 
        <li><a href="#">Header a</a> 
         <ul> 
          <li><a href="#">Submenu I</a></li> 
          <li><a href="#">Submenu II</a></li> 
          <li><a href="#">Submenu III</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Header b</a> 
         <ul> 
          <li><a href="#">Submenu I</a></li> 
          <li><a href="#">Submenu II</a></li> 
          <li><a href="#">Submenu III</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#s2">Menu 2</a> 
       <span id="s2"></span> 
       <ul class="subs"> 
        <li><a href="#">Header c</a> 
         <ul> 
          <li><a href="#">Submenu I</a></li> 
          <li><a href="#">Submenu II</a></li> 
          <li><a href="#">Submenu III</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Header d</a> 
         <ul> 
          <li><a href="#">Submenu I</a></li> 
          <li><a href="#">Submenu II</a></li> 
          <li><a href="#">Submenu III</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Menu 3</a></li> 
      <li><a href="#">Menu 4</a></li> 
      <li><a href="#">Menu 5</a></li> 
      <li><a href="http://www.google.com">Google</a></li> 
     </ul> 
    </div> 
</body>

我無法找到通過適合我的問題搜索任何東西。在此先感謝您的答案:) 保羅

編輯：我現在知道如何添加這樣一個圓，使其透明，但我如何將它添加到轉換？的問題是，我有對象：1。由MenuElement 2.圓的方

如何anymate在廣場上空盤旋一圈，而且我要保持字體上圓的頂部

來源

2015-01-31 Phorskin

的jsfiddle：http://jsfiddle.net/u2ykjdbo/

在一開始就應用邊界半徑的元素（當不徘徊的話），然後應用背景和新的顏色，當同時改變邊界半徑爲0的元素徘徊隨着顏色的變化，你會看到從圓形到方形的過渡。

代碼（略不變選擇）：

#nav > li > a { 
 
    color: #333333; 
 
    display: block; 
 
    font-size: 1.3em; 
 
    line-height: 49px; 
 
    padding: 0 15px; 
 
    text-transform: uppercase; 
 
    border-radius: 50%; 
 
} 
 
#nav > li:hover > a, #nav > a:hover { 
 
    background-color: #EC7970; 
 
    color: #000000; 
 
    border-radius: 0; 
 
}

來源

2015-02-25 00:20:38

的一點是其實我是想圓從一個標籤的底部中心出現。在一方面我不能將它設置爲居中而不將其設置爲相對的（然後它擴大了標籤），另一方面，我有問題將它移動到標籤後面，所以它沒有被圓圈覆蓋 – Phorskin 2015-02-26 12:20:12

CSS/HTML |菜單轉換：圓形到方形

回答

相關問題