امروز میخوام نمونه هایی از انیمیشن ها به روی آیکون ها که با رفتن نشانگر موس به روی آنها انجام میشود را آموزش بدم، این طرح رو میخواهیم با استفاده از انیمیشن 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%) در فایرفاکس ۲۱ کار نمیکند (افکت شماره ۴).

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

۲۹ خرداد ۱۳۹۲

در آموزش امروز می خواهیم تا افکت Transition را روی کادرهای دایره ای تست و آزمایش کنیم و به شما آموزش بدیم. ما از Border Radius برای ایجاد یک Shape دایره ای استفاده و روی آن کار می کنیم.
حالا چرا دایره ؟ چون عملا بسیاری از طراحان مستطیل را برای کار خودشان انتخاب می کنند . اما شما با یک افکت دایره ای خاص جلوه ای دو چندان به وب سایت خود می دهید. به همین دلیل یک شکل خاص محسوب می شود و ما می رویم تا برای hover روی دایره افکت گذاری کنیم و البته با CSS.
در این آموش ما تمام کدها را بررسی نمی کنیم و برای اجرای این کار مبنا را بر این قرار دادیم که شما به Html و CSS3 تا حدودی تسلط دارید. خب ، پس بیائید شروع کنیم.
به ادامه مطلب بروید..
ادامه

۳۱ مرداد ۱۳۹۱
بالا