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

  • HTML/CSS
  • September 5, 2013
  • 0 comment
  • 115 views

Recent posts

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tuần này, Google AI Overviews bắt đầu triển khai đến hơn 100 quốc gia, bao gồm Việt Nam và hỗ […]

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Giám đốc điều hành Apple Tim Cook chia sẻ Apple Intelligence không chỉ đơn thuần là AI tạo sinh, mà […]

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Bản cập nhật iOS 18.1 được Apple phát hành ngày 28/10, đưa một số tính năng AI của Apple Intelligence […]

Apple sắp phát hành iOS 18.1

Apple sắp phát hành iOS 18.1

Dự kiến, iOS 18.1 sẽ chính thức được phát hành cho các mẫu iPhone tương thích vào tuần tới. Hiện, […]

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Một số người dùng vừa nâng cấp lên iPhone 16 phản ánh rằng thiết bị của họ gặp phải tình […]

© 2021 Tạp Chí CNTT. Mr Hoang