使用类型化的javascript/jquery库使游标的大小与文本大小相同

Question

使用类型化的javascript/jquery库使游标的大小与文本大小相同

<!DOCTYPE html>
<html>

<style >
.element{

font-size: 100px

}

.typed-cursor{
    font-size: 100px
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    10% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    10% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    10% { 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>
<span class = "element">
<script>
  $(function(){
      $(".element").typed({
        strings: ["agdsgdggd","okay"],
        typeSpeed: 100,
        loop: true,
        cursorChar: "|",
      });
  });
</script>


</span>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

所以我使我的元素跨度有一个默认的文本大小,它修改了文本,但是光标没有改变.我试图在css中设置游标大小,但似乎没有工作.也许有人知道我失踪的伎俩.谢谢.

Answer 1

Eig*_*lue 6

我在回答我自己的问题.这是使文本和键入的javascript库的大小相同的解决方案,

之前

.typed-cursor{
    font-size: 100px
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

Run Code Online (Sandbox Code Playgroud)

在字体大小上忘了半冒号

.typed-cursor{
    font-size: 100px;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

Run Code Online (Sandbox Code Playgroud)

现在工作.

归档时间：	10 年，11 月前
查看次数：	2516 次
最近记录：	10 年，11 月前