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

[Binkaddas]

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

بكل امانة بو محمد انا شفت في واحد من المنتديات الاجنبية طريقة جميلة لايقونات المنتديات بتفضل ادور او بتلف كما بالصورة التالي



هل برمجة او كتابة الكود هذا ياخذ منك الكثير من الوقت ومتعب ، كنت اتمنى ان يستفيد اعضاء المنتدى من هذا الكود اذا لم تكن برمجتة كبيرة ومتعبة

 

[shqawe]

وعليكم السلام ورحمة الله وبركاته

حياك الله يا ابو محمد الطريقة بسيطة وﻻ تحتاج برمجة كل ما عليك هو اضافة الكود التالي في قالب extra.less

.node-icon {

    i {
        animation: nodeIconAnumations 1s linear infinite;
        transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
    }
}

@keyframes nodeIconAnumations {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

اتمنى التجربة واعلامي بالنتيجة

احترامي وتقديري
اخوك
شقاوي

 

[Binkaddas]

مرحبا بو محمد مشكور على الكود نعم يعمل بكل جمال.

لكن ايضاً اذا امكن التعديل بو محمد بحيث استطيع التحكم في الاقسام التي اريدها فقط بوضع رقم المنتدي الذي اريد الايقونة بان تدور كما بالصورة العلوية تشاهد بعض الايقونات ثابتة

 

[shqawe]

هلا وغلا يا ابو محمد استبدل الكود السابق بالكود التالي:

.aniateIcons(@id) {
    .node--id@{id} {
        .node-icon {

                i {
                    animation: nodeIconAnumations 1s linear infinite;
                    transition: all 0.3s linear;
                    -moz-transition: all 0.3s linear;
                    -webkit-transition: all 0.3s linear;
                }
        }
    }

    @keyframes nodeIconAnumations {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}

اﻻن اذا حبيت تضيف الايقونة المتحركة للاقسام كل ما عليك هو وضع ارقام اﻻقسام بهذه الطريقة ولنفرض ان عندنا قسمين ارقامهم 2 و 3 فراح يكون استخدام الكود السابق بالطريقة هذي

.aniateIcons(2);
.aniateIcons(3);

وبكذا راح تتحرك ايقونات اﻻقسام 2 و 3

اتمنى اني قدرت اوضح الطريقة وان الكود يشتغل معك مع العلم تم تجربة الكود على اللوكال والكود اشتغل بدون مشاكل

احترامي وتقديري
اخوك
شقاوي

 

[Binkaddas]

والله بو محمد حاولت لم تعمل

.aniateIcons(2);
.aniateIcons(3);

وين بالضبط لان ركبت الكود بس ما اشتغل. وين مكانه بالضبط

 

[shqawe]

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



والكود الكامل بيكون بنفس الطريقة هذي

.aniateIcons(@id) {
    .node--id@{id} {
        .node-icon {

                i {
                    animation: nodeIconAnumations 1s linear infinite;
                    transition: all 0.3s linear;
                    -moz-transition: all 0.3s linear;
                    -webkit-transition: all 0.3s linear;
                }
        }
    }

    @keyframes nodeIconAnumations {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
.aniateIcons(2);
.aniateIcons(3);

نقطة اخيرة حاب اوضحها يا ابو محمد هال الكود ماهو مثل اكواد css العادية ﻻنه يعتبر فنكشن فالنقاط واﻻقواس اللي في الكود اذا ماكتبت بنفس الطريقة فلن يعمل الكود فتأكد انك نسخت الكود بالكامل بدون اي نقص للاكواد او النقاط