如何结合Bootstrap的响应使用“打字效果”CSS动画？

-1

有一个很好的打字动画我想在我的个人网站上使用： https://codepen.io/rusjames/pen/uAFhE 如何结合Bootstrap的响应使用“打字效果”CSS动画？

但是，当我试图把它引导一个jumbotron里面，我注意到，它并没有改变窗口大小响应（例如，使窗口变小使其脱离屏幕）正常文本会。

有没有一种方法可以让我的文本响应窗口大小以及bootstrap的所有其他不错的属性？

编辑：CSS是完全一样的关于链接，但我从适用于所有p到一个名为typing类改成了：

<div id="main" class="container-fluid text-center push-center"> 
    <div style="background:transparent !important" class="jumbotron"> 
     <h1>Welcome to my site</h1> 
     <p class="typing"> <i class="fa fa-globe" aria-hidden="true"></i> 
      I am from America </p> 
      <p class="typing"> <i class="fa fa-briefcase" aria-hidden="true"></i> 
       I love to work. </p> 
       <p class="typing"> 
        Contact me! <span>|</span> 
       </p> 
      </div> 

     </div> 

    </div>

来源

2016-06-09 AlwaysQuestioning

其中是你的jumbotron的代码与打字代码？ – mlegg

是的，虽然你需要纠正一些媒体查询来调整动画和使用的元素，因为它们不能正常缩放以免在2'p'元素内断线 – LGSon

我已经更新了我的帖子码。我没有媒体查询的概念。我将CSS应用于所有'p'改为我称为'typing'的类。这会改变什么吗？ – AlwaysQuestioning

您可以通过在视口中单位指定font-size做到这一点，如下所示：
Scaling font size with screen size?

这适用于所有类型的文本。

来源

2016-06-09 19:06:21 Midas

这工作，谢谢。是否有任何理由在我创建的'.typing {}'CSS类中不起作用？当我在'.typing：nth-child {}类中使用它时，它似乎才起作用。 – AlwaysQuestioning

@AlwaysQuestioning它取决于其他CSS规则的优先顺序。试试'p.typing {}' – Midas

那也行！对于我的最后一个问题 - 你知道这段代码中的文字在屏幕上滚动吗？我希望能从屏幕中心的静态位置获得打字效果。 – AlwaysQuestioning

如何结合Bootstrap的响应使用“打字效果”CSS动画？

回答

相关问题