Cách sử dụng hiệu quả hoạt ảnh CSS3: Hướng dẫn, Mã mẫu và Ví dụ

Bài viết được viết bởi:
  • Thiết kế website
  • Cập nhật: Tháng Tám 28, 2013

Khi chúng tôi sử dụng JS và jQuery, chúng tôi có toàn quyền kiểm soát hoạt ảnh và chúng tôi có thể tạo ra một số hiệu ứng tuyệt vời, nhưng giá khá cao. Thời gian xử lý, tương thích trình duyệt chéo (thiết bị di động, ví dụ, khá khác khi nói đến JS) và độ phức tạp của mã chính là những điểm mà chúng ta nên lưu ý khi tạo giao diện động.

Vì vậy, hôm nay chúng ta sẽ thấy cách tránh JS bằng cách sử dụng CSS Animations and Transitions. Chúng ta sẽ thảo luận từ các bước cơ bản đối với một số hiệu ứng tuyệt vời, như các bảng accordion và các menu phụ động.

Lấy một chỗ ngồi, bạn notepad và một trình duyệt thực (bất cứ điều gì nhưng IE) và chúng ta hãy bắt đầu.

Lam nong lên

Chúng ta có một vài lợi thế (và bất lợi như mọi thứ trong cuộc sống của chúng ta) trong việc sử dụng các hình động CSS. Nếu bạn cần bán chúng cho sếp hoặc khách hàng của bạn, đây là những gì bạn nên ghi nhớ:

  • Chúng có khả năng nhanh hơn, vì chúng có thể tận dụng khả năng tăng tốc phần cứng (như các triển khai HTML5)
  • Chúng sẽ hoạt động tốt hơn trên thiết bị di động và sẽ không cần mã cụ thể để theo dõi sự kiện chạm
  • JS cần được trình duyệt giải thích và khả năng phá vỡ trình duyệt sẽ lớn hơn nhiều. Vì vậy, khi CSS không thành công, nó không hoạt động âm thầm trong khi JS có thể phá vỡ toàn bộ trang
  • Họ có hỗ trợ trình duyệt khá tốt (trang web này sẽ giúp bạn kiểm tra các thống kê cụ thể về điều đó: http://caniuse.com/#search )

Ví dụ về hoạt ảnh CSS3

Trước khi chúng ta bắt đầu vào phần cốt lõi của bài đăng này, chúng ta hãy xem một số hình ảnh động đẹp mắt được làm bằng CSS thuần túy.

Pure CSS Twitter Fail Whale

Cá voi không hoạt hình

Được tạo bởi Steven Dennis, thấy điều này trong hành động.

Pure Coke cuộn cuộn có thể
Ví dụ về hoạt ảnh CSS 3: Cuộn Coke Can

Được tạo bởi Roman Cortes, thấy điều này trong hành động.

Pure CSS Walking Man

Ví dụ về hoạt ảnh CSS 3: The Walking Man

Được thực hiện bởi Andrew Hoyer, thấy điều này trong hành động.

Bắt tay của bạn bẩn

Hãy bắt đầu mã. Chúng tôi sẽ sử dụng rất nhiều lớp CSS giả để kích hoạt hoạt ảnh. Thành thật mà nói, rất nhiều nhà phát triển khuyên bạn nên sử dụng JS để kích hoạt và bỏ kích hoạt hoạt ảnh, nhưng ở đây chúng ta sẽ thấy cách dễ dàng hơn:

#test {nền: đỏ; } #test: hover {nền: xanh; } #test: active {nền: màu xanh; } #test: đích {nền: đen; }

Chúng tôi có một vài lớp giả khác để sử dụng, nhưng bạn đã có ý tưởng! Vì vậy, đây là những gì sẽ xảy ra nếu bạn nhấp vào phần tử #test (giả sử đó là một liên kết):

  • Trạng thái bình thường: Nền sẽ có màu đỏ
  • Di chuột: Khi chuột vào khu vực phần tử, nó sẽ có nền màu xanh lục
  • Hoạt động: Khi bạn nhấp vào con trỏ trên đó và trong khi nút chuột vẫn được nhấn, màu nền sẽ có màu xanh dương
  • Mục tiêu: Khi trang hiện tại có #test trong URL, phần tử này sẽ có màu đen

Mỗi một trong số này có thể được sử dụng cho các hoạt ảnh CSS, ví dụ bạn có thể tạo các liên kết 2 để kích hoạt và hủy kích hoạt hoạt ảnh CSS sử dụng phần tử giả mục tiêu với mã này:

<a href='#test'> kích hoạt </a> <a href='#'> hủy kích hoạt </a>

Chuyển tiếp CSS

Quá trình chuyển đổi CSS sẽ thay đổi từ trạng thái ban đầu sang trạng thái kết thúc suôn sẻ. Vì vậy, bạn sẽ xác định trong bộ chọn chính bằng cách sử dụng thuộc tính "chuyển đổi" thời gian và mỗi thuộc tính sẽ bị ảnh hưởng và cách hoạt ảnh sẽ như thế nào. Hãy xem một ví dụ:

.test {/ * hàm thời gian chuyển đổi thuộc tính thời gian chuyển đổi, * / color: blue; quá trình chuyển đổi: 2 màu, cỡ 2 dễ dàng; } .test: hover {màu: đỏ; } .test: active {font-size: 200%; }

Khi bạn di chuyển phần tử .test nó sẽ thay đổi dần dần màu từ xanh sang đỏ (bảng màu đẹp, huh?). Khi bạn nhấp vào phần tử, kích thước phông chữ sẽ dần dần tăng lên 200% của kích thước phông chữ mặc định.

Chúng tôi cũng có thuộc tính “thời gian chuyển đổi”, được đặt là dễ dàng, rằng “thời gian” có sẵn cho hoạt ảnh sẽ được chi tiêu như thế nào. Dưới đây là các giá trị có thể có:

  • Tuyến tính: Tốc độ tương tự từ đầu đến cuối
  • Dễ dàng: Bắt đầu chậm
  • Dễ dàng: Kết thúc chậm
  • Dễ: Bắt đầu chậm, nhanh ở giữa, sau đó làm chậm
  • Dễ ra: Bắt đầu chậm, kết thúc chậm
  • Khối bezier (a, b, c, d): Tốc độ tùy chỉnh

Hàm Bezier khối sẽ tạo ra một hình ảnh động tùy chỉnh với các số 4 thay đổi từ 0 thành 1, biểu thị đường cong toán học cho thời lượng hoạt ảnh X.

Để có khả năng tương thích trình duyệt tốt hơn, bạn nên cân nhắc việc sử dụng tiền tố của nhà cung cấp cho opera, Firefox và webkit như sau:

div {chiều rộng: 400px; -o-trans: width 2s; -moz-quá trình: 2 chiều rộng; -webkit-quá trình: 2s chiều rộng; chuyển tiếp: chiều rộng 2s; }

Ngoài ra, bạn có thể sử dụng các truy vấn phương tiện để xác định các chuyển đổi khác nhau tùy thuộc vào độ rộng của trình duyệt (thiết bị di động, máy tính bảng). Đây là một ví dụ đơn giản:

body {font-size: 1em; } Màn hình @media và (max-width: 800px) {body {font-size: 0.8em; }} Màn hình @media và (max-width: 400px) {body {Font-size: 0.7em; }}

Ở đây kích thước phông chữ sẽ được thay đổi đột ngột khi bạn tăng chiều rộng của trình duyệt. Mã này sẽ ngăn điều đó xảy ra, cho phép chuyển đổi mượt mà hơn nhiều:

cơ thể {-o-quá trình chuyển đổi: cỡ chữ .5s tuyến tính; -moz-quá trình chuyển đổi: cỡ chữ .5s tuyến tính; -webkit-quá trình chuyển đổi: kích thước phông chữ .5s tuyến tính; chuyển tiếp: kích thước phông chữ .5s tuyến tính; }

Bạn cũng có thể sử dụng điều này nếu bạn có các màn hình hoặc kích thước khác nhau cho chân dung / phong cảnh, nếu bạn muốn thay đổi chiều rộng, màu sắc, phần đệm, hiển thị menu.

CSS Animation - Bắt đầu thực sự thú vị

Các hình ảnh động là một chuỗi các quá trình chuyển đổi được xác định trong một bộ chọn duy nhất. Để xác định hoạt ảnh CSS, bạn cần thực hiện theo các bước 2.

Quy tắc @keyframe được sử dụng để xác định chuỗi các bước hoạt ảnh và được xác định bằng tên duy nhất và các kiểu mô tả cách hoạt ảnh này hoạt động. Như thường lệ, chúng ta sẽ cần một số tiền tố của nhà cung cấp, như trong ví dụ này:

/ * cùng mã cho mỗi nhà cung cấp * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * tên hoạt hình * / @keyframe my-animation {/ * bộ chọn khung * / 0% {/ * kiểu khung * / Trái: 0px; Hàng đầu: 0px; } 25% {Trái: 200px; Hàng đầu: 0px; } 50% {Trái: 200px; Hàng đầu: 200px; } 75% {Trái: 0px; Hàng đầu: 200px; } 100% {Trái: 0px; Hàng đầu: 0px; }}

Vì vậy, mỗi kiểu được xác định bởi khung / khung thời gian (như các khung hình từ hoạt ảnh flash) dưới dạng phần trăm và các kiểu sẽ được áp dụng ở đó. Ví dụ, keyframe này nói rằng phần tử sẽ di chuyển sang trái, sau đó trên cùng, sau đó sang phải, rồi xuống dưới.

Sau khi bạn đã làm theo bước 1 và tạo khung hình chính của bạn, bạn thực sự có thể áp dụng nó cho một phần tử. Sau đó, chúng tôi sẽ sử dụng khá nhiều logic giống như chúng tôi đã thực hiện với quá trình chuyển đổi CSS, sự khác biệt là bây giờ "chuyển đổi" của chúng tôi là một hoạt ảnh phức tạp.

Để áp dụng nó, chúng ta sẽ sử dụng thuộc tính animation và nó có các thuộc tính con của 7:

  • Tên: số nhận dạng duy nhất đó
  • Thời lượng: Mất bao lâu từ 0% thành 100%
  • Chức năng thời gian: khá giống với hàm thời gian chuyển tiếp
  • Trì hoãn: Mất bao lâu để bắt đầu 0%
  • Số lần lặp lại: Chúng ta sẽ có bao nhiêu lần lặp lại ("vô hạn" cho một vòng lặp vô hạn)
  • Hướng: bình thường hoặc thay thế (đảo ngược)
  • Trạng thái phát: nếu hoạt ảnh đang chạy hoặc bị tạm dừng

Điều này sẽ áp dụng hoạt ảnh của chúng tôi cho phần tử #test khi đó là mục tiêu của trang:

#test: mục tiêu {/ * tên hoạt hình | thời lượng | chức năng thời gian | độ trễ | số lần lặp | hướng | play-state * / animation: my-animation 10s tuyến tính vô hạn chạy bình thường; }

Với điều này trong tâm trí chúng ta có thể tạo ra một vài ví dụ tuyệt vời.

CSS Chỉ Accordion

Chúng tôi sẽ tạo các bảng có thể thu gọn để sử dụng hoạt ảnh CSS. Đây là cấu trúc HTML cơ bản:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> Tab 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Tab 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Điều này sẽ chỉ tạo ra các bảng và liên kết sẽ kích hoạt mỗi một trong số chúng. Và đây là nơi ma thuật xảy ra:

/ * bất kỳ div nào nằm trong accordion * / .accordion div {/ * được ẩn theo mặc định * / height: 0; tràn: ẩn; / * ma thuật đen * / quá trình chuyển đổi: chiều cao 1s; } / * khi div được đề cập là đích * / .accordion div: target {/ * height: auto sẽ không hoạt động, nhưng điều này sẽ hoạt động tốt * / height: 80px; }

Khá đơn giản, huh? Và bạn đã dành toàn bộ cuộc sống của bạn bằng cách sử dụng JS cho điều này? :)

Menu chỉ CSS với menu con

Và đây là một ứng dụng khá đơn giản khác. Bạn chắc chắn có một menu điều hướng trong trang web của bạn, và thường chúng ta cần phải sử dụng một số menu con ở đó. Cách tốt nhất để hiển thị và ẩn các mục là sử dụng jQuery, phải không? Vâng, hãy nghĩ lại sau khi bạn kiểm tra mã này:

<nav> <ul> <li> <a href='#item1'> Mục 1 </a> <div> <ul> <li> <a href='#item11'> Mục 1.1 </a> </ li> <li> <a href='#item12'> Mục 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Mục 2 </a> <div> <ul> <li> <a href='#item21'> Mục 2.1 </a> </ li> <li> <a href='#item22'> Mục 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

Và thuật sĩ bắt đầu ở đây:

một {/ * chỉ làm cho các liên kết trở nên tốt hơn * / display: block; phần đệm: 4px; } nav {text-align: centre; } / * bất kỳ menu nào (bao gồm cả menu chính) * / nav ul {display: inline-block; danh sách kiểu: không có; } nav> ul> li {/ * các mục nằm ngang (dọc cũng sẽ hoạt động tốt) * / float: left; } nav li div {/ * thu gọn bất kỳ menu phụ * / height: 0; tràn: ẩn; / * Cảm xúc Houdini * / chuyển tiếp: chiều cao 1s; } nav li: hover> div {height: 56px; }

Tổng hợp Up

Đây chắc chắn chỉ là hướng dẫn bắt đầu. Có rất nhiều hiệu ứng thú vị khác có thể được thực hiện bằng cách sử dụng các hoạt ảnh CSS duy nhất và rất nhiều thứ chắc chắn chưa đến.

Vì vậy, bạn đã sử dụng điều này trước đây chưa? Bạn có thể nghĩ ra một ứng dụng tốt khác cho hoạt ảnh CSS không? Chia sẻ suy nghĩ của bạn bằng cách sử dụng các bình luận!

Giới thiệu về Olive Oliveira

Tôi là một nhà thiết kế web và doanh nhân từ Itajubá (MG), Brasil. Tôi thích viết về những chủ đề tối nghĩa và làm một số thứ hay ho.

Kết nối: