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

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

1. .UserBadge-32 {
   
2.     position: relative;
   
3.     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));
   
4.     background-size: 400%;
   
5.     padding: 30px 0px;
   
6.     animation: 15s ease 0s infinite normal none running bganimation;
   
7. }
   
8. 
   
9. @keyframes bganimation {
   
10. 0%{
    
11. background-position: 0% 50%;
    
12. }
    
13. 50%{
    
14. background-position: 100% 50%;
    
15. }
    
16. 100%{
    
17. background-position: 0% 50%;
    
18. }
    
19. }
    
20. #caired{border-radius: 10px;}
    
21. 
    
22. .UserBadge {
    
23.     display: inline-block;
    
24.     margin: 0 5px 10px 0;
    
25.     padding: 6px 12px;
    
26.     color: #998066;
    
27.     border: 2px solid #ffc64b;
    
28.     border-radius: 5px;
    
29.     transition: all 150ms ease-in-out;
    
30.     text-align: center;
    
31.     vertical-align: middle;
    
32.     cursor: pointer;
    
33.     white-space: nowrap;
    
34.     outline: none;
    
35.     -webkit-user-select: none;
    
36.     user-select: none;
    
37. }
    

复制代码

【小飞侠提醒您：搜索时输入t1655代号，方便好记直达本帖！】