redondo2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Redondo 2</title>
  5. body {
  6. background-color: black;
  7. color: white;
  8. text-align: center;
  9. }
  10. #cristal {
  11. position:fixed;
  12. top:0;
  13. left:0;
  14. width:100%;
  15. height:100%;
  16. z-index:1;
  17. }
  18. </style>
  19.  
  20. let cristal;
  21.  
  22. document.addEventListener('DOMContentLoaded', iniciar);
  23.  
  24. function iniciar() {
  25. cristal = document.getElementById('cristal');
  26. cristal.addEventListener('mousemove', moverRaton);
  27. cristal.style.backgroundImage = 'radial-gradient(black, black)';
  28. }
  29.  
  30. function moverRaton(event) {
  31. const x = Math.round(event.clientX / window.innerWidth * 100);
  32. const y = Math.round(event.clientY / window.innerHeight * 100);
  33. document.title = `X=${x}% Y=${y}%`;
  34. cristal.style.backgroundImage = `radial-gradient(
  35. circle at ${x}% ${y}%,
  36. transparent 20%,
  37. cyan 21%,
  38. black 25%)`;
  39. }
  40.  
  41. </script>
  42. </head>
  43.  
  44. <div id="cristal"></div>
  45.  
  46. <h1>Redondo 2</h1>
  47. <p>
  48. <a href="https://www.w3schools.com/css/css3_gradients.asp">w3schools</a>
  49. </p>
  50. <p>
  51. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mattis dui, a eleifend nunc. Proin eget odio eros. Proin consequat tortor id turpis tincidunt accumsan. Donec et mauris ex. Nullam massa tortor, malesuada vel magna eu, malesuada elementum orci. Aliquam rhoncus interdum dolor ac imperdiet. Fusce tincidunt iaculis accumsan. Nullam nisl ante, feugiat et sagittis nec, suscipit ac felis.
  52. </p>
  53. <p>
  54. Pellentesque egestas sollicitudin lorem et consequat. Mauris at tempor nunc. Mauris non convallis turpis. Nunc placerat est ut eros dapibus accumsan. Aenean dignissim in turpis vitae viverra. Suspendisse imperdiet nisi eu imperdiet maximus. Cras et leo lacus. Suspendisse arcu lacus, tincidunt mollis laoreet ut, pellentesque vel felis. Aliquam aliquam ligula fringilla, pretium nunc at, imperdiet elit. Maecenas vel sodales turpis, sed sagittis justo. Duis vel tellus et ipsum vulputate mollis. Donec vehicula augue id massa tincidunt ullamcorper. Vestibulum a leo sapien. Mauris ut sem sit amet urna fermentum ullamcorper. Maecenas neque lacus, facilisis ultrices molestie id, congue nec purus.
  55. </p>
  56. <p>
  57. Sed ut felis ac sem scelerisque tristique. Sed id erat ac dui semper condimentum et at metus. Curabitur hendrerit dui sit amet dapibus ultricies. Mauris sed viverra magna. Sed egestas consectetur viverra. Pellentesque feugiat mollis enim, quis ornare ipsum feugiat a. Etiam vestibulum nisi et lacus euismod, suscipit semper risus luctus.
  58. </p>
  59. <p>
  60. Nunc quis ante vestibulum, laoreet augue nec, sodales dui. Aenean id odio vel leo consequat accumsan. Sed pharetra, dolor vitae fermentum aliquam, orci nisl sagittis dui, in venenatis sapien ipsum eu tortor. Mauris nibh odio, imperdiet nec nisi eget, ultrices pellentesque sem. Cras tristique vulputate odio vitae convallis. Sed tempus, nisi sit amet venenatis porta, nibh metus posuere augue, eu blandit lorem lectus sed quam. Cras iaculis viverra mi, at finibus est placerat vitae. Quisque vitae mauris aliquam, interdum lacus ac, gravida nisl. Aenean a est consectetur, eleifend neque at, molestie velit. Sed vel fringilla mi. Pellentesque non nisi ut nunc auctor semper. Morbi id nunc risus. Nullam vel metus vitae risus dignissim fermentum. Duis quis sodales est, hendrerit porta lorem. Praesent varius blandit interdum.
  61. </p>
  62. <p>
  63. Mauris consectetur, dui vitae molestie pulvinar, orci erat porta justo, quis vehicula augue arcu a tellus. Vivamus lacus augue, facilisis quis ipsum ut, mattis dignissim nisl. Suspendisse nulla augue, consectetur quis massa eu, eleifend interdum diam. Mauris sit amet urna velit. Nullam ultrices sodales turpis. Nunc ut varius neque. Vestibulum sit amet venenatis tortor.
  64. </p>
  65. <p>
  66. Aenean sed varius erat, ac porta mauris. Nunc vitae iaculis sem, quis pulvinar nibh. Morbi sit amet vehicula massa, non posuere elit. Curabitur elit est, interdum sit amet semper vitae, egestas gravida velit. Aliquam vitae sem eleifend dolor elementum commodo vitae ut ex. Vestibulum eleifend ipsum bibendum sem hendrerit, sit amet interdum dui lacinia. Pellentesque vel ipsum pharetra magna vehicula ullamcorper. Nullam sodales erat arcu, in consectetur arcu rhoncus at. Nunc porta, nibh eget mattis lobortis, felis elit rhoncus lectus, et placerat odio turpis vitae metus. Aliquam erat volutpat.
  67. </p>
  68. <p>
  69. Mauris maximus, orci eget vehicula lacinia, purus metus convallis urna, quis venenatis ex arcu in libero. Phasellus sit amet ipsum iaculis orci rhoncus placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer lorem odio, sodales ac semper sit amet, varius vel dui. Integer eget ligula tincidunt, malesuada est ut, porta tortor. Sed suscipit risus eu cursus fringilla. Aenean vitae orci ac orci pharetra fringilla at ac ante.
  70. </p>
  71. <p>
  72. Phasellus molestie lorem a est dapibus, quis euismod arcu aliquet. Proin vulputate sapien in felis tempor, sit amet porttitor ante rutrum. Nullam vel ipsum rutrum, porta risus et, aliquet est. Aliquam pellentesque nisl a sem placerat, et eleifend lectus sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sagittis sed nisl in tristique. Quisque euismod a justo bibendum bibendum. Quisque pellentesque purus egestas nunc mattis, sed tempus orci vulputate. Praesent efficitur sapien id lacinia rutrum. Nullam egestas id purus sed fermentum. Aenean in ultricies libero. Suspendisse potenti. Pellentesque vehicula blandit semper.
  73. </p>
  74. <p>
  75. Aenean quis tempor lectus. Quisque ornare commodo urna, blandit imperdiet urna gravida sed. Donec finibus, nisl at eleifend facilisis, velit lacus mollis nisl, scelerisque aliquet quam nunc pharetra enim. Sed tempus mattis lacinia. Nunc non elit porta, eleifend purus id, molestie justo. Pellentesque id finibus nunc. Curabitur ac sapien ipsum. Quisque in vulputate turpis.
  76. </p>
  77. <p>
  78. Integer a massa turpis. Curabitur molestie nisl nec augue sodales, eu facilisis lectus dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eleifend eget lorem et facilisis. Nullam pellentesque nulla vel erat congue ullamcorper. Donec tortor tortor, faucibus non vulputate nec, imperdiet sit amet ante. Nulla euismod orci sem, ut rutrum sem aliquam in. Nulla ullamcorper in eros sit amet maximus. Cras accumsan, justo vestibulum sodales mattis, sapien dui lobortis urna, sit amet rutrum odio ante et risus. Integer nibh nunc, maximus quis laoreet eget, sagittis vel ipsum. Mauris sodales urna quis ultricies suscipit. Sed consectetur mi semper augue tempor ornare.
  79. </p>
  80. </body>
  81. </html>
  82.  

Proinf.net