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

Question

我正在努力做一个日子＆amp;使用jQuery，CSS和Html进行夜间循环动画。

当我通过单击下面的滑块来运行动画时，大圆的下半部分中的半圆形的水部分变形为矩形。

以下是JsFiddle for my Day＆amp;夜间循环动画： https:// jsfiddle.net/g0Lpzfqr/3/

Answer 1

问题在于你的CSS代码。水Div较小，这就是它在动画过程中变形的原因。你可以：

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

或者

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

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

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

}

点击此处检查您编辑过的Jsfiddle：https://jsfiddle.net/ydus80wp/3/ 希望它有所帮助。

Answer 2

您可以使用z-index来解决此问题。 将z-index: 0;添加到您的水类中。

检查这个小提琴： https://jsfiddle.net/Naderial/qnjumLqc/