如何实现此视频链接中显示的动画？

Question

我希望实现此视频链接中显示的动画。 https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH

我是网络开发的新手。 任何人都可以给我一些想法来实现它吗？

谢谢

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>