将动画文本定位到 Div 的左下角

Question

有人可以帮我把这个动画文本放在我的 div 的左下角吗？如果我需要改变实现动画文本的方式，我会全力以赴。我从另一个 Stack Overflow 线程中得到了我正在使用的示例。我正在使用 Wordpress 和 Elementor。

我的网站的链接是： http://stalone.flywheelsites.com/

我目前使用的代码如下：

.lyrics-container {
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <div class="logo">Logo</div>
  <div class="lyrics-container">
  <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
  <p class="lyrics">I will never<br>love again.</p>
  </div>

注意：出于演示目的，我做了一个快速的保证金修改，我知道这是不可行的，这就是我在这里寻求帮助的原因。

提前致谢！

Answer 1

你需要一个绝对定位元素的相对包装器。这是一种常见的做法。您可能需要给包装器一定的高度。例如 100vh 或任何您需要的。

我只是添加了最低限度。所以你将不得不处理其余的样式。

.wrapper {
  position: relative;
 }

.lyrics-container {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <div class="wrapper" >
     <div class="logo">Logo</div>
     <div class="lyrics-container">
        <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
        <p class="lyrics">I will never<br>love again.</p>
     </div>
  </div>

Answer 2

您可以使用position: absolute; 将其与底部对齐，而不会影响其余组件。更多关于positions here。

.lyrics-container {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.lyrics {
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}

.lyrics:nth-child(1) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;
}

.lyrics:nth-child(2) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="logo">Logo</div>
<div class="lyrics-container">
  <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
  <p class="lyrics">I will never<br>love again.</p>
</div>