Home / Thủ Thuật / HTML/CSS / Tạo hiệu ứng cho liên kết bằng CSS3

Tạo hiệu ứng cho liên kết bằng CSS3

Hôm nay, chúng tôi sẽ giới thiệu đến các bạn mộ số hiệu ứng cho liên kết bằng CSS3. Trong hướng dẫn chúng tôi sẽ tạo ra những hiệu ứng chuyển động cho liên kết. Nào chúng ta cùng bằt đầu.

Tạo hiệu ứng cho liên kế bằng CSS3

Demo | Download

Trước tiên, bạn hãy chèn CSS và js:

   <link rel="stylesheet" type="text/css" href="css/normalize.css" />
   <link rel="stylesheet" type="text/css" href="css/demo.css" />
   <link rel="stylesheet" type="text/css" href="css/component.css" />

   <script src="js/modernizr.custom.js"></script>

Tạo 1 phần tử html sau:

<nav class="cl-effect-11"><a href="#">Beleaguer</a>

 <a href="#">Lassitude</a>
 <a href="#">Murmurous</a>
 <a href="#">Palimpsest</a>
 <a href="#">Assemblage</a>

</nav>

Bạn chỉ cần thay đổi class cl-effect-xxx.

xxx: từ 1 đến 21 để thay đổi hiệu ứng a:hover

<nav class="cl-effect-15">

  <a href="#">Beleaguer</a>
  <a href="#">Lassitude</a>
  <a href="#">Murmurous</a>
  <a href="#">Palimpsest</a>
  <a href="#">Assemblage</a>

</nav>

Chúc các bạn thành công.!

About TapChi CNTT

One comment

  1. Hay nè, mình dag làm site nộp đồ án, về vọc thử thoy 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.