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 ⊹˚₊ ୨୧ ♡
```html
```