Question

我正在尝试创建一个CSS动画，并且将一些可以在全屏上运行但无法按预期调整窗口大小的东西弄混了。

我正在使用@keyframe动画以稍有不同的速度移动框和边框，但最终在动画结束时聚集在一起。

以下是带有标记的代码笔：https://codepen.io/RichieBrennan/pen/wQrGMJ?editors=1100

<header>
   <div class="border"></div>
   <div class="box">
      <h1>This is some text</h1>
   </div>
</header>

据我了解，％从元素的中心开始？我希望有人在正确的方向上抚摩我。

谢谢。

Answer 1

好问题。

通常，%是直接父尺寸的单位，取自宽度/高度，具体取决于您的使用方式。例如，假设您有一个1000px x 500px容器。如果您的孩子有left: 50%或right: 50%，则将以500px（一半的1000）测量值对孩子进行定位，并从左侧或右侧锚定。相同的规则适用于top: 50%或bottom: 50%，除了您现在要处理250px（一半的500）。老实说，我从不记忆或步履蹒跚（因此解释不力），我只是依靠浏览器开发人员的工具进行黑客入侵，这些知识也随之而来。

您可以采取的解决方法是将position: relative放在父元素（标题）上。您是这样做的，但是为了更彻底，我将重新解释。

position: absolute通常允许相对于浏览器窗口定位元素（顶部，左侧，右侧或底部）； top: 0px; left: 0px;将在左上角。将position: relative或absolute放在父级上可以使所有position: absolute个子元素相对于其父级是相对的。

在下面的示例中，.some-child将20px移开任何东西，因为所有尺寸都相对于父级。

.some-parent {
     margin: 20px;
     position: relative;
}

.some-child {
     position: absolute;
     top: 0;
     left: 0;
}

使用此知识，您的标题应该是相对的，并且边框和框都可以是绝对的。但是，您必须确保将header限制为正确的尺寸，并且应该使用绝对像素来确定偏移量。这种解释有些失控，所以我只告诉你我的意思。

* {
  /* helpful for debugging, but use your developer tools */
  outline: 1px solid red;
}

header{
  height: 200px;
  width: 410px;
  position: relative;
  background: lightblue;
}

.border{
  position: absolute;
  width: 10px;
  background-color: yellow;
  /* see comment below
  transform: translate(-0%, -50%);*/
  left: 0;
  top: 0;
  height: 100%; /* height matches parent */
  animation: move-border 1.1s;
}

.box{
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  right: 0;
  /* don't need this! You should try to make
     your animations animate to transform: none,
     which are essentially transform: translate(0, 0).
     Makes it a lot easier to layout things
     and the move-box animation automatically transforms
     back to the original state (if no 100% is defined)
  transform: translate(-50%, -50%);*/
  background-color: white;
  animation: move-box 0.8s;
}

.box h1{
  /* doesn't need to be absolute! but you can play with these numbers,
     they will be relative to .box
  position: absolute;
  left: 25px;
  top: 50px;
  */
  animation: fadein 2s ease-in;
}

@keyframes move-box {
  0% {
   
  left: 35%;
  opacity: 0; 
  }
  100%{
  }
}

@keyframes move-border {
  0%{
  left: 22%;
  opacity: 0; 
  }
  100%{
  opacity: 1;
  }
  
}

@keyframes fadein {
  0% {opacity: 0;}
  100%{opacity: 1;}
}

<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
  <div class="border"></div>
</header>

要像以前一样将标头居中，只需将其包装在另一个容器中并在其中执行一些居中逻辑即可。

这里发生了很多事情，我敢肯定，您快要无聊了，但是请随时在评论中保留任何问题。我会尽力回答他们。希望有帮助！

Answer 2

这是因为.border元素放置在header元素上，而body元素覆盖了整个.box而不是.box元素，因此％位置与{{1 }}宽度。

您会希望.border元素内的.box元素因为CSS需要.box的宽度。

<header>
    <div class="box">
        <div class="border"></div>
        <h1>This is some text</h1>
    </div>
</header>

现在将.border元素向左（-10px）放置10px（与宽度相同）：

.border{
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: yellow;
  transform: translate(-0%, -50%);
  left: -10px;
  top: 50%;
  animation: move-border 1.1s;
}

现在重要的是将左边的@keyframes move-border更改为负％号（根据您的喜好进行调整）。

   @keyframes move-border {
      0%{
      left: -29%;
      opacity: 0; 
      }
      100%{
      opacity: 1;
      }
   }

或者，您可能想使用:before伪代码来获取更清晰的html代码：

HTML

<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
</header>

CSS

.box:before
{
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: yellow;
  transform: translate(-0%, -50%);
  left: -10px;
  top: 50%;
  animation: move-border 1.1s;
}

签出：https://codepen.io/StudioKonKon/pen/xQXgVV

窗口大小调整时的CSS关键帧动画

2 个答案: