Background Color Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Background Color Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; } ul li { list-style: none; width: 10%; height: 100%; background: transparent; box-shadow: 5px 0 5px rgba(0,0,0,0.2); animation: animate infinite linear 5s; } @keyframes animate { 0% { background: rgb(255, 0, 47); } 20% { background: rgb(255, 204, 0); } 40% { background: rgb(89, 255, 0); } 60% { background: rgb(0, 187, 255); } 80% { background: rgb(25, 0, 255); } 100% { background: rgb(255, 0, 238); } } ul li:nth-child(1) { animation-delay: 0.2s; z-index: 10; } ul li:nth-child(2) { animation-delay: 0.4s; z-index: 10; } ul li:nth-child(3) { animation-delay: 0.6s; z-index: 10; } ul li:nth-child(4) { animation-delay: 0.8s; z-index: 10; } ul li:nth-child(5) { animation-delay: 1s; z-index: 10; } ul li:nth-child(6) { animation-delay: 1.2s; z-index: 10; } ul li:nth-child(7) { animation-delay: 1.4s; z-index: 10; } ul li:nth-child(8) { animation-delay: 1.6s; z-index: 10; } ul li:nth-child(9) { animation-delay: 1.8s; z-index: 10; } ul li:nth-child(10) { animation-delay: 2s; z-index: 10; }
