顶部多功能组件 绿色渐变色 加打字效果 

效果图

代码

<!--渐变色CSS!-->
<link rel="preload stylesheet" href="/wp-content/themes/zibll/css/st666.css" as="style">
<div id="nav">
	<div id="site-title">
		<span class="blogtitle"></span>
		<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
		<script>
			// 创建 Typed 实例
			            var typed = new Typed(".blogtitle", {
			                // 字符串数组
			                strings: [      '<h2 class="tagline" data-v-8f6e9de2="" _msttexthash="1935843" _msthash="24"><span class="accent" data-v-8f6e9de2="">zibll主题</span></h2>', '<h2 class="tagline" data-v-8f6e9de2="" _msttexthash="1935843" _msthash="24"><span class="accent" data-v-8f6e9de2="">Zibll Theme</span></h2>'],
			                // 延迟开始时间
			                startDelay: 100,
			                // 字符显示速度
			                typeSpeed: 100,
			                // 是否循环显示
			                loop: true,
			                // 回退速度
			                backSpeed: 80,
			                // 是否显示光标
			                showCursor: false,
			
			             
			            });
		</script>
	</div>
</div>

<br>
<div id="nav2">
	<div id="site-title2">
		<span class="blogtitle2"></span>
		<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
		<script>
			// 创建 Typed 实例
			            var typed2 = new Typed(".blogtitle2", {
			                // 字符串数组
			                strings: [ '<h3> <span class="accent" data-v-8f6e9de2="">这个应用程序是在WordPress博客软件基础上开发的。</span></h3>', '<h3> <span class="accent" data-v-8f6e9de2="">The application is based on the WordPress blogging software</span></h3>'],
			                // 延迟开始时间
			                startDelay: 100,
			                // 字符显示速度
			                typeSpeed: 25,
			                // 是否循环显示
			                loop: true,
			                // 回退速度
			                backSpeed: 20,
			                // 是否显示光标
			                showCursor: false,
			            });
		</script>
	</div>
</div>

<div class="header-slider-search-more text-center before">
    <div id="nav3">
        <div id="site-title3">
            <span class="blogtitle3"></span>
            <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
            <script>
                // 创建 Typed 实例
                var typed3 = new Typed(".blogtitle3", {
                    // 字符串数组
                    strings: ['<span class="accent" data-v-8f6e9de2="">666666</span>', '<span class="accent" data-v-8f6e9de2="">9999999</span>'],
                    // 延迟开始时间
                    startDelay: 100,
                    // 字符显示速度
                    typeSpeed: 50,
                    // 是否循环显示
                    loop: true,
                    // 回退速度
                    backSpeed: 30,
                    // 是否显示光标
                    showCursor: true,
                });
            </script>
        </div>
    </div>
</div>

新建一个css 文件

@font-face {
    font-family: Quotes;
    src: local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");
    unicode-range: U+2018,U+2019,U+201C,U+201D
}
.tagline[data-v-8f6e9de2] {
    font-size: 76px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -1.5px;
    max-width: 960px;
    margin: 0 auto
}
html:not(.dark) .accent[data-v-8f6e9de2],.dark .tagline[data-v-8f6e9de2] {
    background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}


[lang|=en] {
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
}

代码可能不规范 是爬的 修改了一下

参考

https://cn.vuejs.org/

的 渐进式 这个字

颜色就是这样 加了的打字效果 罢了

控制颜色的应该是

background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);

如果需要补充标题可以看代码在加

一个Typed 实例 可以好多个  比如

<!--渐变色CSS!-->
<link rel="preload stylesheet" href="/wp-content/themes/zibll/css/st666.css" as="style">
<div id="nav">
	<div id="site-title">
		<span class="blogtitle"></span>
		<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
		<script>
			// 创建 Typed 实例
			            var typed = new Typed(".blogtitle", {
			                // 字符串数组
			                    strings: ['<span class="accent" data-v-8f6e9de2="">zibll</span>', '<span class="accent" data-v-8f6e9de2="">主题.</span>', '<span class="accent" data-v-8f6e9de2="">WordPress</span>', '<span class="accent" data-v-8f6e9de2="">WordPress</span> '],
			                // 延迟开始时间
			                startDelay: 100,
			                // 字符显示速度
			                typeSpeed: 100,
			                // 是否循环显示
			                loop: true,
			                // 回退速度
			                backSpeed: 80,
			                // 是否显示光标
			                showCursor: false,
			
			             
			            });
		</script>
	</div>
</div>