[英]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.