javascript - Typed.js 动画闪烁光标不工作

Question

所以我尝试在 typed.js 上使用 blinker cursor 一个很棒的 js.plugin，可以在这里找到:https://github.com/mattboldt/typed.js

我试图让闪烁光标在输入时与文本内联，但正如您在 jsfiddle 中看到的那样:https://jsfiddle.net/harrydry/p4ev1nj2/它只是在旁边闪烁。

这样做的原因是我已经应用了一些 id 来键入，以便文本居中并更改字体等。

不幸的是，这似乎破坏了闪光效果。

有没有人知道如何让 blinker 与应用的 CSS 样式一起工作，如 js fiddle 所示。

    .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; }
    }

这是 typed.js 页面上的代码，用于使键入光标正确闪烁

非常感谢您的帮助。当然，我会赞成正确答案等。享受这一天哈利 :)

Answer 1

这对我有用:

 .typed-cursor {
        opacity: 1;
        animation: blink .7s infinite;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }