0
230
Vistas¿Cómo diseño una parte de la forma al pasar el mouse?
el círculo más grande es el cursor del mouse y el pequeño es un círculo fijo en el centro de la página, ¿cómo se puede diseñar este círculo como la imagen cuando el cursor toca alguna área del círculo central? 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Aquí hay un ejemplo simple de un círculo grande que se usa como el cursor y usa la diferencia de modo de combinación.
El fondo del contenedor es azul (#0000ff) y los círculos son amarillos (#ffff00) por lo que la diferencia es blanca (#ffffff).
Cuando los círculos se superponen, la diferencia es #000000 y la diferencia con el azul es azul.
<!doctype html> <html> <head> <title>Circles</title> <style> .bg { width: 100vw; height: 100vh; background: blue; mix-blend-mode: difference; cursor: none; position: fixed; top: 0; left: 0; } .fixedcircle { width: 100px; height: 100px; background: yellow; border-radius: 50%; top: calc(50% - 50px); left: calc(50% - 50px); position: relative; position: fixed; mix-blend-mode: difference; } .cursor { width: 200px; height: 200px; border-radius: 50%; background: yellow; position: absolute; mix-blend-mode: difference; } </style> </head> <body> <div class="bg"></div> <div class="fixedcircle"></div> <script> const cursor = document.createElement('div'); cursor.classList.add('cursor'); document.body.append(cursor); document.body.addEventListener('mousemove', function() { cursor.style.top = (event.clientY - 100) + 'px'; cursor.style.left = (event.clientX - 100) + 'px'; }); </script> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta