|
3 | 3 | html { |
4 | 4 | font-size: 10px; |
5 | 5 | background: #2980b9; /* fallback for old browsers */ |
6 | | - background: -webkit-linear-gradient(to right, #2c3e50, #2980b9); /* Chrome 10-25, Safari 5.1-6 */ |
7 | | - background: linear-gradient( |
8 | | - to right, |
9 | | - #2c3e50, |
10 | | - #2980b9 |
11 | | - ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
| 6 | + background: linear-gradient(300deg, deepskyblue, darkviolet, blue); |
| 7 | + background-size: 180% 180%; |
| 8 | + animation: gradient-animation 18s ease infinite; |
12 | 9 | } |
13 | 10 |
|
14 | 11 | body, |
@@ -111,3 +108,9 @@ input[type='button'] { |
111 | 108 | background: rgba(0, 0, 0, 0.4); |
112 | 109 | text-shadow: 0 0 5px black; |
113 | 110 | } |
| 111 | + |
| 112 | +@keyframes gradient-animation { |
| 113 | + 0% { background-position: 0% 50%; } |
| 114 | + 50% { background-position: 100% 50%; } |
| 115 | + 100% { background-position: 0% 50%; } |
| 116 | +} |
0 commit comments