【B2主题】首页打字效果区块

效果：

废话不多说，上代码：

<div id="home-row-kongjs" class=" mobile-hidden home_row home_row_8  module-html  "
style="background-color:;">
<div class="wrapper">
    <div class="home-row-left content-area ">
        <div id="html-box-kongjs" class="html-box">
            <style>
                .ceo-cat-switcher {
                    text-align: center;
                }

                .ceo-padding-remove {
                    padding: 0 !important;
                }

                .ceo-pages-vip body,
                ul,
                ol,
                li,
                dl,
                dd,
                p,
                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                form,
                fieldset,
                .pr,
                .pc {
                    margin: 0;
                    padding: 0;
                }

                .ceo-pages-vip ol,
                ul,
                li {
                    list-style: none;
                }

                h5,
                .ceo-h5 {
                    font-size: 16px;
                    line-height: 1.4;
                }

                .ceo-cat-switcher h5:before {
                    content: '';
                    width: 61px;
                    height: 10px;
                    position: absolute;
                    top: 10px;
                    left: 0;
                    background: url(/wp-content/themes/b2child/bander/souye_qu/img/ceo_hdicon3.png) center no-repeat;
                }

                .ceo-cat-switcher h5 {
                    font-size: 26px;
                    color: #333;
                    height: 32px;
                    line-height: 32px;
                    font-weight: 500;
                    margin: 20px 0 0 0;
                    padding: 0 80px;
                    position: relative;
                    display: inline-block;
                }

                .ceo-cat-switcher em {
                    display: block;
                    border-bottom: 1px solid #006eff;
                    width: 50px;
                    margin: 20px auto;
                }

                .ceo-cat-switcher h5:after {
                    content: '';
                    width: 61px;
                    height: 10px;
                    position: absolute;
                    top: 10px;
                    right: 0;
                    background: url(/wp-content/themes/b2child/bander/souye_qu/img/ceo_hdicon4.png) center no-repeat;
                }
            </style>
            <ul class="ceo-cat-switcher cat-switcher ceo-padding-remove" ceo-switcher="">
                <h5>
                    <div id="chakhsu">
                        <script>
                            var chakhsu = function (r) {
                                function t() {
                                    return b[Math.floor(Math.random() * b.length)]
                                }
                                function e() {
                                    return String.fromCharCode(94 * Math.random() + 33)
                                }
                                function n(r) {
                                    for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                                        var l = document.createElement("span");
                                        l.textContent = e(), l.style.color = t(), n.appendChild(l)
                                    }
                                    return n
                                }
                                function i() {
                                    var t = o[c.skillI];
                                    c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
                                }
                                /*以下内容自定义修改*/
                                var l = "每一次相聚，",
                                    o = ["都将是一场离别的盛宴",].map(function (r) {
                                        return r + ""
                                    }), a = 2, g = 1, s = 5, d = 75,
                                    b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
                                    c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g };
                                i()
                            };
                            chakhsu(document.getElementById('chakhsu'));
                        </script>
                        <div>

                </h5>
                <em></em>
            </ul>
        </div>
    </div>
</div>
</div>

记得图片路径修改为你自己的地址！