HTML/CSS 对齐问题答案

【问题标题】：HTML/CSS Alignment issueHTML/CSS 对齐问题
【发布时间】：2022-01-03 23:09:43
【问题描述】：

我有代码：

/* Text */

#hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  /* color: transparent; */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}


/*Vertical Flip*/

.verticalFlip {
  display: inline;
}

.verticalFlip span {
  animation: vertical 5s linear infinite 0s;
  -ms-animation: vertical 3.5s linear infinite 0s;
  -webkit-animation: vertical 5s linear infinite 0s;
  /* color: transparent; */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
}

.verticalFlip span:nth-child(1) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}


/*Vertical Flip Animation*/

@-moz-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -moz-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -ms-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -ms-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<section id="hero">
  <h1 style="margin-bottom: 16px">Word
    <div class="verticalFlip"><span>  Change</span><span> Text</span></div>
  </h1>
  </section

为什么Text后面输出空格？为什么对齐关闭了？

这个问题正在发生，因为我从.verticalFlip span 中删除了position: absolute;，但添加该属性也会使对齐偏离单词的某些部分似乎正在切割的位置。我正在尝试使.verticalFlip span 与#hero h1 相同。我怎样才能做到这一点？请问有什么建议吗？

【问题讨论】：

对于我自己来说，我根本没有看到“文本”这个词
嗯，在我这边，我可以看到它很好
为什么看不到
Safari 不显示“文本”一词
啊尝试使用chrome。我正在使用铬

标签： javascript html jquery css

【解决方案1】：

您对所需内容的描述相当模糊，但如果您希望两个单词/跨度在同一位置交替出现，请在 .verticalFlip span 规则中添加 position: absolute; 和可选的一些 margin-left。

为确保这在任何情况下都有效，还要将position: relative; 添加到这两个跨度的父元素（即.verticalFlip div）中，以将其定义为绝对位置的参考。

/* Text */

#hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  /* color: transparent; */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}


/*Vertical Flip*/

.verticalFlip {
  display: inline;
  position: relative;
}

.verticalFlip span {
  position: absolute;
  margin-left: 0.3em;
  animation: vertical 5s linear infinite 0s;
  -ms-animation: vertical 3.5s linear infinite 0s;
  -webkit-animation: vertical 5s linear infinite 0s;
  /* color: transparent; */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
}

.verticalFlip span:nth-child(1) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}


/*Vertical Flip Animation*/

@-moz-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -moz-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -ms-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -ms-transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<section id="hero">
  <h1 style="margin-bottom: 16px">Word
    <div class="verticalFlip"><span>  Change</span><span> Text</span></div>
  </h1>
  </section

【讨论】：