Making cursor the same size of text using typed javascriptjquery 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>

So I made my element span have a default text size, which modifies the text, but the curser is unchanged. I tried to set the cursor size in the css, but it seems not to have worked. Maybe someone knows the trick that I am missing. Thank you.

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

Share Improve this question asked Jun 18, 2015 at 5:19 Eigenvalue 1,1331 gold badge17 silver badges38 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

I'm answering my own question. This is the solution to make the text the and the cursor the same size for typed javascript library,

before

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

forgot semi colon on font size

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

Works now.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Making cursor the same size of text using typed javascriptjquery library - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)