是否可以让我的页脚固定在中心并且文本继续以不同的颜色闪烁

Question

这是我的页脚代码。我的目标是固定中间的页脚，并且文本“欢迎来到 tpopenhouse”继续以不同的颜色闪烁

}
.movement1 {
  /* footer movement*/
  
  height: 50px;
  background: #1976d2;
  position: relative;
  /*-webkit-animation: myfirst 1s 1; /* Safari 4.0 - 8.0 */
  
  -webkit-animation-direction: alternate;
  /* Safari 4.0 - 8.0 */
  
  animation: myfirst1 6s 100000;
  /*Time of animation and 5s and 100000 cycle of animation on refreshing*/
  
  animation-direction: alternate;
  */
}

<!-- Footer -->
<footer class="section  lighten-3 darken-2 white-text center " style="position:fixed;width: 80%;;bottom:0">
  <p class="flow-text movement1"> #TPOpenhouse & Stand To Win Prizes </p>
  <!-- Footer text -->
</footer>

Answer 1

执行以下操作将页脚中心固定在底部：

您的页脚从页面底部稍微向上，因为您在具有默认边距的 <p> 元素上应用了背景颜色，因此在 footer 而不是 [=11= 上应用背景颜色].

footer {
    background: #1976d2;
    left: 50%;
    transform: translateX(-50%);
}

通过应用 left 和 transform 属性，您的页脚也将放置在中间。

Answer 2

错误消失

有一个错误会阻止 css 彩色动画在某些浏览器中触发。

这可以通过在动画开始时添加备用动画触发器来解决。

这可以是颜色以外的任何东西。在这种情况下，我在初始步骤中添加了 width:100% 作为触发器。

您可以通过从初始步骤中删除 width:100% 来查看此错误。

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
  padding: 40px 10px;
  color: red;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    width: 100%;
    color: red;
  }
  25% {
    color: yellow;
  }
  50% {
    color: blue;
  }
  100% {
    color: green;
  }
}

<footer>#TPOpenhouse &amp; Stand To Win Prizes</footer>

以 CSS

为中心

至于居中这个可以很简单。传统的方法是简单地使用填充。现代的方法是使用 flex。选择权在你。

Flex 示例

footer {
  position: fixed;
  height: 100px;
  width: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

<footer>#TPOpenhouse &amp; Stand To Win Prizes<footer>

是否可以让我的页脚固定在中心并且文本继续以不同的颜色闪烁

Is it possible to make my footer fixed in the center and text keep on blinking with different colours

html

css

footer

错误消失

以 CSS