اضافة تأثير انتقال اللون ولون النص لعناوين المقالات

 يختلف عن تأثير التدرج Gadient Text في المقالة السابقة. ستساعد خدعة التدرج اللوني في هذه المقالة على تدفق اللون عبر العنوان لإنشاء تأثير أكثر لفتًا للنظر!

عمل:

الخطوة 1:

إضافة تأثير انتقال لون النص CSS

  
  .BSW-font-wave-color,h1 {
    line-height: 42px;
    font-size: 30px;
    text-align: left;
    background: linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%);
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 10s BeProud linear infinite;}
@keyframes BeProud {100% { background-position: 100vw 0px }}
@keyframes scroll{10%{margin-top:0}30%{margin-top:0}40%{margin-top:-40px}60%{margin-top:-40px}70%{margin-top:-80px}90%{margin-top:-80px}100%{margin-top:0}}

الخطوة 2: قم بتعريف مكونات التدرج اللوني للنص أي عنصر هو علامة

h1 او class .BSW-font-wave-color

سيظهر تأثير انتقال اللون مثل العرض التوضيحي أعلاه. لذلك تحتاج إلى وضع classللفصل بينهم!

 المثال الأصلي:

<h2 class="BSW-font-wave-color"> تحتوي علامة H2 بالفعل على تأثير انتقال اللون </h2>
<h2 class="title BSW-font-wave-color"> علامة H2 لها بالفعل تأثير انتقال اللون </h2>

الخطوه 3:
linear-gradient(179deg, #00004d 0%, #5333ed 49%, #2cd4d9 100%) تغيير تغييرات قيمة اللون
مع
إمالة متدرجة 179 درجة

#00004d: يبدأ رمز اللون الأول عند 0%

#5333ed 49%: كود اللون الثاني يبدأ عند 49%

 #2cd4d9 100%: كود اللون الثاني يبدأ عند 100%

animation: 10s Be Proud linear infinite;مع 10 ثوانٍ: سرعة تغيير اللون هي 10 ثوانٍ وسيتوقف التأثير. قم بتغيير القيمة مرة أخرى لتغيير سرعة تغيير اللون. حظ سعيد!