css3 渐变动画小代码

CSS3渐变动画是一种非常流行的动画效果，它可以使网页更加生动和吸引人。下面提供一些小代码，帮助你实现自己心仪的渐变动画。

/* 线性渐变动画 */.gradient {
    background: linear-gradient(to right, #ff7f50, #ffd700, #6b8e23);
    background-size: 600% 100%;
    animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}

上面代码实现了一种线性渐变动画，它的渐变颜色分别是 #ff7f50， #ffd700 和 #6b8e23，这三种颜色按照从左到右的顺序均匀排列。 background-size 属性设置了渐变动画的宽度为 600%，也就是说，颜色会依次往左移动直到充满整个屏幕。最后，animation 属性指定了动画名称和持续时间，并将其循环播放。

/* 径向渐变动画 */.gradient {
    background: radial-gradient(#ff0000, #0000ff);
    background-size: 100% 100%;
    animation: gradient 3s ease-in-out infinite;
}
@keyframes gradient {
0% {
    background-size: 100% 100%;
}
50% {
    background-size: 150% 150%;
}
100% {
    background-size: 100% 100%;
}
}
    

如果你想实现一种径向渐变动画，可以尝试上面的代码。这个例子里面，渐变颜色是 #ff0000 和 #0000ff。 background-size 属性设置了动画的大小，从100%开始，到150%，最终退回到100%。 animation 属性设置动画名称和持续时间，并将其循环播放。

小型的CSS3渐变动画代码可以为网页增加不少色彩和趣味性。想要实现更为复杂的渐变效果，你可以多做一些实践，了解更多关于CSS3渐变属性的用法。

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