Javascript 尝试实现css动画以将div背景变形为圆形按钮

我将contact2设置为与contact相同的大小，并将其位置显示为绝对，使用z-index-1，您可以在设计图像中看到我试图实现的目标

期望输出（设计）

期望输出（设计）

我试图通过javascript在onmouseover上指定一个类来完成这一点，这个类将完成动画，onmouseout我试图逆转这一点。 但是变形是把它变成一个椭圆形，而不是与圆形对齐

函数最小化（a）{
设ss=document.styleSheets；
var x=document.getElementById（“contact2”）；
//x、 添加（'animate'）；
//x、 添加（“动画”）；
//x、 className+=“动画”；
x、 添加（“动画”）；
}
功能最大化（a）{
设ss=document.styleSheets；
var x=document.getElementById（“contact2”）；
x、 移除（'animate'）；
}

。制作动画{
动画名称：拉伸；
动画持续时间：1.5s；
动画计时功能：放松；
动画延迟：0；
动画播放状态：运行；
}
@关键帧拉伸{
0% {
转换：比例（1.5）；
边界半径：90%；
}
100% {
变换：比例（0.1）；
边界半径：90%；
}
}

你有一个激动人心的项目吗？

我给你写了一个片段。请把它做成a，那么为什么在锚中有一个div呢？而且你在contact2 div中遗漏了一些东西effect@mplungjan我需要圆圈是可点击的