js实现打字机效果非常酷炫

久伴
久伴
久伴
642
文章
534
评论
2020年3月16日06:56:42 3 249 902字阅读3分0秒

效果图

js实现打字机效果非常酷炫 首先去下载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>

效果演示

点我查看演示

更多案例请点击我

继续阅读
久伴
破解那些无法复制的网站无限复制内容 JavaScript

破解那些无法复制的网站无限复制内容

例如360图书馆是不能复制的,复制必须登录,有的时候为一个知识点去注册实在繁琐 把下方代码加到浏览器console控制台,然后你去网站复制内容就会发现,不在提示登录复制等等一些限制 $=0 如果是新手...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:3   其中:访客  2   博主  1
    • 此店不售此书 此店不售此书 1

      我想将这个打字机的效果和”一言“的句子结合起来,但是我没有什么前端的基础,我不知道怎么在 strings: [‘我改变了光标的样子,变成了箭头 ➼!哈哈哈’] 这样的strings中添加一个变量, 我尝试 var x = …….. strings: [x] 或者 strings: x 发现都是错误的, 我不知道该怎么办 :sad: