给文章中的字实现打字机效果-记录

效果预览

技能拓展与情感释放的伊甸

教程开始

方案一：将以下css代码添加到自定义css中

.foxccs-print{
    width:1000px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: dy 5s steps(60, end) infinite;
    animation: dy 5s steps(50, end) infinite;
}
 
@-webkit-keyframes dy{
    from{
        width:0;
    }
}
@keyframes dy{
    from{
        width:0;
    }
}

接着在需要的地方引用这个样式即可

<p class="foxccs-print">技能拓展与情感释放的伊甸-有着心灵的智慧和温暖，如同山谷般包容和丰富。</p>

---

效果预览-短代码

技能拓展与情感释放的伊甸

方案二：采用短代码的方式

首先我们需要将以下代码放在functions文件中

function dzjj_typing_effect_shortcode($atts, $content = null) {
    // 定义短代码的CSS样式
    $style = "
    <style>
    .foxccs-print {
        width: 1000px;
        white-space: nowrap;
        overflow: hidden;
        -webkit-animation: dy 5s steps(60, end) infinite;
        animation: dy 5s steps(50, end) infinite;
    }
    @-webkit-keyframes dy {
        from {
            width: 0;
        }
    }
    @keyframes dy {
        from {
            width: 0;
        }
    }
    </style>
    ";

    // 返回样式和内容
    return $style . '<p class="foxccs-print">' . do_shortcode($content) . '</p>';
}

// 注册短代码 [dzjj]
add_shortcode('dzjj', 'dzjj_typing_effect_shortcode');

接着跟方案一、一样在需要的地方引用即可

[dzjj]技能拓展与情感释放的伊甸-有着心灵的智慧和温暖，如同山谷般包容和丰富。[/dzjj]

采用短代码的方式，相比较css样式引用起来比较方便、简洁。