优化打字机实现模糊和文字渐变的效果

最后更新于: 2025-12-06 10:36:40

优化打字机实现模糊和文字渐变的效果

2025年1月5日已解决。

次功能由《Hydoc的小站》前端大佬贡献，感谢大佬。💖💖

环境

自己开源的《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

预览

PixPin_2025-01-05_09-48-17

配置

修改docs\.vuepress\components\IndexBigImg.vue文件：

注释源内容，并添加如下内容：

 1/* 描述淡入淡出元素 */
 2.description {
 3	 display: inline-block;
 4	 background-color: #fff6;
 5	 -webkit-backdrop-filter: blur(4px);
 6	 backdrop-filter: blur(4px);
 7	 padding: .5em;
 8	 border-radius: .5em;
 9}
10
11.description span {
12	 letter-spacing: .1em;
13	 background: linear-gradient(90deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
14	 -webkit-background-clip: text;
15	 background-clip: text;
16	 color: transparent;
17	 font-weight: 700;
18	 font-size: 1.5rem
19}