Question

我正在尝试在此链接中修改codepen中的酷炫演示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;
}

Codepen Demo

如何使CSS动画越过页面的顶部边框而不使用大的上边距。覆盖

1 个答案: