Question

我想复制此网站的输入和删除效果：http://www.cantercompanies.com。

我一直在尝试使用代码块，HTML，CSS和JS来解决这个问题。但是，经过数小时和数天的尝试，我似乎无法使它正常工作。

显然，这是我的目标，因为我对编码还很陌生。

我真的希望光标闪烁具有这种精确的键入和删除效果。我当然会使用自己的徽标和固定文字，但需要一些指导和帮助，以在提供的链接中复制上述Canter的示例……：-）

Answer 1

您不需要任何库，

HTML

  <div class="flex">
    <p class="header-sub-title" id="word"></p><p class="header-sub-title blink">|</p>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto';
html, body {
    background-color: #000;
}
h2, a, p {
    color: #fff;
    font-family: Roboto;
    text-decoration: none;
}
p>a {
    color: #fd084a;
}
.blink {
  animation: blink 0.5s infinite;
}
@keyframes blink{
  to { opacity: .0; }
}
.flex {
    display: flex;
}
.header-sub-title {
  color: #fff;
  font-family: "Courier";
  font-size: 20px;
  padding: 0.1em;
}

JS

const words = ["CSS3.", "HTML5.", "javascript."];
let i = 0;
let timer;

function typingEffect() {
    let word = words[i].split("");
    var loopTyping = function() {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift();
        } else {
            deletingEffect();
            return false;
        };
        timer = setTimeout(loopTyping, 500);
    };
    loopTyping();
};

function deletingEffect() {
    let word = words[i].split("");
    var loopDeleting = function() {
        if (word.length > 0) {
            word.pop();
            document.getElementById('word').innerHTML = word.join("");
        } else {
            if (words.length > (i + 1)) {
                i++;
            } else {
                i = 0;
            };
            typingEffect();
            return false;
        };
        timer = setTimeout(loopDeleting, 200);
    };
    loopDeleting();
};

typingEffect();

参考：https://codepen.io/haaswill/pen/VKzXvZ

如何实现这种键入和删除效果？

1 个答案: