تأثير الخلفية متغير تلقائيا لانهائي (css)

تأثير الخلفية متغير تلقائيا لانهائي (css)  طريقة برمجة background متغير بإستمرار و تلقائية بلغة css وبتصميم بسيط وسهل الاستخدام كدلك يمكنك أيضا أضافة تأثير الي أزرار خاصة بموقعك 👇👇👇👇👇👇  #background #effect #infinite #css #color #mdwab #ماتريال_ويب effect background infinite css

سلام عليكم و مرحبا بك في مدونة ماتريتل ويب وبعد


كما فرأت من العنوان سنحلول برمجة خلفية موقع تتغير تلقائيا بإستمرار ودلك في اطار تعلم لغة css وقد قمت بنشر مقال حول أفضل مكتبة أكواد css يمكنك إطلاع عليه و كدلك تطوير المواقع و تحسين شكل أيضا.
معاينة
لنفترض كود التالي هو الصفحة العمل


    <html>
        <head>
            <title>MDW</title>
            <style>
            /* code css  */
            </style>
        </head>
     <body>
    
    
    <!-- code html -->

     </body>
    </html>




في المكان المحدد بالأحمر ضع هدا الكود خاص بالشكل يوجد به لون الخلفية (تلاتة ألوان) و سرعة تغير خلفيات (5s) .....إلى أخره


        .mdw-bg-ifn{
            background-image: linear-gradient(0deg, #E91E63, #ff0000, #FFC107);
            background-size: 100% 600%;
            -webkit-animation: mdw-mnajiri 5s ease infinite;
            animation: mdw-mnajiri 5s ease infinite;
            }

/**
 * ----------------------------------------
 * animation mdw-mnajiri
 * ----------------------------------------
 */
@-webkit-keyframes mdw-mnajiri {
  0% {
    background-position: 0 50%;
50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes mdw-mnajiri {
0% {
    background-position: 0 50%;
50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}



هنا أمر متروك لك في إختار مكان الدي تريد أن تضيف هدا الستايل وضعه في مكان ملون ب أصفر

يمكنك أيضا تغير ألوان الخلفية يمكنك إطلاع على هدا المقال أفضل مواقع التي تقدم أكواد الألوان متناسقة 👇👇👇

جعل الخلفية الموقع تغير تلقائيا بإستمرار ضع التالي


        <body class="mdw-bg-ifn">

جعل أزرار الموقع تتغير تلقائيا و بستمرار ضع التالي


<a class="btn mdw-bg-ifn" href="#">Button</a>

or
<button class="mdw-bg-ifn">Button</button>

جعل div تتغير تلقائيا و بإستمرار ضع التالي


        <div class="mdw-bg-ifn">

        <!-- code html -->
        
        </div>

غير ما تريده
يمكن تجربة اكواد وإعطاء رأيك في التعلقات و سلام عليكم✋✋
محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام
رسائل أحدث رسائل أحدث رسائل أقدم رسائل أقدم

المنشورات ذات الصلة

4 تعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇
  1. رائع جدا... المزيد من التألق ❤ ومزيد مثل هذه المواضيع

    ردحذف
  2. كيف اقدر اح\ط صور

    ردحذف
  3. هدا هو كود

    background-image: url('link img here. JPG');



    متلا ادا أردت وضعتها لخلفية موقعك ضع التالى

    body {background-image: url('link img here. JPG');}

    ردحذف