Javascript JS/CSS：设置从另一个圆向外扩展的圆的动画

我想得到一个圆，在保持原始圆的同时，从它自身展开。我想要的是，当您将鼠标悬停在上的圆圈（例如水）上时（单击“让我们开始查看圆圈”）。我不知道该怎么做。请注意，我对jQuery的了解非常少，因此，如果您找到一种使用jQuery实现这一点的方法，您能尝试保持它的简单性吗？提前谢谢。越早越好，因为这是一个学校项目

---

我试图让div有一个onmouseover函数，但是我不知道如何获得其余的函数。我在想，当div从较小的宽度和高度设置动画时，可以移动圆，但圆仍然会从中间扩展，而不是从旧的圆扩展。

从仅CSS的设置开始，然后看看您是否真的需要Javascript。这通常会更灵敏/更快地加载。但是，如果您已经加载了一个JS库，并且它有为此构建的函数（比如jQuery），那么请确保使用它们。有很多关于元素动画、CSS或JS的教程

随心所欲地使用数字和样式

#容器{
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.圆圈{
宽度：200px；
高度：200px；
背景色：红色；
边界半径：50%；
}
.圆圈：之前{
内容：“；
宽度：200px；
高度：200px；
边界半径：50%；
位置：绝对位置；
z指数：-1；
显示：内联块；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
过渡：0.5s缓进缓出；
}
.圆圈：悬停：之前{
转换：比例（1.7）转换（-20%，-30%）；
背景颜色：粉红色；
}

欢迎来到SO。这个网站不是一个免费的编码或作业完成服务。我们不会为你做这项工作。在再次发布之前，请通读中的文档，以获取有关该站点主题的信息。请尝试自己编写解决方案，如果您遇到问题，请发布代码，我们可以帮助您。我确实编写了解决方案，只是我知道我的方法完全错误。对不起。忘记。我现在做了。