افکت‌های تعاملی کوچک می‌توانند تجربه‌ی کاربری را به‌طور چشمگیری بهبود دهند. یکی از این افکت‌ها، افکت "درخشش نور" (Light Shine) است که با عبور یک نور ملایم از روی تصویر، حس پویایی و زیبایی بیشتری به صفحه می‌دهد. در این مقاله، نحوه پیاده‌سازی این افکت جذاب را تنها با استفاده از CSS بررسی می‌کنیم.

ساختار کلی HTML و CSS

در این نمونه کد، ما از یک عنصر div با کلاس .light-shine استفاده می‌کنیم که حاوی یک تصویر است. با استفاده از CSS، یک نور شیب‌دار (gradient) را به‌صورت انیمیشنی از روی تصویر عبور می‌دهیم.

کد CSS توضیح داده شده:

css
.light-shine {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

این بخش مشخص می‌کند که عنصر دارای موقعیت نسبی است (برای موقعیت‌دهی به شبه‌عنصر ::after) و محتوای اضافه درون آن پنهان شود. با inline-block، عنصر به اندازه‌ی محتوا باقی می‌ماند.

css
.light-shine img {
  transition: transform 0.3s ease;
}

در اینجا، افکت انتقال نرمی برای حالت بزرگ‌نمایی تصویر در حالت هاور اضافه می‌شود.

css
.light-shine:hover img {
  transform: scale(1.02); /* بزرگ‌نمایی ۲٪ */
}

وقتی کاربر روی تصویر هاور می‌کند، تصویر کمی بزرگ‌تر می‌شود (۲٪)، که حس تعامل‌پذیری را بیشتر می‌کند.

css
.light-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

در این قسمت، شبه‌عنصر ::after یک نوار نورانی مورب با استفاده از گرادینت ایجاد می‌کند. مقدار اولیه‌ی left باعث می‌شود این نوار در ابتدا بیرون از تصویر قرار گیرد. skewX نیز برای دادن زاویه به این نور استفاده می‌شود.

css
.light-shine:hover::after {
  animation: shineEffect 1s ease forwards;
  opacity: 1;
}

با هاور شدن روی تصویر، انیمیشن عبور نور فعال می‌شود و شبه‌عنصر نمایان می‌شود.

css
@keyframes shineEffect {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

در این انیمیشن، نور از چپ تصویر وارد شده و از سمت راست خارج می‌شود.

نتیجه نهایی

با اجرای این کد، افکت زیبایی از عبور یک نور براق و درخشان از روی تصویر ایجاد می‌شود که می‌تواند برای بنرهای تبلیغاتی، گالری‌های تصویری یا حتی دکمه‌ها استفاده شود.

مزایا

• بدون نیاز به jаvascript

• اجرا در تمام مرورگرهای مدرن

• سبک و قابل تنظیم

جمع‌بندی

افکت shine یکی از روش‌های ساده اما تاثیرگذار در زیباتر کردن تجربه کاربری است. با استفاده از تنها چند خط CSS، می‌توان حال و هوای حرفه‌ای‌تری به رابط کاربری وب‌سایت‌ها بخشید. اگر به دنبال جلب توجه کاربر به عناصر خاصی هستید، این افکت را حتماً امتحان کنید!