افکت نوار عبور نور با CSS

افکت نوار عبور نور (light sweep یا shine effect) یکی از جلوه‌های بصری محبوب در طراحی رابط کاربری است که حس حرکت، جلوه لوکس و توجه به المان را افزایش می‌دهد. این افکت معمولاً با استفاده از گرادیانت‌ها، عناصر کاذب (::before/::after) و انیمیشن‌های CSS ساخته می‌شود. در این مقاله به روش‌های متنوع، مثال‌های عملی، بهینه‌سازی و نکات دسترس‌پذیری می‌پردازیم.

چرا از نوار عبور نور استفاده کنیم؟

• جذب توجه کاربر به دکمه‌ها یا کارت‌ها
• افزایش حس تعاملی بودن رابط
• قابلیت پیاده‌سازی ساده و سبک با CSS خالص

روش پایه: استفاده از ::before و گرادیانت

ساده‌ترین روش برای ایجاد نوار نور متحرک، استفاده از یک عنصر کاذب با گرادیانت شفاف در کنار انیمیشن translate است.

/* HTML:
<button class="btn-shine">Click me</button>
*/
/* CSS: */.btn-shine{
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  background: #1e90ff;
  color: white;
  border: none;
  border-radius: 6px;
}

.btn-shine::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(20deg);
  transition: transform 0.6s ease;
}

.btn-shine:hover::before{
  transform: translateX(200%) rotate(20deg);
}

این کد یک دکمه با یک عنصر ::before دارد که گرادیان مثلثی شکل سفید را نگه می‌دارد. هنگام hover، نوار با translate حرکت می‌کند و عبور نور شبیه‌سازی می‌شود. استفاده از overflow:hidden مانع قرارگیری نوار خارج از دکمه می‌شود.

نسخه بهینه‌تر با انیمیشن و متغیرهای CSS

برای کنترل بهتر و قابلیت reuse، از CSS variables و @keyframes استفاده کنید و همچنین حالت prefers-reduced-motion را در نظر بگیرید.

:root{
  --shine-color: rgba(255,255,255,0.85);
  --shine-duration: 1s;
}

.btn-shine2{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,#222,#444);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
}

.btn-shine2::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 30%;
  height: 200%;
  background: linear-gradient(60deg, transparent 0%, var(--shine-color) 50%, transparent 100%);
  transform: translateX(-150%) rotate(20deg);
  animation: shine var(--shine-duration) ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine{
  0%{ transform: translateX(-150%) rotate(20deg); }
  50%{ transform: translateX(150%) rotate(20deg); }
  100%{ transform: translateX(450%) rotate(20deg); }
}

/* Reduce motion */@media (prefers-reduced-motion: reduce){
  .btn-shine2::after{ animation: none; display: none; }
}

در این مثال از متغیرها برای رنگ و مدت استفاده شده و انیمیشن بی‌نهایت اجرا می‌شود. همچنین مدیا کوئری prefers-reduced-motion، برای کاربرانی که حرکت زیاد را ترجیح نمی‌دهند، انیمیشن را غیرفعال می‌کند.

افکت عبور نور روی متن

اگر بخواهید نور روی متن حرکت کند، از background-clip: text و رنگ‌بندی گرادیانت بهره ببرید.

/* HTML:
<h1 class="shine-text">Shiny Text</h1>
*/ /* CSS: */ .shine-text{ font-size: 56px; font-weight: 800; background: linear-gradient(90deg, #fff 0%, #fff 20%, #bbb 40%, #fff 60%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; animation: text-shine 2s linear infinite; } @keyframes text-shine{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }

اینجا گرادیانت پس‌زمینه برش خورده و روی متن نمایش داده می‌شود. با انیمیشن background-position، افکت عبور نور روی متن ایجاد می‌شود. توجه کنید که برای سازگاری مرورگرها از -webkit-background-clip استفاده شده است.

راهکار پیشرفته: استفاده از mix-blend-mode و فیلترها

برای جلوه‌های پیچیده‌تر می‌توان از mix-blend-mode یا فیلتر blur استفاده کرد تا نوار نور طبیعی‌تر به نظر برسد.

.card{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#0b2340,#062030);
  color: #fff;
  padding: 24px;
  border-radius: 12px;
}

.card::before{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:40%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);
  transform:rotate(-15deg) translateX(-100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: sweep 1.4s ease-in-out infinite;
}

@keyframes sweep{
  to{ transform:rotate(-15deg) translateX(300%); }
}

در این نسخه، mix-blend-mode: screen باعث می‌شود نوار نور با پس‌زمینه ترکیب شود و حالت درخشش طبیعی بگیرد. فیلتر blur لبه‌ها را نرم می‌کند. از این روش برای کارت‌ها و پس‌زمینه‌های تاریک استفاده کنید.

مقایسه سریع روش‌ها

نکات بهینه‌سازی و دسترس‌پذیری

• از prefers-reduced-motion برای کاربران حساس به حرکت استفاده کنید.
• برای عملکرد بهتر، از transform و opacity به جای تغییرات layout استفاده کنید (مثلاً translateX).
• از will-change: transform برای المان‌های پرتکرار استفاده کنید اما با احتیاط چون ممکن است حافظه بیشتری مصرف کند.
• مطمئن شوید کنتراست متن با پس‌زمینه پس از اعمال افکت حفظ می‌شود.

جمع‌بندی و توصیه‌های حرفه‌ای

افکت نوار عبور نور با CSS یک ابزار مؤثر برای جلب توجه و ارتقای تجربه کاربری است. با انتخاب روش مناسب—ساده با ::before، متن با background-clip یا حرفه‌ای با mix-blend-mode—می‌توانید این افکت را در دکمه‌ها، کارت‌ها یا عناوین پیاده کنید.

همیشه عملکرد، دسترس‌پذیری و سازگاری مرورگرها را در نظر بگیرید و برای هر المان راهکار fallback در نظر داشته باشید. با تغییر متغیرهای CSS می‌توانید به سرعت رنگ، سرعت و جهت نور را در تم کلی سایت هماهنگ کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال