• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

در این مطلب و مطالب بعدی ، چهار نمونه کد زیبا برای Border بصورت انیمیشی در اختیارتون میزارم که میتونین برای زیباتر شدن سایتتون از اونا ایده بگیرین.

کدهای HTML :

کدهای CSS :

میبینید که زمانی که روی Box مورد نظر هاور میکنید ، Border اون بصورت انیمیشنی تغییر میکنه.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

Source

نوع کد رايگان

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حسین حسنی(۶ دی ۱۳۹۳)

    خوب بود.
    یه کم بیشتر در مورد کدهایی که توی این افکتها به کار برده شده توضیح بدین بهتر میشه مثل خاصیت:
    stroke-dasharray.
    البته میدونم که بررسی بعضی کدها خیلی زمانبره ولی برای افکتهایی مثل همین مثال میشه یه کم وقت گذاشت تا کاربرا بهتر بتونن یاد بگیرن.
    ممنون

    • ‏‏
      محمد اسفندیاری(۶ دی ۱۳۹۳)

      دوست عزیز این کدها صرفا جهت دادن ایده به شما هست…….اسم این بخش هم همینه……من این کدهارو قرار میدم که بفهمین چنین کدها و ویژگی هایی هم وجود داره…..هر کدوم از این کدها نیاز به چند آموزش داره که از حوصله جمع خارجه…..بعضی افراد هم که اصلا به کدها دقتی نمیکنن و صرفا اونارو کپی و Paste میکنن……پیشنهاد میکنم خودتون در گوگل سرچ کنین …..مطالب خوبی بدست میارین
      موفق باشید

  • ‏‏
    حسین حسنی(۷ دی ۱۳۹۳)

    متوجه شدم
    ممنون

  • ‏‏

    با سلام
    اول از همه تشکر میکنم از طراح سایت ک خیلی زحمت کشیدن بابات مطالب
    مخواستم بدونم اگه بشه یکم بیشتر توضیح بدید یا ی منبع معرفی کنید راجر border انیمیشنی ترجیحا فارسی

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram