زر بأضاءة متحركة بأستخدام HTML, CSS

[x32x01]

زر بأضاءة متحركة بأستخدام HTML, CSS​

لانشاء زر مشابه . سنقوم بوضع عنصرين فوق بعض ... يعني عنصر في الخلف يمثل الخط الأحمر , و فوقه عنصر أصغر منه يغطيه بحيث تظهر الأطراف من العنصر الخلفي فقط. عند تدوير العنصر الخلفي سيصبح لدينا نفس التأثير.
اذا :
أولا علينا انشاء عنصر حاوية يمتلك عنصرين داخله في كود الHTML لنعدل عليهما لاحقا باستعمال الCSS:
سننشئ عنصر بمثابة حاوية للعنصرين : نعطيه "btn-container" كـclass .
ثم سنقوم بانشاء بداخله عنصرين و يحملان كلاسين هما :

1. "outline" : و هو العنصر الخلفي و الذي يمثل التأثير الذي يدور.
2. "inner-container" : و هو العنصر الأمامي الذي يغطي العنصر السابق.

سيصبح كود الhtml هكذا:

    <div class="btn-container">
        <div class="outline"></div>
        <div class="inner-container"></div>
    </div>

ثانيا سنعمل على كود الـCSS . سنقسم الأمر الى مرحلتين : مرحلة وضع العنصرين فوق بعض ثم مرحلة التحريك.
المرحلة الأولى:
سنقوم في هذه المرحلة بترتيب العناصر فوق بعض. لذلك سنقوم باستعمال خاصية position في الـcss :
اولا سنضيف الكود التالي position: relative لكلاس btn-container و يعني أن هذا العنصر سيصبح مرجع العناصر التي داخله في ما يخص موقعها ...
لذلك سمينا العنصر بcontainer اي حاوية العناصر التي داخله.
ثم سنقوم بجعل كل الأبناء في هذا العنصر (العناصر داخله) تتمركز الوسط و ذلك عن طريق الكود التالي:

    display: flex;
    justify-content: center;
    align-items: center;

بعدها سنقوم باخفاء كل ما يخرج عن اطار العناصر و ذلك لـأن أحد الأبناء سيكون أكبر من الحاوية و لذلك نريد اخفاء الجزء الخارج عن اطارها.

overflow: hidden;

سيصبح كود btn-container كالتالي:

.btn-container {
height: 200px;
    width: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

سنقوم بعدها بكتابة كود الcss الخاص بكلاس outline لترتيب العنصر الخلفي, ما سنحتاجه هو تغيير طريقة تموقعه , تلوينه و تغيير حجمه:

نعلم أن العناصر في لغة HTML سترتب عنصر تحت عنصر كسلسلة . بما أننا نريد أن نضع عنصر على عنصر (يعني منطبق عليه) سنحتاج أن نكسر هذا التسلسل و ذلك باستخدام :​

position: absolute;

حيث سيصبح العنصر حر و لا يتبع التسلسل و يتموقع في المنتصف تلقائيا (لأننا قمنا ببرمجة ذلك في العنصر الأب).
جرب نزع هذا السطر لاحقا لتلاحظ الفرق

- للتلوين سنستخدم دالة اسمها : conic-gradient والتي تلون زاوية من العنصر فقط ... سنقوم بتلوين زاوية باللون الأحمر و الزاوية الأخرى بالشفاف:​

background-image: conic-gradient(red 40deg, transparent 140deg);

نحتاج الآن لأن يكون حجم هذا العنصر أكبر من الحاوية ( بالرغم أن الجزء الذي بخارج الحاوية لن يكون ظاهر) و السبب هو أننا سنجعل هذا العنصر يدور لاحقا (اذا لم تفهم السبب فقط اجعل الحجم بنفس حجم العنصر و ستفهم لاحقا)

height: 300%;
width: 300%;

الكود الاجمالي سيصبح:

.outline {
    position: absolute;
    background-image: conic-gradient(red 40deg, transparent 140deg);
    height: 300%;
    width: 300%;
}

كخطوة أخيرة في المرحلة الأولى سنقوم بكتابة الكود الخاص بكلاس inner-container :
نفس ما قمنا به في العنصر السابق سنقوم به في هذا العنصر . لكن هذا العنصر سيكون اصغر حجما قليلا من الحاوية و ذلك ليظهر العنصر الذي خلفه outline . بالتالي سيغطيه ما عدا الأطراف

.inner-container {
    position: absolute;
    background-color: rgb(18, 8, 41);
    height: 95%;
    width: 95%;
}

المرحلة الثانية: التحريك
في لغة الcss يمكن انشاء تحريك animation عن طريق keyframes@.
لانشاء التأثير سنحتاج لتدوير outline حتى 360 درجة . الأمر بسيط ... سنقوم بكتابة الكود التالي:

@keyframes btn-outline {
    0% {
        transform: rotate(0deg);//البداية
    }
    100% {
        transform: rotate(-360deg); // تدوير 360 درجة عكس عقارب الساعة
    }
}

= 0% تعني نقطة البداية في التحريك ... ما داخل القوسين هو الوصف لبداية التحريك.
= 100% تعني نقطة نهاية التحريك .
= لو كتبت 50% يعني منتصف التحريك
= لو كتبت 25% يعني في ربع التحريك و طبعا ما داخل الأقواس هو وصف لهذه النقطة من التحريك ...
يعني تستطيع انشاء نقاط و تغيير الحجم , نوع النص , لون النص , الخلفية ....
الآن نحتاج اضافة التحريك الى كلاس outline . يجب ان يكون التحريك مستمر الى مالانهاية . ايضا يجب يكون التوقيت بين نقطتين بينهما نفس المسافة متساوي ( لست مجبر على فهم هذا الشيء لكن يجب أن تجربه كي تعرف فائدته) .
داخل اضف:

animation-name: btn-outline;// @keyframes اسم الـ
animation-duration: 10s; // الزمن لانجاز التحريك
animation-timing-function: linear;//  يعني ان الزمن خطي و التوقيت بين نقطتين بينهما نفس المسافة متساوي
animation-iteration-count: infinite;// كرر التحريك لمالانهاية

الكود كامل :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="btn-container">
        <div class="outline"></div>
        <div class="inner-container">Outlined</div>
    </div>


</body>
</html>

وهذا كود الـ CSS :

body {
    background-color: rgb(25, 12, 56);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-container {
    min-height: 200px;
    width: 200px;
    position: relative;
    background-color: rgb(18, 8, 41);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px rgba(255, 0, 0, 0.171);
    border-radius: 25px;
}

.outline {
    position: absolute;
    background-image: conic-gradient(red 40deg, transparent 140deg);
    height: 300%;
    width: 300%;
 
  animation-name: btn-outline;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    ;
}

.inner-container {
    position: absolute;
    background-color: rgb(18, 8, 41);
    height: 95%;
    width: 95%;
    color: rgba(255, 255, 255, 0.322);
 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 25px;
    transition: all 0.5s ease;
}

.inner-container:hover {
    font-size: 35px;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes btn-outline {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}