时间戳

首页 > 解决方案 > 绝对位置上的打字机动画问题

html - 绝对位置上的打字机动画问题

问题描述

我的打字机动画效果遇到问题我在文本上使用绝对位置，如果我删除绝对位置，这会让动画从右向左滑动而不输入，它工作正常，我怎样才能在不删除的情况下解决这个问题位置样式，因为如果我删除它，它不会粘在它的位置？

<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 home-middle">
  <div class="book-overlay">
   <img class="book" src="assets/images/home-book.png" /> 
   <div class="asd">
     <h5 class="outline-text-1 type-effect">Best Support.</h5>
     <h5 class="outline-text-2 type-effect">Best Features.</h5>
     <h5 class="outline-text-3 type-effect">Safest of them all.</h5>
     <h5 class="outline-text-4 type-effect">Affordable.</h5>
     <h5 class="outline-text-5 type-effect">Undetectable.</h5>
    </div>
  </div>  
</div>

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
.outline-text-5 {
    position: absolute;
    top: 87%;
    right: 6.5%;
    white-space: nowrap;
    overflow: hidden;
    animation: 
    typing 3.5s steps(60, end);
}

这里还有一个预览链接https://chorionic-liberties.000webhostapp.com/

标签： htmlcss

解决方案

推荐阅读