gradiente2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Gradiente 2</title>
  5. body {
  6. text-align: center;
  7. }
  8. </style>
  9. let porCiento = 0;
  10.  
  11. function iniciar() {
  12. const milisegundos = 100;
  13. setInterval(colorear, milisegundos);
  14. }
  15. function colorear() {
  16. document.body.style.backgroundImage =
  17. `linear-gradient(
  18. to right, transparent,
  19. blue ${porCiento}%,
  20. transparent)`;
  21. porCiento++;
  22. }
  23. </script>
  24. </head>
  25. <body onload="iniciar()">
  26. <h1>Gradiente 2</h1>
  27. <p>
  28. <a href="https://www.w3schools.com/css/css3_gradients.asp">w3schools</a>
  29. </p>
  30. </body>
  31. </html>

Proinf.net