子比主题美化 – 逐字显示公告模块

heardic

1个月前更新

112813

子比主题美化 – 逐字显示公告模块

此内容为付费阅读，请付费后查看

￥3.88

立即购买

您当前未登录！建议登陆后购买，可保存购买订单

本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作！

付费阅读

已售 25

效果预览

部署教程

JS

CSS

HTML

/*自定义公告栏 */
<script>
var typed = new Typed("#index-xtips", {
strings: ["公告：超强美化子主题，美化强势动力来自热爱，巨强大，新维度！","公告：按照用户要求，本站已取消频繁的通知提示","公告：根据用户建议已加入软件历史版本，其他功能在计划中..."],
startDelay: 100,
backDelay: 5000,
typeSpeed: 60,
loop: true,
backSpeed: 10,
})
</script>

如果只有图标没有文字，需要在后台-主题设置-自定义代码-底部HTML添加：

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

/*自定义公告栏 */
.file-format {
    padding: 0 20px;
    height: 38px;
    background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
span.txt-file-format {
    font-size: 13px;
    font-weight: 700;
    color: unset;
    line-height: 18px;
    margin-right: 17px;
}
.typed-cursor.typed-cursor--blink {
    animation: typedjsBlink 0.7s infinite;
    -webkit-animation: typedjsBlink 0.7s infinite;
    animation: typedjsBlink 0.7s infinite;
}
i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c], i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c], i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
    width: 26px;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
}
i.icon_sketch[data-v-2775696c] {
    width: 26px;
    height: 26px;
    display: inline-block;
    background: url(https://zy.nuoyo.cn/images/ai/icon-sketch.svg) no-repeat 50% / 100%;
    vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-ps.svg) no-repeat 50% / 100%;
}
i.icon_ai[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-ai.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-3dMax.svg) no-repeat 50% / 100%;
}
i.icon_cdr[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-cdr.svg) no-repeat 50% / 100%;
}
i.icon_c4d[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-c4d.svg) no-repeat 50% / 100%;
}
i.icon_blender[data-v-2775696c] {
    background: url(https://zy.nuoyo.cn/images/ai/icon-blender.svg) no-repeat 50% / 100%;
}

/*自定义公告栏 */
<div class="tuc-2ea177b2-926b06-0 file-format tuc-2ea177b2-926b06-0" data-v-2775696c="">
<span id="index-xtips" class="tuc-2ea177b2-926b06-0 txt-file-format tuc-2ea177b2-926b06-0" data-v-2775696c=""></span>
<span class="tuc-2ea177b2-926b06-0 typed-cursor typed-cursor--blink tuc-2ea177b2-926b06-0" aria-hidden="true"></span> 
<span class="tuc-2ea177b2-926b06-0 file-format-icons tuc-2ea177b2-926b06-0" data-v-2775696c="">
<i class="tuc-2ea177b2-926b06-0 icon_ps tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_ai tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_sketch tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_3dMax tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_cdr tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_c4d tuc-2ea177b2-926b06-0" data-v-2775696c=""></i> 
<i class="tuc-2ea177b2-926b06-0 icon_blender tuc-2ea177b2-926b06-0" data-v-2775696c=""></i>
</span>
</div>