如何获得此视频链接中显示的动画？

Question

我想获得此视频链接中所示的动画。 https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH

我是Web开发的新手。谁能给我一些实现它的想法？

谢谢

Answer 1

只需将鼠标悬停在我的示例上，即可开始摘要，请配合：

div {
 display: inline-block;
}

div.line-container, div.circle {
  float:left;
}

div.line-container {
  height: 50px;
  width: 50px;
  position: relative;
}
 
 div.circle {
   background-color: green;
   border-radius: 50%;
   width: 50px;
   height: 50px;
 }

div.line {
  background: #999;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}


div.line2 {
  background: red;
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 1px;
  transition: all 1s;
  z-index: 5;
}

div.container:hover  div.line2 {
  right: 0;
}

<div class="container">
  <div class="circle"></div>
  <div class="line-container">
    <div class="line"></div>
    <div class="line2"></div>
  </div>
  <div class="circle" />
</div>