效果展示
步骤
设置渐变,方向为-90度,水平线性渐变
background: linear-gradient(-90deg, #f17a4f, #e17394, #40a2c7, #18d0a4);
放大,然后后续移动background背景, 类似于放大照片,然后慢慢向右滑动
background-size: 300% 300%;
设置关键帧,x轴0-》100%-》0% y轴一直搁中间50%就行,无限循环
@keyframes gradientAnimation {
0% {
background-position: 0 0%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 0%;
}
}
应用动画,设置时长,速度曲线,循环次数
animation: gradientAnimation 2s ease infinite;
自己可以设置时间长一点