Szöveganimációk
Betűtávolság-szétnyílás
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<h2 class="we-letter-spacing-text">
Fedezd fel a világot
</h2>
.we-letter-spacing-text {
display: inline-block;
margin: 0;
padding: 28px 42px;
background: #f4f1e9;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 18px;
color: #111111;
font-family: "Bodoni Moda", Georgia, serif;
font-size: clamp(32px, 5vw, 66px);
font-weight: 500;
line-height: 1.1;
text-align: center;
letter-spacing: -.035em;
box-shadow:
0 18px 45px rgba(0, 0, 0, .22);
cursor: default;
transition:
letter-spacing .85s cubic-bezier(.22, 1, .36, 1),
transform .65s cubic-bezier(.22, 1, .36, 1),
box-shadow .65s ease;
}
.we-letter-spacing-text:hover {
letter-spacing: .16em;
transform: scale(1.025);
box-shadow:
0 24px 55px rgba(0, 0, 0, .28);
}
document.querySelectorAll(".we-letter-spacing-text").forEach(element => {
element.addEventListener("mouseenter", function () {
element.classList.add("is-spread");
});
element.addEventListener("mouseleave", function () {
element.classList.remove("is-spread");
});
});