تأثير الخلفية متغير تلقائيا لانهائي (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>

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

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

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

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

غير ما تريده

يمكن تجربة اكواد وإعطاء رأيك في التعلقات و سلام عليكم✋✋

شارك Share Tweet Share Share Share

انقر هنا

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

4 تعليقات

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

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇