Share Thiết kế nhiều hiệu ứng hover đẹp mắt với thư viện Mocassin.css

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Tôi đã giới thiệu với các bạn thư viện tạo hiệu ứng hover Direction Reveal ở bài viết "Tạo hiệu ứng hover nội dung với thư viện Direction Reveal", bài viết này tôi tiếp tục giới thiệu với các bạn thư viện khác đó là Mocassin.css. Thư viện Mocassin.css cung cấp rất nhiều hiệu ứng đẹp được phân chia thành từng nhóm hiệu ứng khác nhau. Các bạn có thể dễ dàng sử dụng các định nghĩa CSS để tạo hiệu ứng hover đẹp mắt cho website của mình.

Tất cả những gì mà thư viện Mocassin.css cung cấp chỉ là một tập tin CSS nhỏ gọn nhưng lại rất hiệu quả cho việc thiết kế giao diện website. Các bạn có thể tải về thư viện Mocassin.css tại địa chỉ https://github.com/eliezerpujols/mocassin.css và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/mocassin.min.css" rel="stylesheet">
Trong trường hợp các bạn muốn áp dụng các hiệu ứng này khi chạm màn hình trên thiết bị di động thì các bạn tích hợp thêm thư viện JavaScript như sau:
HTML:
<script src="path/to/mocassin.min.js"></script>
Bây giờ, các bạn có thể áp dụng thư viện Mocassin.css như ví dụ sau:
HTML:
<figure class="mc-item">
    <img src="path/to/image.jpg" class="mc-item__image">
    <figcaption class="mc-item__caption">
        <h1>Caption</h1>
    </figcaption>
</figure>
Các bạn có thể tìm hiểu thêm nhiều hiệu ứng hover khác của thư viện Mocassin.css tại địa chỉ https://github.com/eliezerpujols/mocassin.css.
 
Back
Top