效果预览
技能拓展与情感释放的伊甸
教程开始
方案一:将以下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>
效果预览-短代码
[dzj]技能拓展与情感释放的伊甸[/dzj]
方案二:采用短代码的方式
首先我们需要将以下代码放在functions文件中
![图片[1]-给文章中的字实现打字机效果-记录](https://joyb.cc/wp-content/uploads/2024/08/20240821010625117-2024-08-21-00_40_53-1Panel-和另外-6-个页面-个人-Microsoft-Edge.jpg)
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样式引用起来比较方便、简洁。
© 版权声明
文章法典(文章版权声明)
- ◆ 领地名称:开心宝要塞(开心宝)
- ◆ 永久坐标:https://joyb.cc
- ◆ 部分知识来自冒险者笔记,仅供修习参考(本站文章部分内容来源于网络,仅供学习参考,如有侵权请联系站长删除)
- ◆ 资源配方不构成建造建议(本站资源不构成任何投资建议,仅代表个人观点)
- ◆ 发现危险物品请立即通知卫兵(严禁发布违法信息,访客发现请立即举报)
- ◆ 失效传送门请告知管理员更新(资源链接失效请联系我们,我们会及时更新)
THE END