Hoạt ảnh trong một trang web có thể thu hút nhiều người dùng hơn. Hãy tự hỏi bản thân điều này - nếu bạn thấy một trang web có khá nhiều hoạt ảnh, bạn có muốn khám phá thêm không? Giờ đây, với các chuyển đổi CSS, bạn có thể làm cho tác phẩm của mình trở nên sống động với một số hoạt ảnh tuyệt vời. Và, nhớ bạn, những điều này cần phải được thực hiện đúng. Hãy khám phá thế giới của Chuyển đổi CSS theo thứ tự sau:
- Tại sao phải chuyển đổi CSS?
- Thuộc tính chuyển đổi
- Bạn cần chỉ định những gì?
- Thuộc tính chức năng chuyển tiếp-thời gian-chức năng
- Thuộc tính Chuyển tiếp-Độ trễ
Tại sao phải chuyển đổi CSS?
Hãy lấy một ví dụ. Nếu bạn thay đổi màu của một phần tử từ trắng sang xanh lam, sự thay đổi này gần như ngay lập tức. Để có hiệu ứng động hơn, bạn có thể thực hiện thay đổi này dần dần. Điều này trông khá hấp dẫn về mặt hình ảnh. Bằng cách bật chuyển tiếp CSS, bạn có thể tùy chỉnh cách các thay đổi xảy ra. Bạn có thể xác định cách các thay đổi trong các phần tử xảy ra trong các khoảng thời gian cụ thể theo đường cong gia tốc.
Chuyển đổi CSS cho phép bạn xác định các thay đổi cho các yếu tố, khoảng thời gian cụ thể, tốc độ của đường cong gia tốc và hơn thế nữa. Bạn có thể làm tất cả những điều này mà không cần sử dụng Flash hoặc JavaScript .
Để hiểu rõ hơn, bạn có thể tham khảo hình ảnh bên dưới:
Trong hình trên, phần tử HTML sẽ chuyển từ màu đỏ sang màu xanh lam trong vòng một giây. Bạn cũng sẽ thấy màu trung gian khi quá trình chuyển đổi đang diễn ra. Nếu bạn không sử dụng chuyển tiếp CSS, bạn sẽ nhận thấy rằng sự thay đổi màu sắc từ đỏ sang xanh là ngay lập tức - bạn sẽ không thấy màu trung gian. Với các hiệu ứng chuyển tiếp CSS, bạn sẽ nhận thấy hiệu ứng động khi các phần tử HTML chuyển từ trạng thái cũ sang trạng thái mới.
Thuộc tính chuyển đổi
Bạn có thể sử dụng thuộc tính chuyển tiếp tốc ký để kiểm soát quá trình chuyển đổi CSS. Việc sử dụng tốc ký này không chỉ dễ dàng mà còn có thể tránh các thông số không đồng bộ có thể khá khó chịu khi gỡ lỗi trong CSS.
Thuộc tính chuyển tiếp chỉ định các thuộc tính CSS mà bạn muốn có hiệu ứng chuyển tiếp. Chỉ các thuộc tính CSS này là hoạt ảnh.
Cú pháp:
chuyển tiếp:
Khi mới bắt đầu, bạn có thể gặp một số khó khăn trong việc sử dụng tốc ký. Nếu bạn nghĩ rằng việc sử dụng tốc ký hơi phức tạp đối với bạn lúc này, bạn có thể chỉ định các thuộc tính chuyển tiếp riêng biệt. Đối với một phần tử HTML, bạn có thể chỉ định từng thuộc tính chuyển đổi như được hiển thị trong ví dụ dưới đây:
cách cài đặt php windows 10
div {width: 100px height: 100px background: lightblue transfer-property: width transfer-time: 2s transfer-timing-function: linear transfer-delay: 1s} div: hover {width: 300px}Di chuột qua hộp
Trong ví dụ trên, chúng ta đã chỉ định các thuộc tính (thuộc tính chuyển tiếp, thời gian chuyển tiếp, thời gian chuyển tiếp-chức năng và độ trễ chuyển tiếp) và các giá trị của chúng một cách riêng biệt. Chúng ta sẽ tìm hiểu về các thuộc tính chuyển đổi này ngay sau đây.
Bạn cần chỉ định những gì?
Có hai điều chủ yếu mà bạn cần chỉ định để tạo chuyển tiếp CSS: thuộc tính CSS muốn thêm hiệu ứng và khoảng thời gian của hiệu ứng đó.Bạn cần lưu ý một điều - khi bạn không chỉ định khoảng thời gian, quá trình chuyển đổi sẽ có giá trị mặc định là 0 và sẽ không có bất kỳ ảnh hưởng nào.
Hãy xem xét một ví dụ:
Đoạn mã dưới đây xác định hiệu ứng chuyển tiếp của thuộc tính width trong khoảng thời gian năm giây.
div {width: 100px height: 100px background: blue transfer: width 5s} div: hover {width: 600px}Di chuyển con trỏ qua phần tử div ở trên để xem hiệu ứng chuyển tiếp.
Trong đoạn mã trên, bạn sẽ thấy rằng khi bạn di con trỏ qua hộp màu xanh lam, hộp màu xanh lam sẽ tăng dần chiều rộng của nó trong khoảng thời gian năm giây. Bạn cũng sẽ nhận thấy rằng khi bạn loại bỏ con trỏ khỏi hộp màu xanh lam, hộp màu xanh lam sẽ trở lại kích thước ban đầu dần dần (không phải ngay lập tức). Bạn cũng có thể thay đổi các giá trị cho chiều rộng và khoảng thời gian để xem thuộc tính chuyển đổi này ảnh hưởng như thế nào đến phần tử HTML.
Bạn cũng có thể thêm hiệu ứng chuyển tiếp vào nhiều thuộc tính. Bạn có thể làm như vậy bằng cách sử dụng dấu phẩy để phân tách các thuộc tính. Hãy xem xét một ví dụ:
Trong đoạn mã dưới đây, thuộc tính chuyển đổi được chỉ định cho chiều rộng, chiều cao và chuyển đổi.
div {padding: chiều rộng 15px: chiều cao 150px: nền 100px: màu xanh lá cây chuyển tiếp: chiều rộng 2 giây, chiều cao 2 giây, chuyển đổi 2 giây} div: hover {chiều rộng: 300px chiều cao: 200px biến đổi: xoay (360deg)} Chào thế giới (Di chuột qua tôi)
Với ví dụ trên, bạn sẽ thấy cách hộp màu xanh lá cây di chuyển khi bạn di chuột qua hộp.
phân tích tâm lý twitter bằng cách sử dụng spark
Chúng tôi đã chỉ định tài sản và khoảng thời gian. Hãy xem các thông số khác với nhiều ví dụ khác nhau.
Thuộc tính chức năng chuyển tiếp-thời gian-chức năng
Thuộc tính này xác định đường cong tốc độ cho hiệu ứng chuyển tiếp. Nó có thể nhận các giá trị sau:
- Giá trị dễ dàng: Đây là giá trị mặc định trong đó hiệu ứng chậm ở đầu, sau đó nhanh hơn và kết thúc chậm.
- Giá trị tuyến tính: Hiệu ứng này không làm thay đổi tốc độ của quá trình chuyển đổi - nó giữ cho tốc độ nhất quán từ đầu đến cuối.
- Giá trị dễ dàng: Hiệu ứng này bắt đầu từ từ.
- Giá trị dễ dàng: Hiệu ứng này có một kết thúc chậm.
- Giá trị Ease-in-out: Hiệu ứng này bắt đầu chậm cũng như kết thúc chậm.
- Giá trị khối-bezier (n, n, n, n): Bạn có thể chỉ định bộ giá trị của riêng mình trong hàm khối-bezier.
Đoạn mã dưới đây hiển thị các hiệu ứng chuyển tiếp cho các giá trị tuyến tính, dễ dàng, dễ vào, dễ lấy ra và dễ lấy ra.
div {width: 100px height: 100px background: pink transfer: width 2s} # div1 {transfer-timing-function: linear} # div2 {transfer-timing-function: easy} # div3 {transfer-timing-function: easy-in } # div4 {transfer-timing-function: easy-out} # div5 {transfer-timing-function: easy-in-out} div: hover {width: 300px}Di chuột qua các phần tử div bên dưới
tuyến tính
giảm bớt
dễ dàng trong
thoải mái
dễ vào
Thuộc tính Chuyển tiếp-Độ trễ
Đôi khi, bạn muốn hoạt ảnh xuất hiện sau một khoảng thời gian nhất định. Thuộc tính độ trễ chuyển tiếp cho phép bạn chỉ định độ trễ cho hiệu ứng chuyển tiếp. Bạn có thể chỉ định độ trễ tính bằng giây.
chuỗi trong java là gì
Hãy lấy một ví dụ để xem độ trễ trong hiệu ứng chuyển tiếp:
div {width: 100px height: 100px background: yellow transfer: width 3s transfer-delay: 1s} div: hover {width: 300px}Di chuột qua phần tử div bên dưới
Ghi chú: Bạn có thể quan sát thấy độ trễ 1 giây trước khi hiệu ứng bắt đầu
Trong đoạn mã trên, khi bạn di chuột qua hộp màu vàng bằng con trỏ, bạn sẽ nhận thấy (trong một giây) rằng không có hiệu ứng nào. Sau một giây chờ đợi, bạn sẽ nhận thấy hiệu quả.
Với điều này, chúng ta đến phần cuối của bài viết Chuyển đổi CSS này. Bạn có thể thêm hoạt ảnh vào các Trang web của mình ngay bây giờ. Hãy thử những ví dụ này.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “CSS Transition” và chúng tôi sẽ liên hệ lại với bạn.