效果图
首先去下载typed.js 引用这个js也可以直接使用CDN链接
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
下面代码举例，大家可以参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div class="div">
<span class="element"></span>
</div>
</body>
<script src="js/typed.js"></script>
<script>
var typed = new Typed('.element', {
strings: ["{ 画虎画皮难画骨，只会纸上谈兵却不懂脚踏实地编码的，不是好程序员}","{name='jiub'}","{age='23'}","{sex='man'}"],//输入内容, 支持html标签
typeSpeed: 80, //打字速度
backSpeed: 50, //回退速度
loop:true
});
</script>
</html>
我想将这个打字机的效果和”一言“的句子结合起来，但是我没有什么前端的基础，我不知道怎么在
strings: [‘我改变了光标的样子，变成了箭头 ➼！哈哈哈’]
这样的strings中添加一个变量，
我尝试
var x = ……..
strings: [x] 或者 strings: x
发现都是错误的，
我不知道该怎么办 🙁
搞好了，是我写法错误了 ❗
非常感谢，这个打字机效果非常棒 😉
很炫酷·