انشاء ايقونة لاظهار حسابتك في موقعك[Animated share button

0 90

 انشاء ايقونة لاظهار حسابتك في موقعك

لضمان عدم مواجهة اي مشاكل وتظهر لك الايقونات كما موجود في الفيديو اتبع الخطوات التالية ..

  1. قم بانشاء ملف Html 
  2. قم بانشاء ملف Css وتأكد من ربطه في صفحة Html
  3. قم بانشاء ملف JS واربطه في صفحة html او يمكنك كتابة كود داخل صفحة html داخل الوسم  <script>
  4. لاتنسئ اضافة مكتبة fontawesome  التي سوف نجلب منها الايقونات الظاهره..

كود Html

#<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <link rel=”stylesheet” href=”style.css”>
    <script src=”https://kit.fontawesome.com/f6816dd194.js” crossorigin=”anonymous”></script>
</head>
<body>
    <div class=”main”>
        <div class=”share”>
            <ol>
                <li><a href=”#”><i class=”fab fa-instagram fa-2x”></i></a></li>
                <li><a href=”#”><i class=”fab fa-facebook fa-2x”></i></a></li>
                <li><a href=”#”><i class=”fab fa-whatsapp fa-2x”></i></a></li>
                <li><a href=”#”><i class=”fab fa-twitter fa-2x”></i></a></li>
            </ol>
            <div class=”toggle”></div>
        </div>
    </div>

    <script>
        const toggle = document.querySelector(‘.toggle’);

        toggle.addEventListener(‘click’,()=>{
            const sharebtn = document.querySelector(‘.share’);
            sharebtn.classList.toggle(‘active’);
        })
    </script>
</body>
</html>

كود CSS

*{
    margin: 0;
    padding: 0;
}
body{
    background: black;
}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle{
    width: 50px;
    height: 50px;
    background: #c70039;
    border-radius: 50%;
    border: 2px solid #c70039;
    cursor: pointer;
    position: relative;
}
.toggle::before{
    content: ‘f1e0’;
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    font-family: fontAwesome;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
}
.share.active .toggle::before{
    content: ‘f00d’;
    font-size: 2rem;
}
.share{
    position: relative;
}
.share ol{
    position: absolute;
    margin: 2px;
    width: 50px;
    height: 50px;
}
.share ol li{
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all .4s;
}
.share ol li a{
    color: black;
}
.share.active ol li{
    transform: translate(0);
    transition: all 0.4s;
}
.share.active ol li:nth-child(1){
    transition-delay: 0.1s;
    transform: translateX(60px);
}
.share.active ol li:nth-child(2){
    transition-delay: 0.2s;
    transform: translateY(60px);
}
.share.active ol li:nth-child(3){
    transition-delay: 0.3s;
    transform: translateX(-60px);
}
.share.active ol li:nth-child(4){
    transition-delay: 0.4s;
    transform: translateY(-60px);
}

يمكنك ايضا تحميل الملفات عبر الميديا فاير

تحميل الان

يمكنك ايضا التحميل عبر التلكرام

تحميل الان 

                 مشاريع html .css قد تعجبكم

تحميل موقع شخصي كامل

معاينة المشروع

انشاء ايقونة مشاركة عند الضغط عليها تظهر لك ايقونات مواقع التواصل الاجتماعي

معاينة المشروع

انشاء قائمة متجاوبة مع جميع الشاشات

معاينة المشروع

انشاء زر عند الظغط علية يظهر فيديو

معاينة المشروع

افضل كتب لتعلم برمجة الويب في اللغة العربية

معاينة المشروع

تحميل الوردبريس على جهازك واحترافة دون الحاجة الى استضافة ودومين

معاينة المشروع 


اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

يستخدم هذا الموقع ملفات تعريف الارتباط لتحسين تجربتك. سنفترض أنك موافق على ذلك ، ولكن يمكنك إلغاء الاشتراك إذا كنت ترغب في ذلك. قبول قراءة المزيد