簡體   English   中英

使用鍵入的javascript / jquery庫使光標的文本大小相同

[英]Making cursor the same size of text using typed javascript/jquery library

<!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>

因此,我使元素范圍具有默認的文本大小,該大小可以修改文本,但光標沒有變化。 我試圖在css中設置光標大小,但是似乎沒有用。 也許有人知道我所缺少的把戲。 謝謝。

我在回答我自己的問題。 這是使輸入的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;
}

忘記了半冒號的字體大小

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

現在可以使用。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM