Icon Hover Effects với CSS3

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

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.

Chuyên Mục: Css

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