Typed.js动画闪烁光标不起作用

时间:2016-09-19 23:02:53

标签: javascript jquery css typed.js

所以我试图在typed.js上使用blinker游标,这是一个很棒的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页面上的代码,用于使键入的游标正确闪烁

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

4 个答案:

答案 0 :(得分:7)

这对我有用:

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

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

答案 1 :(得分:0)

此代码适用于我

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

答案 2 :(得分:0)

我希望这会有所帮助。对我来说很好。

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

答案 3 :(得分:0)

我也试图解决这个问题,但我找到了类似的答案。希望这会奏效。

SET SERVEROUTPUT ON;
DECLARE
TYPE cur1
IS
  REF
  CURSOR;
    c1 cur1;
    variable1 VARCHAR2(10) := 'true';
  TYPE emprec_t
IS
  TABLE OF emp%ROWTYPE;
TYPE student_t
IS
  TABLE OF student%ROWTYPE;
  emp_rec emprec_t;
  stu_rec student_t;
BEGIN
  IF (variable1 = 'true') THEN
    OPEN c1 FOR 'SELECT * FROM STUDENT';
    FETCH c1 BULK COLLECT INTO stu_rec;
  FOR i IN stu_rec.FIRST..stu_rec.LAST
  LOOP
    DBMS_OUTPUT.PUT_LINE(stu_rec(i).STUDENT_ID);
  END LOOP;
ELSE
  OPEN c1 FOR 'SELECT * FROM  EMP';
  FETCH c1 BULK COLLECT INTO emp_rec;
  FOR i IN emp_rec.FIRST..emp_rec.LAST
  LOOP
    DBMS_OUTPUT.PUT_LINE(emp_rec(i).EMPLOYEE_ID);
  END LOOP;
END IF ;
END;
/