Hướng dẫn animation up down css - hoạt ảnh lên xuống css
Từ khi chúng ta có thể tạo hình động (Animation) trong CSS, nên việc xây dựng các trang web có hiệu ứng chuyển động mượt mà không còn quá khó khăn.Animation) trong CSS, nên việc xây dựng các trang web có hiệu ứng chuyển động mượt mà không còn quá khó khăn. Show Đối với các trang web mà bạn đang thực hiện, đôi khi không cần phải đập đi xây lại. Chỉ cần thêm một hoặc hai hiệu ứng animation để làm cho nó sinh động, thú vị hơn. Lưu ý: Đừng lạm dụng CSS Animation mà khiến website trở thành con rùa. Trong bài viết này, mình muốn cung cấp những phần quan trọng nhất để bạn có thể tạo ra hiệu ứng thú vị với CSS Animation. Thiết kế chuyển động với CSS Animation Mình cũng làm một ví dụ nhỏ ở cuối bài viết này để bạn có thể tham khảo. Mục lục: 1. Các thuộc tính Animation 2. Tìm hiểu về Keyframes 3. Tạo CSS Animation 4. Ví dụ CSS Animation thực tế 1. Các thuộc tính Animation2. Tìm hiểu về Keyframesthuộc tính animation trong lúc viết css cho phần tử hoặc thuộc tính phụ của nó. 3. Tạo CSS Animationduration), thời gian (timing), độ trễ (delay) và một số thứ khác. 4. Ví dụ CSS Animation thực tế Việc thiết lập một animation được thực hiện bằng cách gán thuộc tính animation trong lúc viết css cho phần tử hoặc thuộc tính phụ của nó. Để bắt đầu tạo ra các hiệu ứng chuyển động thú vị với CSS Animation, bạn phải biết cách thiết lập thời lượng (duration), thời gian (timing), độ trễ (delay) và một số thứ khác. Để làm quen với các thuộc tính này và hiểu chúng có thể làm gì, hãy cùng xem chi tiết bên dưới đây: Thuộc tính #1: Ví dụ: Chúng ta muốn thiết lập chu kỳ chuyển động là 4s, thế thì chúng ta sẽ thiết lập như sau: 1 nếu bạn muốn nó lặp lại mãi mãi.Thuộc tính #2: Ví dụ: Chúng ta muốn sau khi tải xong phần tử thì chờ 2 giây sau mới bắt đầu chu kỳ chuyển động đầu tiên: Thuộc tính #3: 0 - Xác định có bao nhiêu chu kỳ chuyển động sẽ được lặp lại, nó có thể được đặt thành 1 nếu bạn muốn nó lặp lại mãi mãi.
6 đến 5.
6 đến 5 và chu kỳ thứ hai sẽ được phát từ 5 đến 6.Thuộc tính #5: Những thuộc tính ở bên trên mà mình mô tả ở trên là phổ biến nhất và được sử dụng thường xuyên nhất.
Thuộc tính #7: Thuộc tính #8: ms1 - Cho phép tạm dừng và khởi động lại chuỗi chuyển động.Ok, Bây giờ bạn đã biết các thuộc tính CSS Animation làm gì, vì thế chúng ta có thể chuyển sang bước tiếp theo, đó là 2. Tìm hiểu về Keyframe Để xác định hành vi tùy chỉnh cho phần tử, bạn phải thiết lập một chuỗi hành động.
Chúng ta đang xác định kiểu ít nhất hai bước:
Chúng ta cũng có thể thay đổi: 5 thành ms 7
Vì vậy, trong ví dụ trên, chúng ta đã tạo ra một keyframe gọi là Nó thay đổi chiều cao của phần tử từ Mẹo: Thay vì thay đổi chiều cao ( Trong bước tiếp theo, chúng ta sẽ thêm chuyển động này vào phần tử HTML để bạn thấy cách nó hoạt động. 3. Tạo CSS AnimationChúng ta có thể tạo một hình ảnh động bằng cách sử dụng viết tắt hoặc gán giá trị cho từng thuộc tính. Để đặt nó thành một dòng, các thuộc tính sẽ được sắp xếp lần lượt như sau: 0, 3, ms 0, ms 1 ;Nếu bạn là người mới bắt đầu tìm hiểu về CSS và CSS Animation, mình khuyến nghị bạn gán giá trị riêng cho từng thuộc tính để dễ dàng nắm bắt. Note: Như ví dụ bên dưới! Ngoài ra, điều đáng ghi nhớ là Nếu bạn không thiết lập Bây giờ, hãy thử thiết lập animation cho phần tử, như sau:
Trong đoạn code trên, chúng ta đã chỉ định một
Thiết lập một animation cũng rất dễ thôi phải không? 4. Ví dụ CSS Animation thực tếTrong các bước trên, bạn đã học làm thế nào để thiết lập một hiệu ứng chuyển động animation. Tại đây, hãy vận dụng nó để tạo ra một ví dụ thú vị nhé. Chúng ta sẽ tạo ra một hiệu ứng loading... Có rất nhiều cách để tạo ra một hiệu ứng loading sử dụng animation. Như ví dụ bên dưới đâ, chúng ta sẽ tạo ra 4 hình vuông và thay đổi chiều cao của chúng để tạo ra hiệu ứng sóng. Hãy tập trung vào thuộc tính Bạn cần nhớ, Xin hãy nhìn vào ví dụ bên dưới để xem cách nó hoạt động thực sự: Lưu ý: Bạn cần vào Codepen.io để vượt CAPTCHA trước. Sau đó quay lại F5 bài viết để xem ví dụ minh họaCodepen.io để vượt CAPTCHA trước. Sau đó quay lại F5 bài viết để xem ví dụ minh họa See the Pen Ví dụ CSS Animation by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.
Lưu ý #2: Mình đã thêm thuộc tính Có nghĩa là:
Nếu bạn không thiết lập thuộc tính Điều này khiến cho hiệu ứng không được mượt mà cho lắm. Chúc mừng bạn đã biết sử dụng CSS AnimationTrong bài viết này, chúng ta đã cùng tìm hiểu về những thuộc tính quan trọng nhất của CSS Animation.CSS Animation. Đây là một phần mình thấy thú vị nhất trong lập trình Front end. Mình cũng đã giải thích chi tiết từng thuộc tính CSS Animation có thể làm gì, keyframe hoạt động ra sao và giúp bạn thiết lập một CSS Animation thực thế.CSS Animation có thể làm gì, keyframe hoạt động ra sao và giúp bạn thiết lập một CSS Animation thực thế. Mình hy vọng bạn sẽ thấy bài viết này hữu ích, và sẽ sử dụng nó như là bước đầu tiên để xây dựng các hiệu ứng thú vị của riêng mình. Còn nếu như bạn đã biết nhiều về CSS Animation, hãy chia sẻ những suy nghĩ của bạn về chúng trong phần bình luận để cùng thảo luận nhé.CSS Animation, hãy chia sẻ những suy nghĩ của bạn về chúng trong phần bình luận để cùng thảo luận nhé. --- HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay! Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT: 02435574074 - 0968051561Email: Fanpage: https://facebook.com/NIIT.ICT/ #niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python |