无法隐藏我的太阳动画的溢出

Question

我想在屏幕底部制作日出和日落动画。起点应该在视口之外，然后慢慢移动到中间，然后慢慢移动到右下角的屏幕边缘之外，同时平滑地移动到所有其他 html 内容的顶部。

https://codepen.io/imaginfox/pen/oqqpLK

我的问题是当它离开屏幕时会出现一个垂直滚动条。 太阳的路径也有点偏离，因为它不在视口中间，我认为使用百分比值而不是 X 和 Y 像素值会使其响应，例如移动友好。

CSS：

#sun {
  height: 500px;
  width: 500px;
  left: 0%;
  top: 100%;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  z-index: 1000;
  overflow: hidden;
}

Javascript：

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
</head>
<body>

    <div id="sun"></div>

    <script type="text/javascript">


    TweenMax.to("#sun", 5, {
        bezier: {
            type: "soft",
            values: [
                { left: "0%", top: "0%" },
                { left: "100%", top: "100%" },
            ]},

        ease: Linear.easeNone,
        repeat:-1,
    });
    </script>
</body>
</html>

Answer 1

在容器元素上使用overflow: hidden;

更新：https://codepen.io/anon/pen/NYYORO wrapper 应该是relative 或至少不是static，如果没有声明任何具有精确高度的父母，height 不应该在% 中。