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

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

您需要登录才可以下载或查看，没有账号？立即注册

×

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

.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

好东西，学习一下！

	爱是难逃：	07-23 18:52
	飞流：这论坛到底有没有资本给我投资一下啊！	07-20 22:07
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] CSS特效-蓝绿红三色波纹渐变效果