Olaa chicos, es mi primera vez haciendo tutoriales y este me lo pidio JImenita, este es el codigo:
<style>
:root {
--url-cursor: url('TU LINK');
--color-brillito: #tucolor;
}
*, html, body, a, button, iframe, div, span {
cursor: var(--url-cursor), auto !important;
}
a:hover, button:hover, input[type="submit"]:hover {
cursor: var(--url-cursor), pointer !important;
}
.brillito {
position: absolute;
width: 6px;
height: 6px;
background-color: var(--color-brillito);
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 4px var(--color-brillito), 0 0 8px var(--color-brillito);
animation: desvanecer 3s forwards ease-out;
z-index: 999999;
}
@keyframes desvanecer {
0% {
opacity: 1;
transform: scale(1) translateY(0);
}
100% {
opacity: 0;
transform: scale(0.2) translateY(25px);
}
}
</style>
<script>
document.addEventListener('mousemove', function(e) {
const brillito = document.createElement('div');
brillito.className = 'brillito';
brillito.style.left = (e.pageX - 3) + 'px';
brillito.style.top = (e.pageY - 3) + 'px';
const size = Math.random() * 5 + 2;
brillito.style.width = size + 'px';
brillito.style.height = size + 'px';
document.body.appendChild(brillito);
setTimeout(() => {
brillito.remove();
}, 3000);
});
</script>
Primero cambiaremos el codigo, para poner la imagen tiene que ser un png o sea, una con fondo transparente y que sea de 32 x 32p empezaremos buscando nuestra imagen puede ser en pinterest o en donde quieran, preferentemente transparente pero si no con que tenga fondo blanco o se un solo color, ejemplo algo asi
Luego lo llevan a Remove bg que ahi le quitan el fondo si no es transparente, luego para llevarla a que sea las dimensiones adecuadas iremos a Esta pagina que se me olvido el nombre jsdfkjsf y ahi le ponen que sea 32 x 32px, por ultimo iremos a Post image en donde pondran su imagen y les saldran varias opciones, vayan a la que dicen "link directo" y la copian, porfin volvemos al codigo y arribita entre las comillas y parentesis importantisimo que no los borren dice "tu link" ahi lo pegan y listo, solo nos queda poner el color de los brillitos y ahi van a Html codes, escogen su colorcito y lo copian y pegan entre donde puse "tucolor2 igual no borren el # ni la ;Ahora en diseño iremos a los gadgets y añadiremos un html code, pondremos nuestro codigo y ya quedaria, solo denle al cosito alado del ojo y ya
Eso fue todo, si falla o algo me dicen porque es mi primera vez haciendo tutoriales y en un blog, baii!