动态文字渐变特效，仅需2行代码即可实现！

调用官方设置好的CSS效果，实现2行代码调用！HTML代码（
标签可以删除或修改，看你自己需要）

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/wenzi.css">
<div class="wpon"><h2>动态文字渐变效果</h2></div>
<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/wenzi.css">
<div class="wpon"><h2>动态文字渐变效果</h2></div>
<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/wenzi.css">
<div class="wpon"><h2>动态文字渐变效果</h2></div>

自己手动设置CSS效果（可玩性高多了，推荐使用这个方法）HTML代码

<div class="wpon"><h2>动态文字渐变效果</h2></div>
<div class="wpon"><h2>动态文字渐变效果</h2></div>
<div class="wpon"><h2>动态文字渐变效果</h2></div>

css代码/自定义css颜色代码编号自行修改

.wpon{  font-size: 16px;  
background-image: -webkit-linear-gradient(90deg, #62ebbc, #08caf8 25%, #62ebbc 50%, #08caf8 75%, #62ebbc);  
-webkit-text-fill-color: transparent;  
-webkit-background-clip: text;  
background-size: 100% 600%;  
animation: wpon 6s cubic-bezier(0.4, 0, 1, 1) infinite;}@keyframes wpon
 {  0% {    background-position: 0 0;  }  100% {    background-position: 0 -300%;  
}
}
.wpon{  font-size: 16px;  
background-image: -webkit-linear-gradient(90deg, #62ebbc, #08caf8 25%, #62ebbc 50%, #08caf8 75%, #62ebbc);  
-webkit-text-fill-color: transparent;  
-webkit-background-clip: text;  
background-size: 100% 600%;  
animation: wpon 6s cubic-bezier(0.4, 0, 1, 1) infinite;}@keyframes wpon
 {  0% {    background-position: 0 0;  }  100% {    background-position: 0 -300%;  
}
}
.wpon{  font-size: 16px;  
background-image: -webkit-linear-gradient(90deg, #62ebbc, #08caf8 25%, #62ebbc 50%, #08caf8 75%, #62ebbc);  
-webkit-text-fill-color: transparent;  
-webkit-background-clip: text;  
background-size: 100% 600%;  
animation: wpon 6s cubic-bezier(0.4, 0, 1, 1) infinite;}@keyframes wpon
 {  0% {    background-position: 0 0;  }  100% {    background-position: 0 -300%;  
}
}

鼠标滑过效果CSS代码

.wpon:hover{  font-size: 16px;  
background-image: -webkit-linear-gradient(95deg, #ff63d0, #08caf8 25%, #ff63d0 50%, #08caf8 75%, #ff63d0);  
-webkit-text-fill-color: transparent; 
 -webkit-background-clip: text;  background-size: 100% 300%;  animation: wpon 5s ease-out infinite;}@keyframes wpon 
{  0% 
{    background-position: 0 0;  }  100% 
{    
background-position: 0 -300%;  
}
}
.wpon:hover{  font-size: 16px;  
background-image: -webkit-linear-gradient(95deg, #ff63d0, #08caf8 25%, #ff63d0 50%, #08caf8 75%, #ff63d0);  
-webkit-text-fill-color: transparent; 
 -webkit-background-clip: text;  background-size: 100% 300%;  animation: wpon 5s ease-out infinite;}@keyframes wpon 
{  0% 
{    background-position: 0 0;  }  100% 
{    
background-position: 0 -300%;  
}
}
.wpon:hover{  font-size: 16px;  
background-image: -webkit-linear-gradient(95deg, #ff63d0, #08caf8 25%, #ff63d0 50%, #08caf8 75%, #ff63d0);  
-webkit-text-fill-color: transparent; 
 -webkit-background-clip: text;  background-size: 100% 300%;  animation: wpon 5s ease-out infinite;}@keyframes wpon 
{  0% 
{    background-position: 0 0;  }  100% 
{    
background-position: 0 -300%;  
}
}