0

这是以下具有位置的代码：固定。如果我删除这条线，那么我的三次函数就不能简单地工作。谁能告诉我这种定位的工作原理。此外，建议一些资源以更好地理解定位。

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;  
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 { 
    left: 27%;
    animation-timing-function: linear;
  }
  #ball2 { 
    left: 56%;
    animation-timing-function: ease-out;
  }

@keyframes bounce {
  0% {
    top: 0px;
  } 
  100% {
    top: 249px;
  }
} 

</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

4

2 回答 2

0

您的动画会更改您正在制作动画的元素的top和left属性。

fixed这些属性只有在元素的位置设置为、absolute或时才会生效relative。

删除该行position: fixed会将元素的位置设置为position: static，从而导致topandleft属性无效。

有关定位的一些资源，请查看https://www.w3schools.com/css/css_positioning.asp

它解释了可以应用于元素的定位属性以及top、bottom和属性在每种情况下的作用。rightleft

于 2019-01-10T06:18:04.563 回答
0

用这个替换你的 CSS，

.balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    width: 50px;
    height: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red { 
    position: absolute;
    left: 200px;
    animation-timing-function: linear;
  }
  #blue { 
    position: absolute;
    left: 500px;
    animation-timing-function: ease-out;
  }
@keyframes bounce {
  0%{
    top:0;
  }
  100%{
    top:200px;
  }
}
  • 为了使元素移动，您需要使用 CSS 位置属性，它可以是相对的或绝对的。
  • 固定不是必需的，因为它会将元素固定在屏幕上。因此，当您向下滚动时，对象将沿着屏幕移动。

如果您想学习定位，可以查看此内容：https ://developer.mozilla.org/en-US/docs/Web/CSS/position

于 2019-01-10T05:51:08.540 回答