HTML/CSS Alignment 问题

Question

我有代码：

 /* 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后面输出空格？ 为什么 alignment 关闭？

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

Answer 1

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

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

 /* 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