[英]Issue with text filling, CSS Animation
This is a CSS and HTML animation, simple text filling.这是一个 CSS 和 HTML animation,简单的文字填充。
For some reason the text jumps when there is a space or if I add a dash?出于某种原因,当有空格或添加破折号时,文本会跳转?
Below you can see the output:下面你可以看到 output:
I've added the code below!我在下面添加了代码!
.comingsoon-loading { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; min-height: 100vh; }.comingsoon-loading h1 { position: absolute; font-size: 20vh; color: #ffcc00; -webkit-text-stroke: 2px black; text-transform: uppercase; }.comingsoon-loading h1::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 0; height: 100%; color: black; -webkit-text-stroke: 0px black; border-right: 4px solid black; overflow: hidden; animation: animate 6s linear infinite; } /* animation to fill text */ @keyframes animate { 0%,10%,100% { width: 0; } 50%,70% { width: 100%; } }
<div class="comingsoon-loading"> <h1 data-text="COMING-SOON">COMING-SOON</h1> </div>
You are animating a string of text appearing slowly but don't account for any of the inherit string properties such as line breaking .您正在为一个缓慢出现的文本字符串设置动画,但不考虑任何继承字符串属性,例如换行符。 During your animation, the first word: "COMING", appears normally as the width increases, but once the hyphen appears, HTML thinks you have inserted a word break point and tries to break "SOON" to a new line.
在您的 animation 期间,第一个单词:“COMING”,随着宽度的增加正常出现,但是一旦出现连字符,HTML 就会认为您已经插入了一个断点并试图将“SOON”换成一个新行。
This can be solved by adding white-space: nowrap;
这可以通过添加
white-space: nowrap;
to your ::before
section, to prevent it from breaking as the animation plays out.到您的
::before
部分,以防止它在 animation 播放时损坏。
HTML HTML
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>
CSS CSS
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: blue;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 20vh;
color: #ffcc00;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 2px solid black;
overflow: hidden;
animation: animate 5s linear infinite;
white-space: nowrap;
}
/* animation to fill text */
@keyframes animate {
0%,
10%,
100% {
width: 0;
}
50%,
70% {
width: 100%;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.