飞流 发表于 2026-5-10 08:58:00

CSS特效-蓝绿红三色波纹渐变效果

3388700000我之前拿来做卡片或者徽章当背景色用的，记录一下吧。

.UserBadge-32 {
    position: relative;
    background-image: -webkit-linear-gradient(45deg, rgb(44, 62, 80), rgb(39, 174, 96), rgb(41, 128, 185), rgb(231, 76, 60), rgb(142, 68, 173));
    background-size: 400%;
    padding: 30px 0px;
    animation: 15s ease 0s infinite normal none running bganimation;
}

@keyframes bganimation {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
#caired{border-radius: 10px;}

.UserBadge {
    display: inline-block;
    margin: 0 5px 10px 0;
    padding: 6px 12px;
    color: #998066;
    border: 2px solid #ffc64b;
    border-radius: 5px;
    transition: all 150ms ease-in-out;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}


54656 发表于 2026-5-11 01:15:03

墙都不服，就服你！

柒沐 发表于 2026-5-15 14:10:27

羡慕你这该死的才华！

尊 发表于 2026-5-16 02:08:32

好东西，学习一下！
页: [1]
查看完整版本: CSS特效-蓝绿红三色波纹渐变效果