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

我想在屏幕底部制作日出和日落动画。起点应在视口外，然后慢慢移动到中心中间，然后在右下方慢慢移动屏幕的EGDE，同时在所有其他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>

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

更新：https://codepen.io/anon/pen/nyyoro包装器应为relative或至少不为static，如果没有确切高度的父母，height不应在%中。

相关内容

最新更新

热门标签：