最近项目中需要一些简单的动画效果，就写了一个文字渐变的动画效果,纯CSS动画.文字加了一点阴影效果,看起来有发光哒感觉~

效果如下图
大家可以自己拷贝代码亲自试一试

代码看下面
html

<div class="son">			
	Particia
</div>

css

.son {
    color: #5BA6DF;
    text-shadow: 1px 1px 10px #5BA6DF;
    background-image: -webkit-linear-gradient(left, #2EC7C9, #E6D205 25%, #2EC7C9 50%,         #E6D205 75%, #2EC7C9 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    font-family:Chaparral Pro Light;
	letter-spacing:2px;
	font-size:56px;
  }
 
 
 @keyframes masked-animation {
            0% {
                background-position: 0 0;   
            }
            100% {
                background-position: -100% 0;
            }
        }