我怎样才能让这个圆圈只有css才能进入屏幕底部？答案

【问题标题】：How can I make this circle go to the bottom of the screen only css?我怎样才能让这个圆圈只有css才能进入屏幕底部？
【发布时间】：2015-10-30 14:05:27
【问题描述】：

所以我有这个代码。

@keyframes anim{
  0% {background-color: red; top: 0px; }
  100% {background-color: yellow; top: 800px;}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

圆圈是一个 div 元素。这个动画使它下降了 800px。但我只想让浏览器的大小下降，然后停止。这样就不会出现滚动了。我只需要使用 CSS 来做到这一点。有什么办法吗？

【问题讨论】：

标签： html css animation screen-size

【解决方案1】：

你可以使用：

top: 100vh

其中 100vh 表示垂直视口高度的 100%。另外，如果你不想在页面上滚动，你可以在body上设置“溢出：隐藏”或者让圆圈及时停止：

top: calc(100vh - 100px)

示例：https://jsfiddle.net/4sjf2t9y/

【讨论】：

【解决方案2】：

您可以以百分比而不是像素来制作动画。问题是，你不能只用top 或bottom 说 100% 减去元素的高度（编辑我的错，事实证明你可以！查看其他答案）。

但您可以将其设置为 top:100% 的动画，这会将其推离页面末尾，然后使用 translateY（与 top 不同）将其拉回。见下文：

html, body{
  height:100%;
}

@keyframes anim{
  0% {background-color: red; top: 0%; transform:translateY(0px); }
  100% {background-color: yellow; top: 100%; transform:translateY(-100px);}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

在此处查看演示：http://codepen.io/EightArmsHQ/pen/avKwRr

【讨论】：

【解决方案3】：

您可以查看百分比：

@keyframes anim{
  0% {background-color: red; top: 0px; }
  100% {background-color: yellow; top:100vh;}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

但是因为当你把它放在 100vh 时你的球会跑出框架。像 80 一样使用。

【讨论】：