Question

我想在屏幕底部制作日出和日落动画。起点应位于视口之外，然后慢慢移动到中间 - 中间，然后慢慢移动到右下方屏幕的egde，同时平滑地移动到所有其他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 如果没有宣布任何具有确切高度的父母，则包装器应为relative或至少不static，height不应位于%。

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

1 个答案: