如何使CSS动画在不使用大的顶部margins.as封面的情况下越过页面的顶部边框。

Question

我正在尝试修改一个很酷的演示代码，在这个链接http://codepen.io/Lewitje/pen/BNNJjo，我试图让它在全屏工作，因为演示容器只覆盖了屏幕的中间部分，这只是1/3的实际面积。我已经试过修改CSS了。

    .wrapper {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 400px;
  margin-top: 100%;   <--- 
  overflow: hidden;

当我这样做时，它会全屏显示，但动画会在顶部不规则地停止。有没有一种方法可以让动画通过屏幕而不将容器限制在屏幕的1/3？

Answer 1

.wrapper {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}