如何在脉冲时将文本保持在页面中间

Question

我试图在页面中央显示纯文本脉冲我不希望它出现在顶部

我玩过秤

CSS......
.Lum{
  font-family: Edwardian Script ITC;
 position: fixed;
  top: 50%;
  left: 50%;
  font-size: 50px;
  text-align: center;
  transform: translate(-50%, -50%);
  margin: 0;
  letter-spacing: 1px;}
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.pulse {
  animation-name: pulse;
  animation-duration: 2s;
}
HTML..............
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">

    <title>Lumiere</title>
  </head>
  <body class="pulse">
    <h3 class="Lum">Lumiere</h3>
  </body>
</html>

我希望文本始终位于页面中间而不是顶部

Answer 1

您应该如何修复当前方法的动画：

.Lum{
  font-family: Edwardian Script ITC;
 position: fixed;
  top: 50%;
  left: 50%;
  font-size: 50px;
  text-align: center;
  transform: translate(-50%, -50%);
  margin: 0;
  letter-spacing: 1px;}
@keyframes pulse {
  /* Since you're using translate, you shouldn't overwrite it with only scale, just combine them */
  0% {transform: translate(-50%, -50%) scale(1);}
  50% {transform: translate(-50%, -50%) scale(1.1);}
  100% {transform: translate(-50%, -50%) scale(1);}
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  /* If you want the animation keeps going */
  animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">

    <title>Lumiere</title>
  </head>
  <body>
    <!-- You need to put pulse on the element, not the whole page -->
    <h3 class="Lum pulse">Lumiere</h3>
  </body>
</html>

由于您使用的是 transform 动画，也许 translate 居中方法不是很理想。也许试试这个方法：

body {
  /* Make the container flexbox */
  display: flex;
  /* Center its children */
  justify-content: center;
  align-items: center;
  /* set the width and height as big as the window */
  width: 100vw;
  height: 100vh;
  
  padding: 0;
  margin: 0;
}

.Lum{
  font-family: Edwardian Script ITC;
  font-size: 50px;
  text-align: center;
  margin: 0;
  letter-spacing: 1px;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  /* If you want the animation keeps going */
  animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Lumiere</title>
  </head>
  <body>
    <h3 class="Lum pulse">Lumiere</h3>
  </body>
</html>

如何在脉冲时将文本保持在页面中间

How to keep text in middle of page while pulsing

css

animation

pulse