Chương 17-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: 13/3/2025, 3:36

Lượt xem: 1244

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ề Chương trình học

Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Chương 17-Bài 2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS

CSS Motion-Path

Step 1: chuẩn bị hình ảnh

Step 2: tạo file HTML chèn hình ảnh

Step 3: tạo file CSS

Kết quả:

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Chương 17-Bài 2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS

CSS Motion-Path

Step 1: chuẩn bị hình ảnh

Step 2: tạo file HTML chèn hình ảnh

Step 3: tạo file CSS

Kết quả:

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập