شعار روبوت أندرويد مصمم بإستعمال css3

قبل أي شيء لا أستطيع شرح كل ما كُتب من أسطر html و css لكن سأحاول ما في الإمكان ترك الأكواد نضيفة لتفهم بعض الأساسيات. الفكرة سببها تحديث نسخة فيرفوكس إلى 14 لأجد روبوت أندرويد يحيِي كل مان قام بالتحديث، والمنافسة أنه خالي من الصور جله css3، وبما أني أحب المنافسة قمت بإضافة واحد بالحجم الكبير . وكما يٌعرف أن هناك طرق متعددة لنفس النتيجة فلكم طريقتي وأحب أن أشاهد طريقة من سيقوم بالمنافسة.
المنافسة تتجلى في تغيير صورة بإستعمال css3 وجعلها تتحرك بنفس التقنية، وهذا جله دون إدخال أي صورة، ويبقا إرسالها لي وإرسال الرابط لأضيفه أو الملف لأقوم برفعه
للمعاينة والتحميل من قائمة المتصفح إختر حفض الصفحة
كود html

  <div id="android">
    <div class="droid-antenna-left left droid-part"></div>
    <div class="droid-antenna-right right droid-part"></div>
    <div class="droid-head-container droid-part">
      <div class="droid-eye-left left droid-part"></div>
      <div class="droid-eye-right right droid-part"></div>
      <div class="droid-head droid-part"></div>
    </div>
    <div class="droid-arm-left left droid-part"></div>
    <div class="droid-arm-right right droid-part"></div>
    <div class="droid-body droid-part"></div>
    <div class="droid-leg-left left droid-part"></div>
    <div class="droid-leg-right right droid-part"></div>
  </div>

كود css

*{
    margin: 0px;
    padding: 0px;
    font-size: small;
}
body{
    background: #eee;
}
.droid-part{
        background: #A4C639;
}
.left{
    float: left;
}
.right{
    float: right;
}
/*Animation*/
@-moz-keyframes arm-animation
{
    from {
        -moz-transform: translate(-40px, -150px) rotate(150deg);
    }
    to {
        -moz-transform: translate(-60px, -125px) rotate(130deg);
    }
}
@-webkit-keyframes arm-animation
{
    from {
        -webkit-transform: translate(-40px, -150px) rotate(150deg);
        -o-transform: translate(-40px, -150px) rotate(150deg);
    }
    to {
        -webkit-transform: translate(-60px, -125px) rotate(130deg);
        -o-transform: translate(-60px, -125px) rotate(130deg);
    }
}
@-moz-keyframes eye-animation{
    0%{
            -moz-transform:translate3d(0,0,0px) scaley(1)
    }
    5%{
            -moz-transform:translate3d(0,4px,0px) scaley(0)
    }
    10%{
            -moz-transform:translate3d(0,0px,0px) scaley(1)
    }
    60%{
            -moz-transform:translate3d(0,0,0px) scaley(1)
    }
    100%{
            -moz-transform:translate3d(0,0px,0px) scaley(1)
    }
}
@-webkit-keyframes eye-animation{
    0%{
            -webkit-transform:translate3d(0,0,0px) scaley(1)
    }
    5%{
            -webkit-transform:translate3d(0,4px,0px) scaley(0)
    }
    10%{
            -webkit-transform:translate3d(0,0px,0px) scaley(1)
    }
    60%{
            -webkit-transform:translate3d(0,0,0px) scaley(1)
    }
    100%{
            -webkit-transform:translate3d(0,0px,0px) scaley(1)
    }
}
#android{
    width: 550px;
    margin: 0px auto;
}
/*Antenna*/
.droid-antenna-left,.droid-antenna-right{
    height: 53px;
    width: 12px;
    border: solid 5px #fff;
    border-bottom: none;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.droid-antenna-left{
    margin-left: 160px;
    -moz-transform:rotate(-30deg);
    -webkit-transform:rotate(-30deg);
    -o-transform:root(-30deg);
}
.droid-antenna-right{
    margin-right: 160px;
    -moz-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -o-transform:root(30deg);
}
/*Head*/
.droid-head-container{
    width: 356px;
    margin: 0px auto;
    padding-top: 19px;
    background: none;
}
.droid-eye-left,.droid-eye-right{
    clear:right;
    background: #ccc;
    height: 27px;
    width: 27px;
    -webkit-border-radius: 27px;
    -webkit-border-top-right-radius: 27px;
    -moz-border-radius: 27px;
    -moz-border-radius-topright: 27px;
    border-radius: 27px;
    border-top-right-radius: 27px;
    margin-top: 40px;
    -moz-animation:eye-animation 2s infinite alternate; 
    -webkit-animation:eye-animation 2s infinite alternate;
}
.droid-eye-left{
    margin-left: 80px;
}
.droid-eye-left:hover{
    
}
.droid-eye-right{
    margin-right: 80px;
}
.droid-head{
    height: 155px;
    width: 336px;
    -webkit-border-top-left-radius: 200px;
    -webkit-border-top-right-radius: 200px;
    -moz-border-radius-topleft: 200px;
    -moz-border-radius-topright: 200px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border: solid 10px #fff;
}
/*Body*/
.droid-body{
    height: 300px;
    width: 336px;
    margin: 0px auto;
    border: solid 10px #fff;
    border-top: 5px;
    -webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
.droid-arm-left,.droid-arm-right{
    height: 233px;
    width: 75px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border: solid 10px #fff;
}
.droid-arm-left{
    -moz-transform: translate(-40px, -150px) rotate(150deg);
    -webkit-transform: translate(-40px, -150px) rotate(150deg);
    -o-transform: translate(-40px, -150px) rotate(150deg);
    -moz-animation:arm-animation 2s infinite alternate; 
    -webkit-animation:arm-animation 2s infinite alternate;
}
/*Leg*/
.droid-leg-left,.droid-leg-right{
    height: 122px;
    width: 75px;
    border: solid 10px #fff;
    border-top: none;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 40px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 40px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
}
.droid-leg-left{
    margin-left: 160px; 
}
.droid-leg-right{
    margin-right: 160px;
}

محمد حنين

الإسم الكامل محمد حنين أحد geek من أمد طويل ، مطور ويب، محب للحرية، مستعمل نضام لينوكس، وأخيرا مجرم باللغة العربية للأسف في وقتها. معلومات أكثر عني أو الإتصال بي Mohammed Hanine

You may also like...

2 تعليقان

  1. يقول abusteaf:

    أنت رائع يا أخ محمد :)..

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *