# 文字颜色渐变

<div class="part">
	<section>总调用次数: <span>100956</span></section>
	<section>命中次数: <span>933456</span></section>
	<section>命中率: <span>93.45%</span></section>
</div>
<style>
.part{
    display: flex
}
 .part section{
    flex:1;
    height: 100px;
    margin-right:10px;
    text-align:center;
    line-height:100px;
    font-size:24px;
    color:#5B9CF4
}
.part section span{
    font-size:20px;
    background-image: -webkit-linear-gradient
	(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%,
	 #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%; 
    -webkit-animation: masked-animation 4s linear infinite;
    
}

@keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
}
</style>
总调用次数: 100956
命中次数: 933456
命中率: 93.45%
最后更新: 1/16/2020, 11:53:47 AM