javascript - 集成css/js打字机效果，jsfiddle

Question

我正在尝试整合 This打字机效果。

我已尝试在此处进行设置 https://jsfiddle.net/74cq52az/

但是没有运气，任何人都可以看一下并给我提示哪里出了问题吗？

我按照说明中包含的步骤进行操作。

HTML

<script src="www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js"></script>
<strong id="typist-element" data-typist="sut,min,dut">great</strong>

CSS

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

@-webkit-keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

#typist-element {
&:after {
content: " ";
display: inline-block;
height: 47px;
position: relative;
top: 10px;
margin-left: 3px;
margin-right: 7px;
width: 4px;
background: #06a44d;
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
}
}

.selectedText {

}

Javascript

(function () {
var typist;
typist = document.querySelector('#typist-element');
new Typist(typist, {
    letterInterval: 60,
    textInterval: 3000.
});
}.call(this));

Answer 1

您的脚本 src 缺少 https 协议(protocol):

将您的脚本标记更改为:

<script src="https://www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js"></script>

如果您查看控制台，您会看到以下错误:

Mixed Content: The page at 'https://jsfiddle.net/74cq52az' was loaded over HTTPS, but requested an insecure script 'http://www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js'. This request has been blocked; the content must be served over HTTPS.