Ring Menu的CSS3过渡效果问题

Question

我目前正在尝试学习在我的网站上实施的CSS3技术，你可以查看on this link.当我将鼠标悬停在“Home”铃声菜单上时，如何让所有子菜单移动到“Home”。我不只是想让它在下面的代码中淡出。

html,
body {
  height: 100%;
}
ul,
li {
  margin: 0;
  padding: 0;
}
.ringMenu {
  width: 100px;
  margin: 150px auto;
}
.ringMenu:hover {} .ringMenu ul {
  list-style: none;
  position: relative;
  width: 100px;
  color: white;
}
.ringMenu ul a {
  color: white;
}
.ringMenu ul li {
  /* width: 160px; */
  /* height: 160px; */
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 160px;
  height: 160px;
  background: url('http://i.imgur.com/pOvUHA6.png?1') no-repeat scroll right/ 97% 84%;
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.ringMenu ul li a:hover {
  background: url('http://i.imgur.com/pOvUHA6.png?1') no-repeat scroll right/ 95% 91%;
}
.ringMenu ul li:not(.main) {
  /* overflow: hidden; */
  -webkit-transform: translate;
  /* -webkit-transform: rotate(-180deg) scale(0); */
  /* transform: rotate(-180deg) scale(0); */
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 100% 162px;
  position: absolute;
  top: 86px;
  left: -213px;
  width: 80px;
  height: 60%;
}
.ringMenu ul li.top a {
  width: 110px;
  height: 115px;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -131px;
  left: -24px;
}
.ringMenu ul li.bottom a {
  width: 110px;
  height: 115px;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 175px;
  right: -93px;
}
.ringMenu ul li.right a {
  width: 110px;
  height: 115px;
}
.ringMenu ul li.right2 {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 146px;
  right: -194px;
}
.ringMenu ul li.right2 a {
  width: 110px;
  height: 115px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 146px;
  left: -127px;
}
.ringMenu ul li.left a {
  width: 110px;
  height: 115px;
}
.ringMenu ul li.left2 {
  /* transform:translate(20px,10px); */
  position: absolute;
  top: 86px;
  right: -277px;
}
.ringMenu ul li.left2 a {
  width: 110px;
  height: 115px;
}
@keyframes shimmy {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 50px);
  }
}

<div class="ringMenu">
  <ul>
    <li class="main"><a href="#main">Home</a>
    </li>
    <li class="top"><a href="#top">Products</a>
    </li>
    <li class="right"><a href="#right">Blog</a>
    </li>
    <li class="bottom"><a href="#bottom">Fan Kit</a>
    </li>
    <li class="left"><a href="#left">Social Media</a>
    </li>
    <li class="left2"><a href="#left2">About Us</a>
    </li>
    <li class="right2"><a href="#right2">Contact Us</a>
    </li>
  </ul>
  <!-- /.ringMenu -->
</div>

之前谢谢

Answer 1

如果我理解你的问题，下面的代码片段就是你想要实现的目标。

我所做的是我已经改变了，所以子圈的位置是动画的。

ul,
li {
  margin: 0;
  padding: 0;
}

a{color: #fff;}

.ringMenu {
  width: 160px;
  height: 160px;
  margin: 120px auto;
}
.ringMenu ul {
  list-style: none;
  position: relative;
  
  width: 160px;
  height: 160px;
}

.ringMenu ul li {
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}

.ringMenu ul li a {
  display: block;
  width: 160px;
  height: 160px;
  background: url('http://i.imgur.com/pOvUHA6.png?1') no-repeat scroll right/ 97% 84%;
  text-align: center;
  line-height: 100px;
  border-radius: 50px;
}



.ringMenu ul li.sub-ring {
  -webkit-transform: translate;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  
  position: absolute;
  top: 30px;
  bottom: 0px;
  left: 30px;
  right: 0px;
  opacity: 0;
}
.ringMenu:hover ul .sub-ring{opacity: 1;}

.ringMenu ul li.sub-ring a{
  width: 110px;
  height: 115px;
}


/* top ring */

.ringMenu:hover ul li.top { 
  top: 86px;
  left: -213px;
}

/* Bottom ring */


.ringMenu:hover ul li.bottom{
  top: 175px;
  left: -24px;
}

/* Right Ring */


.ringMenu:hover ul li.right {
  top: 175px;
  left: 83px;
}


/*Right2 Ring */

.ringMenu:hover ul li.right2{
  top: 146px;
  left: 185px;
}

/*Left Ring */

.ringMenu:hover ul li.left {
  top: 146px;
  left: -127px;
}

/* Left 2 Ring */

.ringMenu:hover ul li.left2 {
  top: 86px;
  left: 270px;
}

<div class="ringMenu">
  <ul>
    <li class="main"><a href="#main">Home</a>
    </li>
    <li class="top sub-ring"><a href="#top">Products</a>
    </li>
    <li class="right sub-ring"><a href="#right">Blog</a>
    </li>
    <li class="bottom sub-ring"><a href="#bottom">Fan Kit</a>
    </li>
    <li class="left sub-ring"><a href="#left">Social Media</a>
    </li>
    <li class="left2 sub-ring"><a href="#left2">About Us</a>
    </li>
    <li class="right2 sub-ring"><a href="#right2">Contact Us</a>
    </li>
  </ul>
  <!-- /.ringMenu -->
</div>