按下回车键跳到正文

[CSS3]文字颜色渐变动画

使用Chrome测试, 其他前缀需要的自己补一下~
效果如下:
 

LzSkyline.com

<style>

@-webkit-keyframes hue {
 from {
  -webkit-filter: hue-rotate(0deg);
 }
 to {
  -webkit-filter: hue-rotate(-360deg);
 }
}

.animation {
 font-family: "黑体";
 color: #f35626; /* 文字颜色 */
 background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); /* 渐变背景色 */
 -webkit-background-clip: text; /* 背景填充类型: 填充文字区域 */
 -webkit-text-fill-color: transparent; /* 文字颜色填充为透明色 */
 -webkit-animation: hue 10s infinite linear; /* 使用hue作为动画效果, 周期10s, 无限循环, 速度为线性 */
}

</style>

From LzSkyline's Blog : https://www.lzskyline.com/archives/274

当前没有任何回复哦,快成为第一个吃螃蟹的人~

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注