问题描述
我使用 HTML 和 CSS 创建了打字机效果。它在网络上运行良好,但在移动设备上它不适合屏幕的宽度。如何使效果响应?我希望背景图像保持静态。这是我的代码:
.typewriter h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: Nowrap;
margin: 0 auto;
letter-spacing: .3em;
font-weight: bold;
animation: typing 5s steps(40,end),blink-caret .75s step-end infinite;
animation-iteration-count: infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 15em
}
}
@keyframes blink-caret {
from,to {
border-color: transparent
}
50% {
border-color: orange;
}
}
<div class="container">
<div class="typewriter">
<h1>Model Running . . .</h1>
</div>
</div>
桌面
移动
解决方法
对于图像 I,您可以添加最大宽度 (100%/100vw) 但是对于文本,我认为您必须使用 CSS Media Queries 来设置不同的大小。
,我使用 font-size
来减少移动版本上的 font-size
。这意味着,如果屏幕宽度不超过 800 像素,则减小 .typewriter h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .3em;
font-weight: bold;
animation: typing 5s steps(40,end),blink-caret .75s step-end infinite;
animation-iteration-count: infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 15em
}
}
@keyframes blink-caret {
from,to {
border-color: transparent
}
50% {
border-color: orange;
}
}
@media screen and (max-width: 800px){
.typewriter h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .3em;
font-weight: bold;
animation: typing 5s steps(40,blink-caret .75s step-end infinite;
animation-iteration-count: infinite;
font-size: 20px;
}
@keyframes typing {
from {
width: 0
}
to {
width: 15em
}
}
@keyframes blink-caret {
from,to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
。如果这不是您想要的,请告诉我。
代码如下:
<div class="container">
<div class="typewriter">
<h1>Model Running . . .</h1>
</div>
</div>
{{1}}