文字渐变(wzjb)
预览特效特效代码(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 改为你想要的时间