gradiente3.html

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

Proinf.net