Det bör vara nära toppen av dokumentet. Skriv in följande i utrymmet under "body {" konsolen och ovanför den avslutande konsolen: -webkit-animering: colorchange 60s oändliga; animation: colorchange 60s oändliga; Den översta raden av text är för krombaserade webbläsare medan den nedre raden av text är för andra webbläsare. Nu kommer du att använda @keyframes regel för att ställa in bakgrundsfärger genom vilka du ska cykla, liksom längden på tiden varje färg kommer att visas på sidan. Återigen behöver du separata poster för de olika uppsättningarna av webbläsare. Skriv in följande rader med kod under det stängda "kroppsfästet": @-webkit-keyframes colorchange { 0% {bakgrund: #33FFF3;} 25% {bakgrund: #78281F;} 50% {bakgrund: #17A65;} 75% {bakgrund: #DC7633;} 100% {bakgrund: #9B59B6;} } @keyframes colorchange { 0% {bakgrund: #33FFF3;} 25% {bakgrund: #78281F;} 50% {bakgrund: #17A65;} 75% {bakgrund: #DC7633;} 100% {bakgrund: #9B59B6;} } Observera att de två reglerna (@-webkit-keyframes och @keyframes har samma bakgrund och procentsatser. Du vill att dessa ska förbli uniform så upplevelsen är densamma på alla webbläsare. Procenttalen (0 %, 25 %, etc.) är av den totala animeringslängden (60). När sidan laddas, kommer bakgrunden att vara färgen som är inställd på 0% (#33FFF3). När animeringen har spelat i 25% av 60 sekunder, kommer bakgrunden att vända sig till #7821F, och så vidare. Du kan ändra tider och färger för att passa ditt önskade resultat. Hela koden för den föränderliga bakgrundsfärgen bör likna följande: <!DOCTYPE html> <html> <head> <style> body {-webkit-animation: colorchange 60s oändlig; animation: colorchange 60s oändlig; } @-webkit-keyframes colorchange { 0% {bakgrund: #33FFF3;} 25% {bakgrund: #78281F;} 50% {bakgrund: #17A65;} 75% {bakgrund: #DC7633;} 100% {bakgrund: #9B59B6;} } @keyframes colorchange { 0% {bakgrund: #33FFF3;} 25% {bakgrund: #78281F;} 50% {bakgrund: #117A65;} 75% {bakgrund: #DC7633;} 100% {bakgrund: #9B59B6;} </ stil> </huvud> <body> </kropp> </html> </html>
Hitta dokumentets "html"-huvud. Lägg till animeringsegenskaperna till "kroppselementet". Lägg till dina färger till animeringen. Gå igenom din kod.