网站特效中心 - 文字渐变
https://webeffect.muanxue.cn/tag/%E6%96%87%E5%AD%97%E6%B8%90%E5%8F%98/
-
文字渐变(wzjb)
https://webeffect.muanxue.cn/archives/58/
2024-06-09T13:54:00+08:00
预览特效特效代码(CSS) .text {
position: relative;
display: inline-block;
color: transparent;
background: linear-gradient(150deg,
#08dfb4,
#e6d205 20%,
#2cc4e0 40%,
#8b2ce0 60%,
#ff6384 80%,
#08dfb4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 100%;
animation: flowCss 12s infinite linear;
}
@keyframes flowCss {
0% {
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.text:hover {
animation: flowCss 5s infinite linear;
}调用教程调用本地(推荐)将css代码保存在你的整体css文件里，也可以直接放在前端(这里演示的是直接放在前端)然后将以下代码放在你需要的地方<style>
.text {
position: relative;
display: inline-block;
color: transparent;
background: linear-gradient(150deg,
#08dfb4,
#e6d205 20%,
#2cc4e0 40%,
#8b2ce0 60%,
#ff6384 80%,
#08dfb4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 100%;
animation: flowCss 12s infinite linear;
}
@keyframes flowCss {
0% {
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.text:hover {
animation: flowCss 5s infinite linear;
}
</style>
<h2 class="text">Web因你而不同，让我们为你的Web锦上添花！</h2>调用云端(不推荐)代码较短，暂时不提供可修改内容渐变颜色：修改7至12行的颜色代码渐变内容：在部署代码中可以将 Web因你而不同，让我们为你的Web锦上添花！ 改为自己喜欢的内容。渐变循环时间：将在css代码17行中的12 改为你想要的时间鼠标选择循环时间：将在css代码31行中的5 改为你想要的时间