تاثير على النص بتقنية CSS3 | حصريا

السلام عليكم ورحمة

الله وبركاته

--

بعد طول غيابنا بسبب الدراسة نعود لكم بتدوينة حصرية نقدم لكم فيها تاثير احترافي على النصوص بتقنية css3 

• معاينة

طريقة التركيب:

1. توجه الى القالب ثم تحرير html
2. ضع كود النص في المكان الذي يناسبك

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      عصام ويب
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      الابداع
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

1. غير النص باللون الأحمر الى ما يناسبك

1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي

$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;

.text--line {
  font-size: .5em;
  }

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  }

$max: 5;
$stroke-step: 7%; 
.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
  stroke-width: 3px;
  
  animation: stroke-offset 9s infinite linear;
  
  @for $item from 1 through $max {
    $stroke-color: nth($colors, $item);
    
    &:nth-child(#{$item}) {
      stroke: $stroke-color;
      stroke-dashoffset: $stroke-step * $item;
      }
    }
  }

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: $stroke-step * $max;  
    stroke-dasharray: 0 $stroke-step * $max*2.5;
  }
}

1. اذا واجهت اي مشكلة ضعها بتعليق