分享三个不错的css动态渐变背景

第一个

1. body:before {
   
2.     content: "";
   
3.     position: fixed;
   
4.     top: 0;
   
5.     left: 0;
   
6.     right: 0;
   
7.     bottom: 0;
   
8.     z-index: -520;
   
9.     pointer-events: none
   
10. }
    
11. 
    
12. body:before {
    
13.     background: linear-gradient(90deg,#f795331a,#f370551a 15%,#ef4e7b1a 30%,#a166ab1a,#5073b81a,#1098ad1a,#07b39b1a 86%,#6dba821a)
    
14. }

复制代码

第二个

1. body {
   
2.   margin: 0;
   
3.   min-height: 100vh;
   
4.   background-color: #e493d0;
   
5.   background-image:
   
6.     radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
   
7.     radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
   
8.     radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
   
9.     radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
   
10.     radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
    
11.   background-size:
    
12.     130vmax 130vmax,
    
13.     80vmax 80vmax,
    
14.     90vmax 90vmax,
    
15.     110vmax 110vmax,
    
16.     90vmax 90vmax;
    
17.   background-position:
    
18.     -80vmax -80vmax,
    
19.     60vmax -30vmax,
    
20.     10vmax 10vmax,
    
21.     -30vmax -10vmax,
    
22.     50vmax 50vmax;
    
23.   background-repeat: no-repeat;
    
24.   animation: 10s movement linear infinite;
    
25. }
    
26. 
    
27. @keyframes movement {
    
28.   0%, 100% {
    
29.     background-size:
    
30.       130vmax 130vmax,
    
31.       80vmax 80vmax,
    
32.       90vmax 90vmax,
    
33.       110vmax 110vmax,
    
34.       90vmax 90vmax;
    
35.     background-position:
    
36.       -80vmax -80vmax,
    
37.       60vmax -30vmax,
    
38.       10vmax 10vmax,
    
39.       -30vmax -10vmax,
    
40.       50vmax 50vmax;
    
41.   }
    
42.   25% {
    
43.     background-size:
    
44.       100vmax 100vmax,
    
45.       90vmax 90vmax,
    
46.       100vmax 100vmax,
    
47.       90vmax 90vmax,
    
48.       60vmax 60vmax;
    
49.     background-position:
    
50.       -60vmax -90vmax,
    
51.       50vmax -40vmax,
    
52.       0vmax -20vmax,
    
53.       -40vmax -20vmax,
    
54.       40vmax 60vmax;
    
55.   }
    
56.   50% {
    
57.     background-size:
    
58.       80vmax 80vmax,
    
59.       110vmax 110vmax,
    
60.       80vmax 80vmax,
    
61.       60vmax 60vmax,
    
62.       80vmax 80vmax;
    
63.     background-position:
    
64.       -50vmax -70vmax,
    
65.       40vmax -30vmax,
    
66.       10vmax 0vmax,
    
67.       20vmax 10vmax,
    
68.       30vmax 70vmax;
    
69.   }
    
70.   75% {
    
71.     background-size:
    
72.       90vmax 90vmax,
    
73.       90vmax 90vmax,
    
74.       100vmax 100vmax,
    
75.       90vmax 90vmax,
    
76.       70vmax 70vmax;
    
77.     background-position:
    
78.       -50vmax -40vmax,
    
79.       50vmax -30vmax,
    
80.       20vmax 0vmax,
    
81.       -10vmax 10vmax,
    
82.       40vmax 60vmax;
    
83.   }
    
84. }

复制代码

第三个

1. * {
   
2.   box-sizing: border-box;
   
3.   margin: 0;
   
4.   padding: 0;
   
5. }
   
6. body {
   
7.   overflow:scroll;
   
8.   overflow-x:hidden;
   
9.   width: 100vw;
   
10.   height: 100vh;
    
11.   background: linear-gradient(
    
12.           135deg,
    
13.           hsl(170deg, 80%, 70%),
    
14.           hsl(190deg, 80%, 70%),
    
15.           hsl(250deg, 80%, 70%),
    
16.           hsl(320deg, 80%, 70%)
    
17.   );
    
18.   background-size: 200% 200%;
    
19.   animation: gradient-move 15s ease alternate infinite;
    
20. }
    
21. 
    
22. @keyframes gradient-move {
    
23.   0% {
    
24.     background-position: 0% 0%;
    
25.   }
    
26.   100% {
    
27.     background-position: 100% 100%;
    
28.   }
    
29. }

复制代码