HTML/CSS 中的交替文本

Question

我有以下代码：

 /*Vertical Flip*/.verticalFlip { display: inline; }.verticalFlip span { animation: vertical 12.5s linear infinite 0s; -ms-animation: vertical 12.5s linear infinite 0s; -webkit-animation: vertical 12.5s linear infinite 0s; color: #ea1534; opacity: 0; overflow: hidden; position: absolute; }.verticalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }.verticalFlip span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; }.verticalFlip span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; }.verticalFlip span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*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; } } /* text */ #hero h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: 56px; color: rgb(1, 16, 231); color: white; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

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

我希望文本为Sample Change并且Change替换为Text 。 现在，文本不是交替的，而是在新行上，而我希望它全部在一行上，并且Sample文本不会改变（保持不变），但应该有一个垂直翻转的单词更改Change并且它应该在Text之间交替。 我怎样才能做到这一点？

这是我从以下获得代码的地方： https://codepen.io/kaceyatstandcreative/pen/PowbpKm

Answer 1

首先，您的代码中有一些错误：

1. 在 HTML 中，您缺少</div> 。
2. class=" verticalflip " 处的错字应为 css 中所示的verticalFlip
3. 单个 ZC7A62 #hero h1块中的多种color属性

修复这些错误后，您的 animation 不会出现，因为-webkit-text-fill-color: transparent; 删除任何文本颜色。 你应该把它改成color: transparent; 在你的情况下。

 /*Vertical Flip*/.verticalFlip { display: inline; }.verticalFlip span { animation: vertical 12.5s linear infinite 0s; -ms-animation: vertical 12.5s linear infinite 0s; -webkit-animation: vertical 12.5s linear infinite 0s; color: #ea1534; opacity: 0; overflow: hidden; position: absolute; }.verticalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }.verticalFlip span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; }.verticalFlip span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; }.verticalFlip span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*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; } } /* 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; }

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

Answer 2

 #hero > h1 { display: flex; margin: 0; margin-bottom: 16px; font-size: 78px; font-weight: 700; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } #hero div { /* Chrome somehow "looses" the background when animating it */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; -webkit-background-clip: text; }.verticalflip { display: grid; }.verticalflip > div { --animation-duration: 6s; grid-area: 1 / 1; animation: vertical var(--animation-duration) linear infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; }.verticalflip > div:nth-child(1) { animation-delay: calc(-0.5 * var(--animation-duration)); } @keyframes vertical { 10% { transform: rotateX(0deg); } 40% { transform: rotateX(180deg); } 60% { transform: rotateX(180deg); } 90% { transform: rotateX(0deg); } }

 <section id="hero"> <h1 style=""> <div>Sample&nbsp;</div> <div class="verticalflip"> <div>Change</div> <div>Text</div> </div> </h1> </section>

Answer 3

你有一些损坏的 HTML，所以我修复了它。 还将 span 替换为 div 因为transform: rotate仅适用于块元素，而不适用于像span这样的内联元素。

我只是通过旋转文本而不改变不透明度来制作动画。 如果您想添加它，我将由您决定。 我还添加了一个文本没有动画的暂停（从 90% 循环到 10%，旋转 0 度）。

为了让所有元素都在同一行，我添加了display: flex到你的h1 ，为了让旋转的文本覆盖我不得不使用网格布局，其中两个孩子都在第 1 行和第 1 列（ grid-area ）。 我试过position: absolute but background-clip: text doesn't work on Firefox 当我这样做时。

我增加了字体大小以便以更好的方式显示背景剪辑。

[编辑] 显然，当使用background-clip: text和backface-visibility: hidden时，Chrome 会出错。

工作示例：Firefox

 #hero > h1 { display: flex; margin: 0; margin-bottom: 16px; font-size: 78px; font-weight: 700; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; color: transparent; }.verticalflip { display: grid; }.verticalflip > div { --animation-duration: 6s; grid-area: 1 / 1; animation: vertical var(--animation-duration) linear infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; }.verticalflip > div:nth-child(1) { animation-delay: calc(-0.5 * var(--animation-duration)); } @keyframes vertical { 10% { transform: rotateX(0deg); } 40% { transform: rotateX(180deg); } 60% { transform: rotateX(180deg); } 90% { transform: rotateX(0deg); } }

 <section id="hero"> <h1 style=""> <div>Sample&nbsp;</div> <div class="verticalflip"> <div>Change</div> <div>Text</div> </div> </h1> </section>

工作示例：Chrome & Safari

 #hero > h1 { display: flex; margin: 0; margin-bottom: 16px; font-size: 78px; font-weight: 700; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } #hero div { /* Chrome somehow "looses" the background when animating it */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; -webkit-background-clip: text; }.verticalflip { display: grid; }.verticalflip > div { --animation-duration: 6s; grid-area: 1 / 1; animation: vertical var(--animation-duration) linear infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; }.verticalflip > div:nth-child(1) { animation-delay: calc(-0.5 * var(--animation-duration)); } @keyframes vertical { 10% { transform: rotateX(0deg); } 40% { transform: rotateX(180deg); } 60% { transform: rotateX(180deg); } 90% { transform: rotateX(0deg); } }

 <section id="hero"> <h1 style=""> <div>Sample&nbsp;</div> <div class="verticalflip"> <div>Change</div> <div>Text</div> </div> </h1> </section>