mdwabblog@تأثير الخلفية متغير تلقائيا لانهائي (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 و أدعوك لمتابعتي عبر حسابي على أنستغرام
رسائل أحدث
بطاقة تعريف بالمدونة (إضافات بلوجر)
رسائل أقدم
تضمين الصور في تعليقات بلوجر
){kind=link}
رائع جدا... المزيد من التألق ❤ ومزيد مثل هذه المواضيع
ردحذفشكرا لك على التعليق الرائع
حذفكيف اقدر اح\ط صور
ردحذفهدا هو كود
ردحذفbackground-image: url('link img here. JPG');
متلا ادا أردت وضعتها لخلفية موقعك ضع التالى
body {background-image: url('link img here. JPG');}