Icon Hover Effects với CSS3

16/04/2014

CSS3 luôn luôn mang lại những cảm hứng và điều bất ngờ cho những ai lần đầu sử dụng nó. Hôm nay, mình tiếp tục chia sẻ cho các bạn một bộ sưu tập những hiệu ứng tuyệt đẹp dành cho các icon. Những hiệu ứng này rất thích hợp cho các trang được thiết kế theo dạng phẳng (flat design).

simple-icon-hover-effects

Xem Demo | Download

HTML

Trước hết chúng ta sẽ cần có các icon được làm từ font , với định dạng html như sau :

<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

Và sau đây là một trong những hiệu ứng cho icon , các bạn có thể tải về máy ở phần download để có thể xem chi tiết hơn những hiệu ứng khác.

.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);
    }
}

Có một số hiệu ứng chỉ có thể chạy tốt trên các trình duyệt với phiên bản mới nhất, do đó các bạn nên xem demo tại các trình duyệt mới nhất. Mình hy vọng là những hiệu ứng mà mình giới thiệu cho các bạn trong bài viết này, đủ sức để khiến bạn thích thú cũng như dùng nó vào trong các trang web hay blog của mình.

Tags:

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • MrJris

    anh ơi em muốn nhấn vào icon để chuyển trang thì làm ntn? (ý tưởng như shortcut)