打字机动画不在手机上居中文本答案

【问题标题】：typewriter animation not centering text on mobile打字机动画不在手机上居中文本
【发布时间】：2022-12-03 11:16:21
【问题描述】：

它在桌面上很好地居中，但动画将开始以移动设备为中心，但继续离开，越过右侧的页面。关于如何确保它以移动设备为中心的任何建议？

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

html{
  min-height: 100%;
  overflow: hidden;
}
body{
  height: calc(100vh - 8em);
  padding: 3.5em;
  color: #fff;
  font-family: 'Anonymous Pro', monospace;  
  background-color: rgb(25,25,25); 
}
.line-1{
    position: relative;
    top: 10%;  
    width: 13em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 220%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

.anim-typewriter{
  animation: typewriter 2.2s steps(20) 0.9s 1 normal both,
             blinkTextCursor 500ms steps(20) 0s 13 normal both;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 10.9em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

<html>
<body>
<p class="line-1 anim-typewriter">12345.6789123<span style="color: #27B59D;">/12345</span></p>
</body>
</html>

【问题讨论】：

你的问题取决于身体填充。

标签： css

【解决方案1】：

body{
    padding: 0;
}
@media screen and (max-width: 600px) {
    .line-1 {
        font-size: 100%;
    }
}

【讨论】：