css字体自动改变颜色 |网页css3 文字样式

/*定义变换时间和起始颜色*/
h1{
color: blue;
transition: color 2s;
}
/*鼠标放上时，改变颜色*/
h1:hover{
color: red;
}
/*经过一定时间后自动改变颜色*/
@keyframes colorChange{
0%{color: blue;}
50%{color: red;}
100%{color: blue;}
}
span{
animation: colorChange 3s infinite;
}
/*滚动鼠标时改变颜色*/
p{
color: black;
transition: color 2s;
}
p:hover{
color: purple;
}
body{
font-size: 20px;
overflow: hidden;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-thumb{
border-radius: 20px;
background: pink;
}
::-webkit-scrollbar-track{
background: gray;
}
/*鼠标滚轮滚动时，改变颜色*/
::-webkit-scrollbar-thumb:hover{
background: gold;
}

通过上面的代码，大家可以实现以下三种字体自动改变颜色的效果：

• 鼠标放上时，改变颜色：当鼠标指针悬停在h1标签上时，字体会自动从蓝色变成红色。
• 经过一定时间后自动改变颜色：在span标签内定义了一个动画，一开始字体颜色是蓝色，然后在2秒后变成红色，再过3秒后变回蓝色，如此循环。
• 滚动鼠标时改变颜色：当鼠标指针悬停在p标签上时，字体会自动从黑色变成紫色，当鼠标滚轮滚动时，可以尝试将滚动条拉动，字体颜色也会自动跟随改变。

通过这些效果，大家可以让页面更加丰富多彩，为用户带来更好的体验。