效果预览
技能拓展与情感释放的伊甸
教程开始
方案一:将以下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样式引用起来比较方便、简洁。
© 版权声明
THE END