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