انجمن


لود کردن یک دستور css اتوماتیک (اساتید لطفا)  (۲ نوشته)

  • javidkhah

    آفلاین
    عضو
    تعداد نوشته‌ها: ۵۰
    تشکر شده: ۸ بار
    # نوشته شده: ۸ سال پیش
    ۵ دی ۱۳۹۱ - ۰۳:۱۰

    سلام اساتید متحرم . من می خوام یه استایلی که واسه یه عکس تعریف کردم مثلا 360 درجه بچرخه . حالا می خوام طوری تعریف کنم که هنگام بالا اومدن سایت اون عکس شروع به حرکت یا چرخش کنه . در واقع یه لوگو می خوام طراحی کنم که پشت سر هم برچه . مرسی اگه راهنمایی کنین

  • bo2o

    آفلاین
    عضو
    تعداد نوشته‌ها: ۳۸
    تشکر شده: ۶ بار
    # نوشته شده: ۸ سال پیش
    ۱۱ دی ۱۳۹۱ - ۰۳:۴۰

    با CSS3 میتونی درست کنی:
    ابتدا برای لوگوت کلاس زیر رو تعیین کن:

    .logo
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
    }

    بعد کد زیر رو پایین کلاس بالا کپی کن:

    @keyframes mymove
    {
    from { transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }
    to { transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }
    }
    
    @-moz-keyframes mymove /* Firefox */
    {
    from { -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    to { -moz-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    }
    
    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    from { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    to { -webkit-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    }
    
    @-o-keyframes mymove /* Opera */
    {
    from { -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    to { -o-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
    }

درباره‌ی این موضوع



برچسب‌ها

هیچ برچسبی نیست.