效果图
首先去下载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
发现都是错误的,
我不知道该怎么办 🙁
搞好了,是我写法错误了 ❗
非常感谢,这个打字机效果非常棒 😉
很炫酷·