文字颜色的渐变(svg实现)

一 上下渐变(有底部阴影)

效果如图:

文字颜色的渐变(svg实现)_第1张图片

svg代码如下:

    
        
          
            {/* 渐变的颜色  */}
            
            
          

          
            {/* 底部阴影 */}
            
          

        

        
          渐变的文字测试
        
      

二 左右渐变

效果如图:

文字颜色的渐变(svg实现)_第2张图片

svg代码如下:

  

      
        

          
          
          
        

        
          
        
      


      
        渐变文字效果
      
    

三 斜向渐变(从左上到右下)

效果如图:

文字颜色的渐变(svg实现)_第3张图片

svg代码如下:

    

      
        
          
          
          
        

        
          
        
      


      
        斜向渐变文字
      
    

四 斜向渐变(从左下到右上)

效果如图:

文字颜色的渐变(svg实现)_第4张图片

svg代码如下:



      

        
          
          
          
        


        
          
        
      


      
        斜向渐变文字
      
    

五 实现渐变的动画效果

效果如图:

svg代码如下:



      

        
          
            
          
          
            
          
          
            
          


          
          
          
          
        


        
          

            
            
            
          
        
      


      
        动态效果文字

        
      
    

你可能感兴趣的:(CSS,前端,css,文字渐变)