ساخت افکت لیزری با CSS

افکت لیزری (Laser Effect) در طراحی وب برای تأکید بصری، انیمیشن‌های اسکنر، نوارهای برجسته و جلوه‌های مدرن مورد استفاده قرار می‌گیرد. با ترکیب گرادیان‌ها، سایه‌ها، فیلترها و انیمیشن‌های CSS می‌توان افکت‌هایی سبک، قابل‌کنترل و قابل‌بهینه‌سازی ساخت که بدون نیاز به تصویر یا جاوااسکریپت سنگین عمل کنند. در این مقاله با مثال‌های عملی، نکات فنی و بهینه‌سازی‌های حرفه‌ای آشنا می‌شوید.

مبانی و اصول فنی

• اصل بصری: یک هسته روشن با هاله یا Glow اطراف که حرکت یا پالس دارد.
• ویژگی‌های کلیدی CSS: linear-gradient, box-shadow, filter, mix-blend-mode, transform و animation.
• عملکرد: از transform & opacity برای استفاده از شتاب سخت‌افزاری (GPU) استفاده کنید و از repaint/重排‌های سنگین بپرهیزید.

مثال پایه: خط لیزری ساده

<div class="laser"></div>

.laser{
  position: relative;
  width: 90%;
  height: 6px;
  margin: 40px auto;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,255,255,0.95) 50%, rgba(0,0,0,0) 100%);
  box-shadow:
    0 0 10px rgba(0,255,255,0.6),
    0 0 30px rgba(0,200,255,0.12);
  filter: blur(0.6px);
  border-radius: 3px;
}

.laser::before{
  content: "";
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  width: 2%;
  height: 2px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 20px rgba(0,255,255,0.6);
  border-radius: 1px;
}

توضیح: این قطعه یک خط لیزری ایستا می‌سازد. هسته روشن با گرادیان ساخته شده و box-shadow هاله را ایجاد می‌کند. شبه‌المان ::before هسته سفیدِ مرکزی را نشان می‌دهد تا کنتراست و درخشندگی افزوده شود.

افزودن حرکت: اسکن و پالس

.laser{
  --color: #0ff;
  position: relative;
  width: 90%;
  height: 6px;
  margin: 40px auto;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,255,0.95) 50%, transparent 100%);
  overflow: hidden;
}

.laser::after{
  content: "";
  position: absolute;
  left: -25%;
  top: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(0,255,255,0) 100%);
  filter: blur(2px);
  transform: translateX(0);
  animation: sweep 2s linear infinite;
}

@keyframes sweep{
  0% { transform: translateX(0); opacity: 0.9; }
  50% { transform: translateX(350%); opacity: 1; }
  100% { transform: translateX(700%); opacity: 0; }
}

توضیح: این مثال یک لایه متحرک (::after) اضافه می‌کند که با انیمیشن sweep از چپ به راست حرکت می‌کند تا حس اسکن ایجاد شود. استفاده از transform باعث می‌شود انیمیشن روی GPU اجرا شود و روان‌تر باشد.

نسخه بهینه‌شده: کاهش بار رندر و دسترس‌پذیری

.laser {
  --color: #0ff;
  position: relative;
  width: 90%;
  height: 6px;
  margin: 40px auto;
  background: linear-gradient(90deg, transparent, var(--color), transparent);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .laser::after {
    animation: none;
    opacity: 0;
  }
}

توضیح: در این نسخه از will-change برای اطلاع مرورگر بهینه‌سازی و از مد prefers-reduced-motion برای احترام به تنظیمات کاربر استفاده شده است. حذف انیمیشن برای کاربرانی که حرکت کم را ترجیح می‌دهند، تجربه بهتری می‌سازد.

ترکیب با mix-blend-mode و فیلترها برای جلوه‌های پیشرفته

برای ایجاد جلوه‌های رنگی و انعکاس‌های جالب، می‌توان از mix-blend-mode: screen یا lighten استفاده کرد. همچنین SVG filters (مثل feGaussianBlur) گاهی نسبت به filter: blur در CSS کنترل دقیق‌تری می‌دهند.

.laser-hero{
  background: #02040a;
  position: relative;
  padding: 50px 0;
}

.laser-hero .laser{
  mix-blend-mode: screen;
  /* بقیه استایل‌ها مانند قبل */}

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

جداول: خصوصیات اصلی و نکات پشتیبانی

موارد استفاده و راهنمای حرفه‌ای

• اسکنرها و انیمیشن‌های ورود (login) — حس فناوری و آینده‌نگر.
• دکمه‌ها و حالت hover — استفاده از لیزر در hover برای جلب توجه.
• هدرها و بخش‌های هیرو — ترکیب با تصویر و blend برای جلوه سینمایی.
• بهینه‌سازی: وقتی ممکن است سایه‌های سنگین و blur را کاهش دهید و از تصاویر raster جلوگیری کنید.
• تست روی موبایل: اندازه‌ها و شدت glow را برای باتری و عملکرد صفحه‌نمایش تنظیم کنید.

نمونه اصلاح‌شده: جایگزینی filter: blur با box-shadow برای عملکرد بهتر

.laser-optimized{
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  box-shadow:
    0 0 6px rgba(0,255,255,0.6),
    0 0 18px rgba(0,200,255,0.15);
  /* حذف filter: blur برای کاهش هزینه رندر */}

توضیح: در بسیاری از موارد، استفاده از box-shadow به جای filter: blur باعث کاهش هزینه محاسباتی می‌شود زیرا filter می‌تواند باعث ایجاد لایه‌های رندر بزرگ و سنگین شود. box-shadow با تنظیم مقادیر مناسب هالهٔ مشابهی ایجاد می‌کند.

نتیجه‌گیری سریع

ساخت افکت لیزری با CSS ترکیبی از هنر و مهندسی است: انتخاب رنگ، ایجاد هسته و هاله، و استفادهٔ هوشمند از انیمیشن‌ها و فیلترها. با رعایت اصول عملکردی (GPU-friendly transforms، prefers-reduced-motion) و تست روی دستگاه‌های مختلف می‌توانید افکتی جذاب، سریع و قابل‌دسترسی تولید کنید.

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

ارسال