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

我想实现这个视频链接中显示的动画。

我是网络开发新手。有人能给我一些想法来实现它吗

---

谢谢

只需将鼠标悬停在我的示例上，就可以重新开始一段代码，伙计：

div{
显示：内联块；
}
分隔线-容器，分隔圆{
浮动：左；
}
分线集装箱{
高度：50px；
宽度：50px；
位置：相对位置；
}
分区圆{
背景颜色：绿色；
边界半径：50%；
宽度：50px；
高度：50px；
}
分割线{
背景：#999；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：1px；
}
第2分区{
背景：红色；
位置：绝对位置；
最高：50%；
左：0；
右：100%；
高度：1px；
过渡：所有1；
z指数：5；
}
div.container:悬停div.line2{
右：0；
}