jquery - 较低的 div 在 CSS 和 jQuery 动画中变形

Question

我正在尝试使用 jQuery、CSS 和 Html 制作昼夜循环动画。

当我点击下面的 slider 运行动画时，大圆圈下半部分的水部分变成了一个矩形。

这是 JsFiddle 上用于我的昼夜循环动画的代码: https:// jsfiddle.net/g0Lpzfqr/3/

Answer 1

问题出在您的 CSS 代码上。 water Div 较小，这就是它在动画期间变形的原因。您可以:

• 增加 CSS 中唯一较小的时间圆的高度和宽度，使其变大并匹配其他较大的元素。

或者

• 您可以减小所有其他元素的高度和宽度以匹配较小的时间圈

如果您想要一个更简单的解决方案，那么您应该在 CSS 代码中将 .time-circle 的宽度和高度从 200px 更改为 400px，如下所示:

.time-circle {
  width: 400px;
  height: 400px;

}

在此处检查您编辑的 Jsfiddle:https://jsfiddle.net/ydus80wp/3/ 希望对您有所帮助。