୨୧ Kawaii Cursor Effects ୨୧

 Pequeños detalles para hacer tu cursor más cute

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

¿Quieres que tu cursor deje un pequeño rastro mientras recorres tu blog?

Aquí tienes 6 efectos diferentes para darle un toque más cute y personal a tu página. Puedes elegir tu favorito y agregarlo desde:

Blogger → Diseño → Añadir un gadget → HTML/JavaScript

╭─────────────── ୨୧ ───────────────╮

୨୧ 01. Star Sprinkle

Un pequeño rastro de estrellitas que aparece mientras mueves el cursor.

<style>
.cursor-star {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  font-size: 12px;
  color: #f4b6d2;
  animation: star-fade 0.8s ease-out forwards;
}

@keyframes star-fade {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) rotate(180deg) translateY(15px);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var star = document.createElement("span");

  star.className = "cursor-star";
  star.innerHTML = "✦";

  star.style.left = (e.clientX + 5) + "px";
  star.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(star);

  setTimeout(function() {
    star.remove();
  }, 800);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 02. Heart Trail

Pequeños corazones aparecen siguiendo el movimiento del cursor.

<style>
.heart-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e9a5c2;
  font-size: 12px;
  animation: heart-fade 1s ease-out forwards;
}

@keyframes heart-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.3);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var heart = document.createElement("span");

  heart.className = "heart-effect";
  heart.innerHTML = "♡";

  heart.style.left = (e.clientX + 5) + "px";
  heart.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(heart);

  setTimeout(function() {
    heart.remove();
  }, 1000);

});
</script>

╭─────────────── ୨୧ ───────────────╮

୨୧ 03. Flower Trail

Un delicado rastro de florecitas para darle un toque romántico al cursor.

<style>
.flower-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #d9a7bd;
  font-size: 11px;
  animation: flower-fade 1s ease-out forwards;
}

@keyframes flower-fade {
  0% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) rotate(90deg) scale(0.2);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var flower = document.createElement("span");

  flower.className = "flower-effect";
  flower.innerHTML = "✿";

  flower.style.left = (e.clientX + 5) + "px";
  flower.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(flower);

  setTimeout(function() {
    flower.remove();
  }, 1000);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 04. Sparkle Dust

Pequeños destellos aparecen alrededor del cursor creando un efecto brillante.

<style>
.sparkle-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e8b7ca;
  font-size: 10px;
  animation: sparkle-fade 0.7s ease-out forwards;
}

@keyframes sparkle-fade {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var sparkle = document.createElement("span");

  sparkle.className = "sparkle-effect";
  sparkle.innerHTML = "✧";

  sparkle.style.left = (e.clientX + Math.random() * 12) + "px";
  sparkle.style.top = (e.clientY + Math.random() * 12) + "px";

  document.body.appendChild(sparkle);

  setTimeout(function() {
    sparkle.remove();
  }, 700);

});
</script>

╭─────────────── ୨୧ ───────────────╮

୨୧ 05. Bubble Trail

Pequeñas burbujitas aparecen mientras recorres la página.

<style>
.bubble-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e3b4c9;
  font-size: 9px;
  animation: bubble-fade 1.2s ease-out forwards;
}

@keyframes bubble-fade {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: translateY(-25px) scale(1.5);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var bubble = document.createElement("span");

  bubble.className = "bubble-effect";
  bubble.innerHTML = "○";

  bubble.style.left = (e.clientX + Math.random() * 15) + "px";
  bubble.style.top = (e.clientY + Math.random() * 15) + "px";

  document.body.appendChild(bubble);

  setTimeout(function() {
    bubble.remove();
  }, 1200);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 06. Sakura Trail

Un pequeño efecto inspirado en los pétalos de sakura.

Esta versión no necesita ninguna imagen externa, así que puedes probarla directamente:

<style>
.sakura-trail {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  font-size: 15px;
  color: #f3a9c4;
  animation: sakura-float 1.5s ease-out forwards;
}

@keyframes sakura-float {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  50% {
    opacity: 0.9;
    transform: translate(8px, -15px) rotate(120deg) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(-8px, -40px) rotate(240deg) scale(0.4);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var sakura = document.createElement("span");

  sakura.className = "sakura-trail";
  sakura.innerHTML = "✿";

  sakura.style.left = e.clientX + "px";
  sakura.style.top = e.clientY + "px";

  document.body.appendChild(sakura);

  setTimeout(function() {
    sakura.remove();
  }, 1500);

});
</script>

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

୨୧ Personaliza tu efecto

Puedes cambiar los símbolos por otros que combinen con tu blog:

✦  ✧  ☆  ♡  ♥  ✿  ❀  ❁  ❅  ⋆  ˚

También puedes modificar el color, tamaño y velocidad para crear tu propio estilo.

╭─────────────── ୨୧ ───────────────╮

୨୧ Important

No coloques los seis códigos juntos.

Elige solamente uno y agrégalo como gadget HTML/JavaScript.

Si ya tienes un efecto de cursor instalado, estos códigos pueden funcionar junto con tu cursor personalizado porque no reemplazan el cursor, solamente agregan el rastro alrededor de él.

╰─────────────── ୨୧ ───────────────╯

୨୧ ─── ♡ ─── ꕤ ─── ♡ ─── ୨୧

Create your own cute cursor

Un pequeño detalle puede hacer que tu blog se sienta mucho más personal.

Elige tu efecto favorito, cambia los detalles y crea tu propio cursor aesthetic.

♡ ୨୧ ₊˚⊹ happy blogging ⊹˚₊ ୨୧ ♡