Thiết kế web căn bản - HTML CSS JS NenTang.vn Chương 15-Bài 2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS Tác giả: Dương Nguyễn Phú Cường Ngày đăng: 1 năm trước CSS Motion-Path Đây là thuộc tính mới của CSS hỗ trợ cho việc đi chuyển đối tượng theo 1 đường vẽ (path) được định sẵn. Step 1: chuẩn bị hình ảnh Có thể sử dụng hình ảnh dạng PNG, JPG hay hình hoạt ảnh để hiệu ứng được đẹp hơn. Trong ví dụ sẽ sử dụng hình ảnh GIF để minh họa. Chép hình ảnh vào thư mục của dự án. Step 2: tạo file HTML chèn hình ảnh Tạo file index.html Nội dung file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hiệu ứng Animation Motion Path CSS</title> <link rel="stylesheet" href="app.css"> </head> <body> <div id="motion-demo"> <img src="img/giphy.webp" /> </div> </body> </html> Step 3: tạo file CSS Tạo file app.css Nội dung file: #motion-demo { offset-path: path('M 0 0 L 0 175'); /* vẽ đường path theo chiều dọc để object chạy theo */ animation: move 3000ms infinite alternate ease-in-out; /* hoạt cảnh diễn ra trong 3s và lặp lại liên tục theo gia tốc */ width: 200px; height: 200px; background: cyan; border: 1px solid red; margin: 30px auto; transform: rotate(-90deg); } #motion-demo img { width: 100%; height: 100%; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } Kết quả: Truy cập để xem demo: http://frontend-basic.learning.nentang.vn/example/tao-hieu-ung-animation-motion-path-css/index.html Về trang chủ Về Khóa học Bài học trước Bài học tiếp theo Sản phẩm của Nền tảng NenTang.vn