遮不住我的太阳动漫溢出

Question

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

我的问题是当它离开屏幕时会出现一个垂直滚动条。此外，太阳的路径有点偏离，因为它没有在视口的中间居中，我认为使用百分比值而不是 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 应该不在 % 中，如果没有任何 parents 声明了确切的高度。

遮不住我的太阳动漫溢出

can't hide overflow of my sun animation

javascript

css

animation

gsap