圈入的动画

Question

让我们考虑一下我用这种方式组织的几个div：

＆＃13;

＆＃13;

#absolute-canvas a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 4em; 
  height: 4em;
  margin: -2em;
  border-radius: 100%;    
  background: black;
}
.deg0 { 
  transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 { 
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 { 
  transform: translate(-12em);
}
.deg225 { 
  transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 { 
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}

＆＃13;

<section id="absolute-canvas">

  <img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
  <div id="nav-container">
    <a href='#' class='deg0'></a>
    <a href='#' class='deg45'></a>
    <a href='#' class='deg135'></a>
    <a href='#' class='deg180'></a>
    <a href='#' class='deg225'></a>
    <a href='#' class='deg315'></a>
  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

我希望以这样一种方式设置它的动画：当中心图像悬停时，外部圆圈以某个动画显示 - 从中​​心图像的中心向外移动到各自的位置（或以圆形方式）入口，不必是一条直线。）

是否有任何已经实施过这种动画的图书馆，或者有关如何完成这样动画的任何想法？

Answer 1

你的问题很广泛，但这是一个想法：

#absolute-canvas a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 4em; 
  height: 4em;
  margin: -2em;
  border-radius: 100%;    
  background: black;
  transform: rotate(0deg) translate(0);
  opacity: 0;
  transition: all 1s ease;
}
#absolute-canvas:hover a {
  opacity: 1;
}
#absolute-canvas:hover .deg0 { 
  transform: translate(12em);
} /* 12em = half the width of the wrapper */
#absolute-canvas:hover .deg45 { 
  transform: rotate(45deg) translate(12em);
}
#absolute-canvas:hover .deg135 {
  transform: rotate(135deg) translate(12em);
}
#absolute-canvas:hover .deg180 { 
  transform: rotate(180deg) translate(12em);
}
#absolute-canvas:hover .deg225 { 
  transform: rotate(225deg) translate(12em);
}
#absolute-canvas:hover .deg315 { 
  transform: rotate(315deg) translate(12em);
}

<section id="absolute-canvas">

  <img src="http://placehold.it/200x200" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
  <div id="nav-container">
    <a href='#' class='deg0'></a>
    <a href='#' class='deg45'></a>
    <a href='#' class='deg135'></a>
    <a href='#' class='deg180'></a>
    <a href='#' class='deg225'></a>
    <a href='#' class='deg315'></a>
  </div>

</section>

Answer 2

选中此Fiddle您可以使用以下CSS选择器

 img:hover ~ #nav-container a

仅在图像悬停时选择球。我将他们的初始位置设置为0并在图像悬停时为翻译设置动画。

初始状态

.deg0 { 
   transform: translate(0);
}

悬停

img:hover ~ #nav-container .deg0 { 
    transform: translate(12em);
}