不工作

Typed.js动画光标信号灯所以我试图用对typed.js一个真棒js.plugin可以在这里找到信号灯光标：https://github.com/mattboldt/typed.js 不工作

我试图让信号灯光标与文本，因为它的类型内联但你可以在距离的jsfiddle分钟看到：https://jsfiddle.net/harrydry/p4ev1nj2/ 它只是眨眼就在身边。

这样做的原因是，我已经申请了一些一个id类型，从而使文本居中且字体改变等

不幸的是，这似乎已经毁了闪光灯的效果。

是任何人都知道如何获得这两个信号灯与JS的小提琴如图所示应用CSS样式的工作。

.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页面上的代码来获取输入光标闪烁正确

非常感谢任何帮助。当然，我会给予好评正确答案等享受一天哈利:)

来源

2016-09-19 Harry Dry

此代码对我的作品

.typed-cursor{ 
     opacity: 1; 
     font-weight: 100; 
     -webkit-animation: blink 0.7s infinite; 
     -moz-animation: blink 0.7s infinite; 
     -ms-animation: blink 0.7s infinite; 
     -o-animation: blink 0.7s infinite; 
     animation: blink 0.7s infinite; 
    }

来源

2017-08-20 10:38:22

我希望这将有助于。对我来说工作得很好。

.typed-cursor { 
    -webkit-animation: blinker 1s linear infinite; 
      animation: blinker 1s linear infinite; 
} 

@-webkit-keyframes blinker { 
    50% { 
     opacity: 0; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    } 
} 

@keyframes blinker { 
    50% { 
     opacity: 0; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    } 
}

来源

2017-09-19 04:19:16

我也试图解决这个问题，但我找到了类似的答案。希望这会起作用。

.your-class:after{ 
    visibility: visible; 
    content: ''; 
    background-color: #fff; 
    display: inline-block; 
    position: relative; 
    width: 2px; 
    height: 1em; 
    top: 5px; 
    margin-left: 3px; }

来源

2017-09-22 15:50:17 Sahan

这对我工作：

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

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

来源

2017-10-15 19:24:37

回答

相关问题