0 
<!DOCTYPE html>
<html>

<style >

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

</style>


<head>
    <script src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="typed.js"></script>
</head>

<body>
<div class = element>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0,
        loop: true,
        cursorChar: "$",
      });
  });
</script>


</div>

</body>

</html>

当我运行该页面时，光标会跳到下一行，并且单词会无限出现。我希望光标与单词保持一致，来回走动。创建者主页上的演示显示了我希望光标的样子（http://www.mattboldt.com/demos/typed-js/）。我不确定我错过了什么，但我猜它很小

4

2 回答 2

1 
display: inline;

尝试按照许多网站的建议将显示设置为内联和内联块......但这解决了我的问题......在CSS中使用上面的代码......

你可以查看演示：

http://www.problogbooster.com/

于 2016-01-30T09:19:48.113 回答
0

您缺少元素类周围的引号。试试这个：

改变

<div class = element>

到

<div class = "element">

编辑

实际上，您应该使用<span>元素，而不是<div>.

于 2015-06-18T02:40:15.997 回答