Hero Effects Library

Bộ sưu tập hiệu ứng tối ưu cho Elementor. Chỉ cần copy block và dán.

FX1 · Spin

Xoay tròn liên tục, hover tăng tốc.

LOGO

<style>
.fx-spin{animation:fxSpin 24s linear infinite;will-change:transform}
.fx-spin:hover{animation-duration:6s}
@keyframes fxSpin{to{transform:rotate(360deg)}}
</style>
<img class="fx-spin" src="logo.png">

FX2 · Float

Trôi nhẹ lên-xuống.

🧋

<style>
.fx-float{animation:fxFloat 6s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
</style>
<div class="fx-float"> ... </div>

FX3 · Shimmer Text

Chữ gradient chạy qua lại.

Chè Chè

<style>
.fx-shimmer{
  background:linear-gradient(100deg,var(--fx-c1,#7d7c4f),var(--fx-c2,#e8a23a) 48%,var(--fx-c1,#7d7c4f) 92%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fxShimmer 7s ease-in-out infinite;
}
@keyframes fxShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
</style>
<h1 class="fx-shimmer">Chè Chè</h1>

FX4 · Rise

Trồi lên khi tải trang (có thể so le bằng fx-rise-1 đến fx-rise-4).

<style>
.fx-rise{animation:fxRise .7s ease both}
.fx-rise-1{animation-delay:.12s}.fx-rise-2{animation-delay:.24s}
@keyframes fxRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
</style>
<h1 class="fx-rise">Title</h1>

FX5 · Shine

Vệt sáng quét qua (cần bọc chữ trong thẻ <span>).

Goodeats

<style>
.fx-shine{position:relative;overflow:hidden}
.fx-shine>*{position:relative;z-index:1}
.fx-shine::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:fxShine 4s ease-in-out infinite}
@keyframes fxShine{0%{left:-130%}60%,100%{left:170%}}
</style>
<a class="fx-shine" href="#"><span>Order</span></a>

FX6 · Lift

Hover nhấc lên + bóng đổ 3D.

<style>
.fx-lift{transition:transform .2s,box-shadow .2s}
.fx-lift:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 32px rgba(0,0,0,.22)}
</style>
<button class="fx-lift">Hover me</button>

HTML for Che Che