如何解决如何使CSS多行打字机效果灵敏?
目标和问题:我想在标题中使用一种响应式打字机效果,使文本调整大小,并在屏幕上换行。为了达到某种效果,我用自己的动画和关键帧将每行设置为自己的p
,但这没有响应。我已经厌倦了将标头设置为flexbox,但似乎一点也不弯曲-当我模拟移动视图时,文本不在屏幕上。 我不想使用JavaScript ,因此我希望坚持使用CSS。
主要问题
- 是否有可能使多行打字机文本自动换行?
- 该问题的大多数其他答案都建议使用flexbox。我已经在其他地方成功实现了它们,但是在使用此组件时遇到了困难。我究竟做错了什么?我应该改用媒体查询和/或在Flexbox中使用媒体查询吗?
小问题
- 我的关键帧中是否还需要
to width: 100%
?启用此功能后,光标会越过文本的前两行(而不是其他两行)的结尾。 - 是否需要为此组件将
html
和body
定义为height: 100%
?
这是codepen:https://codepen.io/nat-jt/pen/rNedexG和代码:
HTML:
<header class="header-main">
{% include nav.html %}
<!-- Typewriter -->
<div class="screen">
<h1 class="anim-typewriter1">_Hi,I'm Natalie</h1>
<p class="anim-typewriter2">
_I do user research + ethnography
</p>
<p class="anim-typewriter3">
_I use my background in anthropology + cognitive science to try
</p>
<p class="anim-typewriter4">
& understand the intersections of lived experiences + contexts
</p>
<p class="anim-typewriter5">
_In my work I break complex problems into understandable
</p>
<p class="anim-typewriter6">
components & provide actionable findings
</p>
</div>
</header>
SASS:
html.header-main,body.header-main
height: 100%
header.header-main
position: relative
z-index: 1
display: flex
flex-direction: column
align-items: flex-start
justify-content: flex-start
width: 100%
height: 100vh // calc(100vh - 8em)
min-height: 100%
padding: 4em
overflow: hidden
background-color: rgb(25,25,25)
h1,p
position: relative
top: 25%
// width: 35em
// width: 65ch
border-right: 2px solid $comp-green
color: rgba(255,255,.75)
font-family: 'Anonymous Pro',monospace
font-size: 130%
text-align: left
white-space: nowrap
overflow: hidden
//transform: translateY(-50%)
h1
font-size: 250%
font-weight: 600
width: 9.05em
width: 16ch
/* Animation */
.anim-typewriter1
width: 9.05em
width: 16ch
animation: typing1 1.5s steps(16) 350ms 1 normal both
.anim-typewriter2
width: 18.75em
width: 33ch
margin-top: .5em
opacity: 0
animation: typing2 2s steps(33) 3s 1 normal both
.anim-typewriter3
width: 35.7em
width: 63ch
margin-top: 1em
opacity: 0
animation: typing3 2s steps(63) 5s 1 normal both
.anim-typewriter4
width: 35.1em
width: 62ch
margin-bottom: 1em
opacity: 0
animation: typing4 2s steps(62) 7s 1 normal both,cursor_blink .8s steps(44) infinite normal
.anim-typewriter5
width: 31.7em
width: 56ch
margin-top: 1em
opacity: 0
animation: typing5 2s steps(56) 9.5s 1 normal both,cursor_blink .8s steps(44) infinite normal
.anim-typewriter6
width: 22.7em
width: 40ch
opacity: 0
animation: typing6 2s steps(40) 11.5s 1 normal both,cursor_blink .8s steps(44) infinite normal
@keyframes typing1
from
width: 0
to
width: 100%
99.9%
border-right: 2px solid $comp-green
100%
border-right: none
@keyframes typing2
from
width: 0
to
width: 100%
1%
opacity: 1
99.99%
border-right: 2px solid $comp-green
100%
opacity: 1
border-right: none
@keyframes typing3
from
width: 0
// to
// width: 35.7em
1%
opacity: 1
99.99%
border-right: 2px solid $comp-green
100%
opacity: 1
border-right: none
@keyframes typing4
from
width: 0
// to
// width: 35.1em
1%
opacity: 1
99.99%
border-right: 2px solid $comp-green
100%
opacity: 1
border-right: none
@keyframes typing5
from
width: 0
to
width: 31.7em
1%
opacity: 1
99.99%
border-right: 2px solid $comp-green
100%
opacity: 1
border-right: none
@keyframes typing6
from
width: 0
to
width: 22.7em
1%
opacity: 1
100%
opacity: 1
@keyframes cursor_blink
from
border-right-color: $comp-green
to
border-right-color: transparent
我已经看到了与此问题相关的其他问题,尽管它可以帮助我清理一些事情,但仍然无法从他们的答案中找出解决方案。
感谢您的时间和帮助!请告知我是否还有其他信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。