css3渐变色动画代码

CSS3渐变色动画代码

/*定义元素样式*/.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(to right, #c41f1f, #f77c23);
}
/* 定义动画 */@keyframes color-change{
0%{
    background: linear-gradient(to right, #c41f1f, #f77c23);
}
50%{
    background: linear-gradient(to right, #f77c23, #faee1c);
}
100%{
    background: linear-gradient(to right, #faee1c, #1cf7af);
}
}
/* 应用动画 */.box:hover{
    animation: color-change 3s linear infinite;
}
    

解释：

这段代码定义了一个宽高均为200px的元素，并将其背景色设置为从红色到橙色的渐变。接着定义了一个名为color-change的动画，分为三个阶段，分别将背景色从红色到橙色，橙色到黄色，最后到达绿色。

当鼠标悬停在元素上时，应用color-change动画，动画时长为3秒，速度为线性，无限循环。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！