键入文本时文本向右移动动画CSS

sqyvllje  于 2022-12-30  发布在  其他
关注(0)|答案(1)|浏览(110)

每次键入文本动画后,下一个文本都会稍微向右移动。如何确保文本保持左对齐?"text-align: left""margin-left:0"不起作用。当我包含"margin-right: 100%"时,它保持左对齐,但每个文本都在新行上,这不是我想要的。

.text_1 {
  animation: text1;
  max-width: 12.5em;
  padding-bottom: 0.1em;
}

.text_2 {
  animation: text2;
  max-width: 9.1em;
  padding-bottom: 0.1em;
}

.text_3 {
  animation: text3;
  max-width: 5.3;
  padding-bottom: 0.1em;
}

.text_4 {
  animation: text4;
  max-width: 15;
  padding-bottom: 0.1em;
}

.text_5 {
  animation: text5;
  max-width: 15.2;
  padding-bottom: 0.1em;
}

.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text5 {
  0%,
  80%,
  100% {
    width: 0;
  }
  85%,
  95% {
    width: 15.2em;
  }
}

@keyframes text4 {
  0%,
  60%,
  80%,
  100% {
    width: 0;
  }
  65%,
  75% {
    width: 15em;
  }
}

@keyframes text3 {
  0%,
  40%,
  60%,
  100% {
    width: 0;
  }
  45%,
  55% {
    width: 5.3em;
  }
}

@keyframes text2 {
  0%,
  20%,
  40%,
  100% {
    width: 0;
  }
  25%,
  35% {
    width: 9.1em;
  }
}

@keyframes text1 {
  0%,
  20%,
  100% {
    width: 0;
  }
  5%,
  15% {
    width: 12.5em;
  }
}

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

h1 {
  font-family: Segoe UI Black;
}

h2 {
  font-family: Segoe UI Black;
}

h3 {
  font-family: Segoe UI Black;
}

h4 {
  font-family: Segoe UI Black;
}

h5 {
  font-family: Segoe UI Black;
}

h6 {
  font-family: Segoe UI Black;
}

.container-text {
  padding-top: 5em;
  padding-left: 5em;
  padding-bottom: 30em;
  margin-top: 3;
}

.container-fluid {
  margin-top: 5em;
}

#title {
  font-size: 3em;
}

#subtitle {
  font-size: 2.5em;
  font-family: Segoe UI Light;
  margin-bottom: 1em;
  background: red;
}

#subsubtitle {
  font-size: 1.5em;
  font-family: Segoe UI Light;
  color: #BFBFBF;
  margin-bottom: 1em;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8 container-text">
      <h1 id="title">Title</h1>
      <h2 id="subtitle">
        <span class="text_1">Tailor your marketing strategy</span>
        <span class="text_2">Gauge public opinion</span>
        <span class="text_3">Study trends</span>
        <span class="text_4">Explore variables like demographics</span>
        <span class="text_5">Monitor sentiment related to a topic</span>
      </h2>
    </div>
  </div>
</div>
pkwftd7m

pkwftd7m1#

您可以将flex-box样式应用于父容器(h2#subtitle),并将内容与flex-box的开头对齐

.text_1 {
  animation: text1;
  max-width: 12.5em;
  padding-bottom: 0.1em;
}

.text_2 {
  animation: text2;
  max-width: 9.1em;
  padding-bottom: 0.1em;
}

.text_3 {
  animation: text3;
  max-width: 5.3;
  padding-bottom: 0.1em;
}

.text_4 {
  animation: text4;
  max-width: 15;
  padding-bottom: 0.1em;
}

.text_5 {
  animation: text5;
  max-width: 15.2;
  padding-bottom: 0.1em;
}

.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

/* flexbox on parent */
h2#subtitle{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
}

@keyframes text5 {
  0%,
  80%,
  100% {
    width: 0;
  }
  85%,
  95% {
    width: 15.2em;
  }
}

@keyframes text4 {
  0%,
  60%,
  80%,
  100% {
    width: 0;
  }
  65%,
  75% {
    width: 15em;
  }
}

@keyframes text3 {
  0%,
  40%,
  60%,
  100% {
    width: 0;
  }
  45%,
  55% {
    width: 5.3em;
  }
}

@keyframes text2 {
  0%,
  20%,
  40%,
  100% {
    width: 0;
  }
  25%,
  35% {
    width: 9.1em;
  }
}

@keyframes text1 {
  0%,
  20%,
  100% {
    width: 0;
  }
  5%,
  15% {
    width: 12.5em;
  }
}

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

h1 {
  font-family: Segoe UI Black;
}

h2 {
  font-family: Segoe UI Black;
}

h3 {
  font-family: Segoe UI Black;
}

h4 {
  font-family: Segoe UI Black;
}

h5 {
  font-family: Segoe UI Black;
}

h6 {
  font-family: Segoe UI Black;
}

.container-text {
  padding-top: 5em;
  padding-left: 5em;
  padding-bottom: 30em;
  margin-top: 3;
}

.container-fluid {
  margin-top: 5em;
}

#title {
  font-size: 3em;
}

#subtitle {
  font-size: 2.5em;
  font-family: Segoe UI Light;
  margin-bottom: 1em;
  background: red;
}

#subsubtitle {
  font-size: 1.5em;
  font-family: Segoe UI Light;
  color: #BFBFBF;
  margin-bottom: 1em;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8 container-text">
      <h1 id="title">Title</h1>
      <h2 id="subtitle">
        <span class="text_1">Tailor your marketing strategy</span>
        <span class="text_2">Gauge public opinion</span>
        <span class="text_3">Study trends</span>
        <span class="text_4">Explore variables like demographics</span>
        <span class="text_5">Monitor sentiment related to a topic</span>
      </h2>
    </div>
  </div>
</div>

相关问题