镂空字和渐变字

渐变字动画实现：

背景渐变 ->

背景绘制区域截取文字 ->

设置文字填充透明 ->

添加背景位置移动动画

.grad {
     background-image:-webkit-linear-gradient(bottom,#00eaff, #0061a6, #00eaff);//设置三个以上颜色有动画效果
     background-size:200% 200%;
     -webkit-background-clip: text;//指定背景的绘制区域为文字，截取文字
     -webkit-text-fill-color: transparent;//优先级高于color,也可直接设置color       
     -webkit-animation-name:grad-animation;
     -webkit-animation-duration:5s;
     -webkit-animation-iteration-count:infinite;
     -webkit-animation-timing-function:linear;
}

@-webkit-keyframes grad-animation {
     0% {background-position:0 0;}
     100% {background-position:100% 100%;}
}

 

镂空字实现：

利用text-stroke属性

.stroke {
     -webkit-text-fill-color:transparent;
     -webkit-text-stroke:1px #000;//文本描边
}