[我试图模仿当您单击图标从https://www.fpp.net/contact/（右上角，圆形的东西）上方的菜单打开菜单时发生的动画，但是我的外观看起来有些古怪，而不是因为松动。
（从视觉上看，似乎他们使用了某种矩形叠加层，而圆形只是填充了它。矩形叠加层是浏览器的宽度和高度，因此似乎圆正在转变为矩形。
我已经尝试过，但无济于事：
$('#circle').on('click', (event) => {
$(event.currentTarget).toggleClass('clicked');
});body {
}
#circle {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: black;
position: absolute;
z-index: 999999999;
top: 30px;
left: 30px;
transition: transform 0.75s ease;
transform-origin: center;
}
#circle.clicked {
transform: scale(150);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="circle"></div>
</body>您可以看到，他们的动画和我的动画的区别在于他们的动画以自然的方式扩展，而我的动画却...怪异地扩展？
为了增加伤害，因为它扩展得太多，所以增加了浏览器的高度/宽度。
我该怎么办？
您可以使用box-shadow代替transform并使用较小的伪代码以避免容器和阴影周围的越野车；
$('#circle').on('click', (event) => {
$(event.currentTarget).toggleClass('clicked');
});body {}
#circle {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: black;
position: absolute;
z-index: 999999999;
top: 30px;
left: 30px;
}
#circle::before {
content: '';
height: 28px;
width: 28px;
position: absolute;
top: 3px;
left: 3px;
border-radius: inherit;
transition: 0.75s ease;
}
#circle.clicked::before {
box-shadow: 0 0 0 200vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="circle"></div>
</body>