Html 如何避免动画元素在页面放大时扩展页面

我想放置css动画，使其仅部分显示在页面上。 我的问题是它不断扩展页面。 我曾尝试在.ripple背景上使用隐藏溢出，但这不起作用。我也尝试过使用clip，但我不认为这是正确的解决方案，除非我用错了。 谁能帮我照点光吗

.ripple背景{
位置：粘性；
z指数：-1；
显示：网格；
网格模板列：1fr；
网格模板行：1fr；
证明项目：中心；
对齐项目：居中；
高度：610px；
宽度：610px；
左缘：60%；
边际上限：50vh；
}
.圆圈{
位置：绝对位置；
边界半径：50%；
背景：白色；
动画：涟漪25秒无限；
盒影：0px 0px 1px 0px#b1b1b1b1；
}
.小{
宽度：100px；
高度：100px；
}
.中等{
宽度：200px；
高度：200px；
}
.大{
宽度：300px；
高度：300px；
}
xlarge先生{
宽度：400px；
高度：400px；
}
.XXL{
背景颜色：灰色；
宽度：500px；
高度：500px；
}
.shade1{
不透明度：1；
}
.shade2{
不透明度：0.5；
}
.shade3{
不透明度：0.7；
}
.shade4{
不透明度：0.8；
}
沙德先生5{
不透明度：0.9；
}
@关键帧波纹{
0% {
变换：比例（0.8）；
}
50% {
转换：比例（1.2）；
}
100% {
变换：比例（0.8）；
}
}

---

要使溢出隐藏起作用，您需要将其放在父容器上，其中包含要隐藏的内容

下面，我创建了一个包装器，并将其设置为页面大小

*{
填充：0；
保证金：0；
}
#包装纸{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.波纹背景{
位置：粘性；
z指数：-1；
显示：网格；
网格模板列：1fr；
网格模板行：1fr；
证明项目：中心；
对齐项目：居中；
高度：610px；
宽度：610px；
左缘：60%；
边际上限：50vh；
}
.圆圈{
位置：绝对位置；
边界半径：50%；
背景：白色；
动画：涟漪25秒无限；
盒影：0px 0px 1px 0px#b1b1b1b1；
}
.小{
宽度：100px；
高度：100px；
}
.中等{
宽度：200px；
高度：200px；
}
.大{
宽度：300px；
高度：300px；
}
xlarge先生{
宽度：400px；
高度：400px；
}
.XXL{
背景颜色：灰色；
宽度：500px；
高度：500px；
}
.shade1{
不透明度：1；
}
.shade2{
不透明度：0.5；
}
.shade3{
不透明度：0.7；
}
.shade4{
不透明度：0.8；
}
沙德先生5{
不透明度：0.9；
}
@关键帧波纹{
0% {
变换：比例（0.8）；
}
50% {
转换：比例（1.2）；
}
100% {
变换：比例（0.8）；
}
}