امروز میخوام نمونه هایی از انیمیشن ها به روی آیکون ها که با رفتن نشانگر موس به روی آنها انجام میشود را آموزش بدم، این طرح رو میخواهیم با استفاده از انیمیشن CSS انجام بدهیم، فونت به کار رفته در این اسکریپت از فونت آیکون ( Eco Ico توسط Matthew Skiles ساخته شده توسط IcoMoon app ) است.

مشاهده دموی اسکریپتدریافت اسکریپت

نمونه ای از قسمت HTML

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
    <a href="#" class="hi-icon hi-icon-earth">Partners</a>
    <a href="#" class="hi-icon hi-icon-support">Support</a>
    <a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

یک نمونه از انمیشن چرخشی CSS

.hi-icon-effect-6 .hi-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    transition: background 0.2s, color 0.2s;   
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

توجه کنید کادر خط تیره در عنصر (border-radius: 50%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

امیدوارم که خوشتان آمده باشه و بتونید ازش استفاده لازم رو ببرید!

2769 بازدید

۲۹ خرداد ۱۳۹۲ / آموزش

یک دیدگاه برای این مطلب ارسال شده است !

  • hossein / در تاریخ ۴ تیر ۱۳۹۲

    سلام . واقعا سایت خوب داری . بهت تبربیک میگم و امیدوارم در راهت موفق باشی . مطلب خیلی خوب و جامعی بود .

  • ارسال پاسخ !

    بالا