Стилизация курсора в виде красной точки для вашего сайта на CSS3 + Javascript
Прикольная стилизация курсора, выполненная в стиле точки, за которой всегда следует подложка
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
*{ cursor : none; } #cursor, #cursor-outline { position: absolute; top: 0; left: 0; border-radius: 100%; transform: translate(-50%, -50%); } #cursor { height: 5px; width: 5px; background: hsla(0, 100%, 70%, 1) } #cursor-outline{ height: 15px; width: 15px; background: hsla(0, 100%, 70%, 0.5); } |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id="cursor"></div> <div id="cursor-outline"></div> <script type="text/javascript"> // Waiting for DOM content to be loaded document.addEventListener('DOMContentLoaded', function(){ // Event fires whenever mouse is moved document.addEventListener('mousemove', function(event){ // Re-adjusting the position of the div document.getElementById('cursor').style.left = event.clientX + 'px'; document.getElementById('cursor').style.top = event.clientY + 'px'; // Creating a lag so that outer circle follows setTimeout(() => { document.getElementById('cursor-outline').style.left = event.clientX + 'px'; document.getElementById('cursor-outline').style.top = event.clientY + 'px'; }, 100) }) // Listening for hover events on button document.getElementById('btn').addEventListener('mouseover', function() { // Changing the size of the outer circle document.getElementById('cursor-outline').style.height = '25px'; document.getElementById('cursor-outline').style.width = '25px'; }) // Resizing outer circle when mouse leaves the button document.getElementById('btn').addEventListener('mouseleave', function() { document.getElementById('cursor-outline').style.height = '15px'; document.getElementById('cursor-outline').style.width = '15px'; }) }); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
