时间戳

首页 > 解决方案 > 谁能告诉我为什么位置：在 CSS 中的三次贝塞尔函数中需要固定？

html - 谁能告诉我为什么位置：在 CSS 中的三次贝塞尔函数中需要固定？

问题描述

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

<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>

标签： htmlcsscss-positioncubic-bezier

解决方案

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

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

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

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

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

推荐阅读