[شــرح] أضف تأثير موجة خفيف إلى منطقة .p-body-header

WIKIBA · 30 مايو 2025

أدخل لوحة تحكم المسؤول.
انقر فوق المظهر → القوالب من القائمة اليسرى.
قم بتحديد النمط النشط الخاص بك من الزاوية اليمنى العليا (على سبيل المثال، "نمطي المخصص").
ابحث عن الملف extra.less في قائمة الشجرة (عادةً في الأسفل).
في المحرر الذي يفتح، قم بلصق الكود التالي في الأسفل:

CSS:

.p-body-header {
  position: relative;
  overflow: hidden;
    
  /* Ne dovolite, da vam uniči barvo ozadja */
  background-color: var(--header-bg, #fff);
}

.p-body-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;        /* Za vodoravno ponavljanje ga pustimo širokega */
  height: 10px;       /* debelina vala */
  pointer-events: none;
  opacity: 0.2;       /* splošna motnost */

  /* Barvo valov naredimo enako kot barvo obroča */
  background-color: var(--theme-main-color);

  /* vgrajena SVG maska: tanka valovna oblika*/
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'>\
<path fill='white' d='M0 5 C20 0 60 10 80 5 L80 10 L0 10 Z'/>\
</svg>") repeat-x 0 bottom;

  /* velikost maske (repeat tile) */
  -webkit-mask-size: 80px 10px;
  mask-size:         80px 10px;

  /* animacija vodoravnega pomikanja */
  animation: waveMask 8s linear infinite;
}

@keyframes waveMask {
  from {
    -webkit-mask-position:    0 bottom;
            mask-position:    0 bottom;
  }
  to {
    -webkit-mask-position:  80px bottom;
            mask-position:  80px bottom;
  }
}

العرض التوضيحي هنا