每次键入文本动画后,下一个文本都会稍微向右移动。如何确保文本保持左对齐?"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>
1条答案
按热度按时间pkwftd7m1#
您可以将
flex-box
样式应用于父容器(h2#subtitle
),并将内容与flex-box的开头对齐