CSS3动画全屏

Question

• 我发现了一个非常令人振奋的登录表单示例：https://codepen.io/Lewitje/pen/BNNJjo，但是它的高度限制在400 it。我想使背景成为全屏。我把高度改成了100%，但是我在动画方面有问题。

他们宣布：

@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}

-700px宣布了能飞的盒子的高度。要使背景全屏，我需要改变这个。我试着添加-100%，但是它不起作用。

你能帮帮我吗?

Answer 1

尝试使用100 Try代替。

有关视图端口相对长度这里的更多信息