CSS hoạt hình ảnh

Các hiệu ứng hình ảnh mà bạn có thể thiết lập bằng CSS, xác định cách hình ảnh được cung cấp cho người dùng. Bài viết này mô tả cách tạo các hiệu ứng cơ bản, hình ảnh di chuột qua và hình ảnh động thông qua các cấu hình tham số trong biểu định kiểu CSS chính của bạn và—nhanh hơn và linh hoạt hơn—trong Cloudinary

Đây là các chủ đề

• Tạo hiệu ứng hình ảnh cơ bản với CSS
• Tạo di chuột bằng CSS
• Tạo hiệu ứng động bằng CSS
• Tạo hiệu ứng hình ảnh động với Cloudinary
  • Hình đại diện cho video
  • phần đệm nhận biết nội dung
  • phòng trưng bày sản phẩm
  • Tổng hợp ảnh động
• Bạn muốn tìm hiểu thêm về hình ảnh CSS?

Tạo hiệu ứng hình ảnh cơ bản với CSS

Sao chép liên kết đến tiêu đề này

Phần này ghi lại năm hiệu ứng CSS cơ bản mà bạn có thể tùy chỉnh hình ảnh trang web của mình để có trải nghiệm người dùng phong phú và hấp dẫn

Góc tròn

Sao chép liên kết đến tiêu đề này

Hiệu ứng các góc bo tròn phổ biến mang lại cảm giác mềm mại hơn. Nếu bạn bắt đầu với một hình ảnh vuông, bạn có thể bo tròn các cạnh của nó từ hơi mềm đến tròn hoàn toàn. Chỉ cần đặt thuộc tính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

4 với giá trị ở định dạng

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

5,

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

6 hoặc

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

7

Bạn cũng có thể định cấu hình riêng từng góc, tạo hình dạng hình chữ nhật. Để làm điều đó, hãy chỉ định các giá trị theo thứ tự trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải và dưới cùng bên trái. Xem ví dụ này

/* slighty_rounded */
img {
  border-radius: 15px;
}

/* ellipse from rectangle or circle from square*/
img {
  border-radius: 50%;
}

Hình thu nhỏ của hình ảnh

Sao chép liên kết đến tiêu đề này

Đóng vai trò là trình giữ chỗ cho các liên kết đến một trang web hoặc trang khác, hình thu nhỏ đặc biệt hữu ích trong các phòng trưng bày sản phẩm trên các trang web thương mại điện tử. Với hình thu nhỏ của hình ảnh dưới dạng xem trước, khán giả có thể quyết định có nhấp vào chúng để xem chi tiết hay không

Để tạo một hình thu nhỏ, hãy chỉ định các thuộc tính hình ảnh của nó, chẳng hạn

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

Đoạn mã trên tạo một hình thu nhỏ có kích thước phù hợp để ốp lát trong thư viện. Đường viền màu xám nhạt với các cạnh tròn xác định hình thu nhỏ là tương tác

Hình nền toàn trang

Sao chép liên kết đến tiêu đề này

Hình nền toàn trang là một lựa chọn tuyệt vời để tô điểm cho các trang web, nhưng hãy đảm bảo chọn những hình ảnh không gây choáng ngợp. Những hình nền này đặc biệt lý tưởng cho những hình ảnh có độ phân giải cao mà bạn muốn hiển thị ở kích thước đủ lớn mà không cần khán giả mở riêng chúng

Để tạo nền toàn trang, hãy thêm thuộc tính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

8 vào kiểu dáng

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

9 hoặc

body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

0 của bạn, sau đó chỉ định cách bạn muốn nền được lấp đầy. Dưới đây là các tùy chọn

• body {
    background: url(example.jpg);
    background-position: center;
    background-size: cover;
  }
  

  1. Đặt kích thước ban đầu

• body {
    background: url(example.jpg);
    background-position: center;
    background-size: cover;
  }
  

  2. Đặt chiều dài hình ảnh

• body {
    background: url(example.jpg);
    background-position: center;
    background-size: cover;
  }
  

  3. Đặt chiều rộng và chiều cao của hình ảnh theo tỷ lệ phần trăm của phần tử gốc

• body {
    background: url(example.jpg);
    background-position: center;
    background-size: cover;
  }
  

  4. Thay đổi kích thước hình ảnh để che khung nhìn, đôi khi cần kéo dài hoặc cắt xén

• body {
    background: url(example.jpg);
    background-position: center;
    background-size: cover;
  }
  

  5. Thay đổi kích thước hình ảnh thành kích thước tối đa có thể vừa với khung nhìn mà không cắt xén

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

8 thường được kết hợp với

body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

7, căn giữa hình ảnh trong khung nhìn;

Ví dụ này tạo ra một hình ảnh toàn màn hình ở giữa

________số 8

Kích thước hình ảnh đáp ứng

Sao chép liên kết đến tiêu đề này

Hình ảnh đáp ứng tự thay đổi kích thước trong thời gian thực để phù hợp với kích thước trình duyệt của người dùng, bảo vệ thiết kế trang của bạn bằng cách đảm bảo rằng hình ảnh không lấn át trang web của bạn trên màn hình nhỏ hơn và hình ảnh lớn hơn được hiển thị trên màn hình lớn hơn

Để làm cho hình ảnh đáp ứng đầy đủ, hãy xác định một số truy vấn phương tiện trong mã CSS của bạn để chỉ định hình ảnh nào sẽ hiển thị cho từng kích thước màn hình; . Tiếp theo, đặt các điểm dừng xác định vị trí giao diện chuyển từ hình ảnh này sang hình ảnh khác. Để biết chi tiết, xem bài viết này. Cách tạo hình ảnh cho thiết kế web đáp ứng

Ngoài ra, bạn có thể thêm khả năng phản hồi cơ bản bằng cách chỉ định chiều cao hoặc chiều rộng tối đa cho hình ảnh và đặt thuộc tính khác thành

body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

1. Vui lòng chỉ định giá trị chiều rộng theo tỷ lệ phần trăm hoặc chiều rộng khung nhìn

Ví dụ sau hiển thị hình ảnh ở 70 phần trăm chiều rộng của khung nhìn

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

9

Để biết thêm chi tiết, hãy xem các bài viết của chúng tôi về thay đổi kích thước CSS và thay đổi kích thước JavaScript

Chuyển đổi hình ảnh

Sao chép liên kết đến tiêu đề này

Với thuộc tính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

90, bạn có thể áp dụng hiệu ứng hai chiều (2D) hoặc ba chiều (3D) cho hình ảnh.

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

90 cung cấp các tùy chọn để chia tỷ lệ, xoay, nghiêng và thay đổi phối cảnh hình ảnh. Khi được kết hợp với JavaScript hoặc các mô-đun hoạt hình, thuộc tính này có thể thêm các góc quay hoặc chuyển động đang hoạt động vào hình ảnh

Thuộc tính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

90 khá mới, không được hỗ trợ đầy đủ bởi các trình duyệt cũ hơn. Để đảm bảo rằng

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

90 hoạt động ở đó, hãy thêm tiền tố vào thuộc tính là

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

94,

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

95 và

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

96, như trong ví dụ bên dưới, biểu thị phép biến đổi làm xoay và làm lệch hình ảnh

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

7

Tạo Hover Với CSS

Sao chép liên kết đến tiêu đề này

Với CSS, bạn cũng có thể tạo các hiệu ứng động, một trong số đó phổ biến là hover. Kiểu dáng này, làm thay đổi phần tử đã chọn khi di chuột qua phần tử, tạm thời áp dụng một hiệu ứng hình ảnh khác. Ví dụ: bạn có thể thay đổi hình ảnh hoặc kích thước của hình ảnh hoặc hiển thị văn bản trên đó

Cảnh báo. Các lớp giả di chuột có thể gây ra lỗi trên các trình duyệt di động như Chromium

Đoạn mã sau làm cho hình ảnh

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

97 có kích thước đầy đủ khi được di chuột qua

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

9

Bạn có thể thay đổi bất kỳ yếu tố nào khác trên trang của mình theo cách tương tự. Ví dụ: mã này thay đổi độ mờ của hình ảnh

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

0

Tạo hiệu ứng động bằng CSS

Sao chép liên kết đến tiêu đề này

Hoạt hình, bổ sung tính linh hoạt cho hình ảnh, có thể làm cho chúng có tính tương tác trong khi tận dụng các hiệu ứng được mô tả ở trên cùng với các hiệu ứng khác. Bạn có thể tạo kiểu cho hình ảnh bằng hoạt ảnh theo một trong hai cách, như được mô tả bên dưới

Chuyển đổi giữa hai hình ảnh khi di chuột

Sao chép liên kết đến tiêu đề này

Một cách để áp dụng hiệu ứng hình ảnh di chuột qua là dường như mờ dần giữa các hình ảnh khi người dùng di chuột qua chúng. Bạn làm điều đó bằng cách xếp chồng một hình ảnh lên trên hình ảnh kia và thay đổi độ mờ của hình ảnh trên cùng. Đoạn mã bên dưới tạo hiệu ứng mờ dần và mờ dần, hiệu ứng này bắt đầu khi con trỏ di chuyển qua hình ảnh và đảo ngược ngay khi con trỏ di chuyển ra xa. Phần trên cùng đảm bảo rằng hiệu ứng hoạt động trong các trình duyệt Chrome và Firefox cũ hơn

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

1

Chuyển đổi giữa hai hình ảnh trên bộ hẹn giờ

Sao chép liên kết đến tiêu đề này

Một hình ảnh động khác mà bạn có thể tạo là với các khung hình chính, một mô-đun CSS cho phép tạo thông qua định nghĩa về trạng thái hình ảnh và cấu hình hành vi của chúng

Mã bên dưới tạo hoạt ảnh hoán đổi giữa hai hình ảnh được chọn. Phần trên cùng xác định mẫu hoạt hình khung hình chính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

2

Tiếp theo, áp dụng mẫu đó cho hình ảnh của bạn, xác định các hiệu ứng chuyển tiếp, số lần lặp lại hoạt ảnh, thời lượng của hoạt ảnh, v.v. Mã bên dưới làm cho hình ảnh mờ dần trong vòng lặp 10 giây

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

3

Đối với Chrome, Mozilla hoặc Safari

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

0

Đối với Internet Explorer

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

1

Tạo hiệu ứng hình ảnh động với Cloudinary

Sao chép liên kết đến tiêu đề này

Dịch vụ dựa trên đám mây để quản lý hình ảnh và video, Cloudinary cung cấp gói đăng ký miễn phí mãi mãi hào phóng. Khi ở trên nền tảng đó, bạn có thể tải lên hình ảnh của mình, áp dụng các hiệu ứng, bộ lọc và sửa đổi tích hợp sẵn. Bạn cũng có thể tạo các hiệu ứng hình ảnh khó hoặc không thể tạo chỉ bằng CSS

Ngoài ra, bạn có thể chuyển đổi hình ảnh theo chương trình bằng SDK hoặc các tham số URL đơn giản. Cloudinary áp dụng các thay đổi một cách linh hoạt, giữ nguyên hình ảnh gốc của bạn. Điều đó có nghĩa là bạn có thể sửa đổi hình ảnh một cách nhanh chóng khi thiết kế trang web của bạn phát triển và khi bạn hỗ trợ nhiều thiết bị và kích thước màn hình hơn—một sự tiện lợi và tiết kiệm thời gian rất lớn

Các phần phụ bên dưới mô tả cách áp dụng một vài hiệu ứng thú vị cho hình ảnh với Cloudinary—ngoài những gì bạn có thể làm với các bộ lọc hình ảnh CSS thông thường. Mỗi phần phụ liên kết đến trang Sách dạy nấu ăn trên nền tảng đám mây với nhiều chi tiết hơn

Hình đại diện cho video

Sao chép liên kết đến tiêu đề này

Với Cloudinary, bạn có thể dễ dàng tạo hình thu nhỏ cho nội dung video và đăng lên các trang video phổ biến, bao gồm YouTube, Hulu, Dailymotion, Vimeo và Animoto. Sử dụng khung hình đầu tiên của video làm hình thu nhỏ

Một cách để tạo hình thu nhỏ là thêm vào cuối URL video tên trang web video (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

98) và ID video (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

99), theo sau là định dạng hình ảnh (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

70 hoặc

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

71). Ví dụ

Đang tải ví dụ về mã

Bạn cũng có thể xếp chồng các hiệu ứng để tùy chỉnh hình thu nhỏ. Ví dụ: thêm tính năng cắt xén thông minh (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

72) với tiêu điểm là khuôn mặt (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

73) và hiệu ứng bộ lọc (

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

74), như thế này

Đang tải ví dụ về mã

Phần đệm nhận biết nội dung

Sao chép liên kết đến tiêu đề này

Bằng cách áp dụng phần đệm nhận biết nội dung với tham số

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

75, bạn có thể để Cloudinary tự động đặt phần đệm xung quanh hình ảnh của mình bằng màu khớp với các pixel đường viền, màu chủ đạo, màu tương phản chủ đạo hoặc màu của các pixel đường viền. Ví dụ

b_auto. đường viền

b_auto. chiếm ưu thế

b_auto. border_contrast

b_auto. predominant_contrast

Để nâng cao, hãy chỉ định các thuộc tính

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

76,

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

77 và

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

78

Ví dụ

predominant_gradient. 2. crossover_desc

predominant_gradient_contrast. 4

Phòng trưng bày sản phẩm

Sao chép liên kết đến tiêu đề này

Phòng trưng bày sản phẩm được xây dựng bằng hình ảnh hiển thị trên Đám mây với băng chuyền tương tác, một khả năng khó triển khai chỉ với CSS. Quá trình này yêu cầu một tiện ích JavaScript thuần túy, gọn nhẹ có tên là

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

79, bạn có thể thêm tiện ích này vào các trang của mình trong tích tắc

Sau đó, bạn có thể hiển thị hình ảnh và video tĩnh với hiệu ứng quay 360 độ. Bạn cũng có thể kích hoạt hoán đổi nhấp chuột với hình ảnh, mũi tên hoặc cuộn

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

79 thậm chí còn hỗ trợ hình ảnh 360 độ tương tác. Hiệu ứng xoay được điều khiển bằng chuyển động của chuột, bạn có thể giới hạn ở một mặt phẳng duy nhất (như trong ví dụ bên dưới) hoặc đặt thành 3D đầy đủ. Cái sau đặc biệt hữu ích để hiển thị các sản phẩm 3D

Tổng hợp hình ảnh động

Sao chép liên kết đến tiêu đề này

Bạn có thể dễ dàng tạo hình ảnh động hoặc video thông qua phương pháp

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

91 của Cloudinary bằng cách kết hợp các hình ảnh vào một mục duy nhất. Xác định hình ảnh được đề cập bằng thẻ mà bạn chỉ định

Đây là những việc cần làm

1. Lập trình xác định thẻ mà bạn muốn nhắm mục tiêu

   Khi định nghĩa được thực thi, Cloudinary sẽ trả về phản hồi với URL của hình ảnh mới

2. Thêm URL vào nội dung trang web của bạn để hiển thị hình ảnh

   Ví dụ mã này, được viết bằng Nút. js, tạo GIF động

   img {
     border: 2px solid #ddd;
     border-radius: 3px;
     padding: 5px;
     width: 350px;
   }
   

   2

Đây là phản hồi

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

3

GIF động trông như thế này

Đang tải ví dụ về mã

Tìm hiểu thêm về Cloudinary

Sao chép liên kết đến tiêu đề này

Bên cạnh khả năng tạo hiệu ứng hình ảnh, Cloudinary còn cung cấp vô số công cụ mạnh mẽ cho các nhà phát triển web, bao gồm các công cụ sau