Question

我制作了这个CSS打字机动画但是，我无法使其响应。

以下是我的代码：

HTML：

<div class="animation">
    <p>CRISTIANO RONALDO</p> 
</div>

CSS：

.animation p{
  color: #D64933; 
  font-family: 'Lato', cursive;
  font-size: 50px; 
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: title 7s steps(70, end); 
  margin-bottom: 40px;

}

@keyframes title{ 
  from { width: 0; opacity: 0.0;}
  to { opacity: 1.0; } 
}

我希望动画从页面中心开始，并且还具有响应性。有关如何实现的任何想法？

链接到CodePen

Answer 1

我并不是说这是最好的解决办法，但至少它有效（因为有些震动）：

/*CSS*/
.animation {
width: 100%;
text-align: center;
}

.animation p{
margin: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
color: #D64933; 
font-family: 'Lato', cursive;
font-size: 50px; 
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: title 3s steps(70, end); 
margin-bottom: 40px;

}

Answer 2

使用flexbox非常直接。

将动画包装在容器中。将显示设置为flex 证明内容并将项目对齐到中心

将body html和容器的高度设置为100％

将字体大小设置为视图高度，以便保持响应

body, html{
  height: 100%;
}

.container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animation p{
  color: #D64933; 
  font-family: 'Lato', cursive;
  font-size: 10vh; 
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: title 7s steps(70, end); 
  margin-bottom: 40px;

}

@keyframes title{ 
  from { width: 0; opacity: 0.0;}
  to { opacity: 1.0; } 
} 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="animation">
    <p class="text-center">CRISTIANO RONALDO</p> 
  </div>
</div>

如何使CSS打字机效果响应？

2 个答案: