# 文字颜色渐变
<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>