Hướng dẫn can we make animation using html and css? - chúng ta có thể tạo hoạt ảnh bằng html và css không?

Question

Home/Blog/Animate CSS Mã: Tạo hoạt hình Panda với HTML & CSS/Blog/Animate CSS code: create a panda animation with HTML & CSS

Nội dung chính Show

Đưa kỹ năng CSS của bạn lên một tầm cao mớiTìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.CSS theo chủ đề cho các chuyên gia
Khái niệm cơ bản về hoạt hình CSS
Tìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.
Tổng quan về hoạt hình gấu trúc
Viết mã HTML
Đưa kỹ năng CSS của bạn lên một tầm cao mới
Viết mã CSS
HTML có thể được sử dụng cho hoạt hình không?
CSS có thể được sử dụng cho hoạt hình không?
Có phải tốt hơn để sinh động với CSS hoặc JavaScript?
Hoạt hình được thực hiện như thế nào trong CSS?
Hình ảnh CSS có thể được hoạt hình không?

Ngày 06 tháng 10 năm 2020 - 8 phút đọc8 min read

Hướng dẫn can we make animation using html and css? - chúng ta có thể tạo hoạt ảnh bằng html và css không?

Pratik Shukla

Sử dụng CSS, chúng ta có thể tạo các hình ảnh động đẹp của các phần tử HTML mà không cần sử dụng JavaScript. Bạn có thể sử dụng quy tắc @keyframe tích hợp, điều khiển các bước của chuỗi hoạt hình bằng cách xác định kiểu của mỗi khung chính.

Để sử dụng KeyFrames, bạn chỉ cần tạo quy tắc @keyframes và đặt tên cho nó. Tên đó sau đó được sử dụng như một thuộc tính để phù hợp với hoạt hình với khai báo KeyFrame của nó.

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn hoạt hình CSS và tạo một hình ảnh động gấu trúc Keyframe chỉ sử dụng HTML và CSS.

Hôm nay, chúng tôi sẽ bao gồm:

Khái niệm cơ bản về hoạt hình CSS
Tổng quan về hoạt hình gấu trúc
Viết mã HTML
Viết mã CSS
Gói lên

Đưa kỹ năng CSS của bạn lên một tầm cao mớiTìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.CSS theo chủ đề cho các chuyên gia

Khái niệm cơ bản về hoạt hình CSS

Tổng quan về hoạt hình gấu trúckeyframes for our animation. A keyframe is what holds the styles that each element possesses at a given time.

Viết mã HTML

Viết mã CSS

Gói lên

Đưa kỹ năng CSS của bạn lên một tầm cao mới

Tìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.

CSS theo chủ đề cho các chuyên gia

Trong CSS, hoạt hình cho phép chúng ta dần dần thay đổi Kiểu OS một phần tử. Chúng tôi làm điều này trước tiên bằng cách chỉ định các khung chính cho hoạt hình của chúng tôi. Một khung chính là những gì giữ các kiểu mà mỗi phần tử sở hữu tại một thời điểm nhất định. determines the name of the animation

div {
  animation-name: panda;
}

Sử dụng quy tắc @keyframes, chúng tôi chỉ định các kiểu CSS và hoạt hình sẽ dần dần thay đổi thành phong cách mới. Trước tiên chúng ta phải liên kết hoạt hình mong muốn với một yếu tố. this property creates a delay for the beginning of your animation

animation-delay: 5s;

Ví dụ, chúng ta có thể liên kết animation của chúng ta với phần tử

animation-delay: 5s;

0 để dần dần thay đổi màu nền từ màu đỏ sang màu vàng. Hoạt hình này sẽ kéo dài trong 3 giây. this property define how many times an animation will run

animation-iteration-count: 4;

Tài sản

animation-delay: 5s;

1 xác định thời gian một hình ảnh động sẽ mất bao lâu cho đến khi nó hoàn thành. Giá trị mặc định là 0 giây, vì vậy, nếu bạn không chỉ định thuộc tính này, hình ảnh động sẽ không xảy ra. this property defines the speed curve, for example:

Chúng tôi cũng có thể sử dụng tỷ lệ phần trăm khi tạo hình ảnh động CSS. Điều này cho phép bạn sử dụng nhiều thay đổi phong cách hơn. Dưới đây, xem một ví dụ trong đó màu nền của phần tử
```
animation-delay: 5s;
```
0 thay đổi khi hình ảnh động hoàn thành 30%, hoàn thành 50% và hoàn thành 100%.
Thuộc tính cho hoạt hình CSS
Bây giờ chúng tôi đã hiểu những điều cơ bản về cách các thuộc tính CSS hoạt động với R-Rule Keyframe, hãy để thảo luận về các thuộc tính chính có thể được áp dụng cho hoạt hình của bạn để có nhiều chức năng hơn.
```
animation-delay: 5s;
```
3: Xác định tên của hoạt hình

animation-delay: 5s;

4: Thuộc tính này tạo ra sự chậm trễ cho sự khởi đầu của hoạt hình của bạn this property determines if the animation will play forwards or backwards

animation-direction: reverse;

animation-delay: 5s;

5: thuộc tính này xác định số lần hoạt hình sẽ chạy this property determines the style of a target element when the animation is not playing. This is how we override the CSS rule that animations do not alter an element until we play the first keyframe.

```
animation-delay: 5s;
```
6: Thuộc tính này xác định đường cong tốc độ, ví dụ:
```
animation-delay: 5s;
```
7: Tốc độ tương tự từ đầu đến cuối
```
animation-delay: 5s;
```
8: Bắt đầu chậm, sau đó nhanh, kết thúc chậm
```
animation-delay: 5s;
```
9: Bắt đầu chậm

Tổng quan về hoạt hình gấu trúc

Viết mã HTML

Viết mã CSS

Gói lên
Đưa kỹ năng CSS của bạn lên một tầm cao mới
Tìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.
CSS theo chủ đề cho các chuyên gia

Trong CSS, hoạt hình cho phép chúng ta dần dần thay đổi Kiểu OS một phần tử. Chúng tôi làm điều này trước tiên bằng cách chỉ định các khung chính cho hoạt hình của chúng tôi. Một khung chính là những gì giữ các kiểu mà mỗi phần tử sở hữu tại một thời điểm nhất định.sprite sheet. A sprite sheet is a bitmap image file that contains several smaller graphics in a tiled grid arrangement. Take a look at the sprite sheet we will be using for this animation.

Sử dụng quy tắc @keyframes, chúng tôi chỉ định các kiểu CSS và hoạt hình sẽ dần dần thay đổi thành phong cách mới. Trước tiên chúng ta phải liên kết hoạt hình mong muốn với một yếu tố.two files:

animation-iteration-count: 4;

7 and

animation-iteration-count: 4;

8.

Ví dụ, chúng ta có thể liên kết animation của chúng ta với phần tử
animation-delay: 5s;
0 để dần dần thay đổi màu nền từ màu đỏ sang màu vàng. Hoạt hình này sẽ kéo dài trong 3 giây.
Tài sản
animation-delay: 5s;
1 xác định thời gian một hình ảnh động sẽ mất bao lâu cho đến khi nó hoàn thành. Giá trị mặc định là 0 giây, vì vậy, nếu bạn không chỉ định thuộc tính này, hình ảnh động sẽ không xảy ra.

Viết mã HTML

Viết mã CSS

Gói lên

Panda Walking Animation

Đầu tiên, chúng tôi sẽ thêm thẻ
```
animation-iteration-count: 4;
```
9 để biểu thị gốc của tài liệu HTML.
Tiếp theo, chúng tôi sẽ thêm thẻ
```
animation-direction: reverse;
```
0, được sử dụng để hiển thị siêu dữ liệu (bất kỳ thông tin cụ thể nào khác về trang web sẽ không được hiển thị cho người dùng). Ở đây chúng tôi sẽ đặt
```
animation-direction: reverse;
```
1 cho tệp HTML của chúng tôi.
Sau đó, chúng tôi thêm phần tử
```
animation-direction: reverse;
```
2 để liên kết tệp CSS với tệp HTML của chúng tôi. Ở đây, thuộc tính
```
animation-direction: reverse;
```
3 là viết tắt của mối quan hệ, đây là bảng kiểu cho tệp CSS.
```
animation-direction: reverse;
```
4 được sử dụng để liên kết tệp CSS bên ngoài.
Tiếp theo, chúng tôi có yếu tố
```
animation-direction: reverse;
```
5 chính của chúng tôi. Chúng tôi viết mã mà chúng tôi muốn hiển thị trên trang web ở đây. Đầu tiên, chúng tôi thêm phần tử
```
animation-direction: reverse;
```
6, kích hoạt hàm
```
animation-direction: reverse;
```
7 cho âm thanh của chúng tôi.
Tiếp theo, chúng tôi thêm phần tử
```
animation-direction: reverse;
```
8 để lấy tệp âm thanh. Ở đây chúng tôi cung cấp cho nó một
```
animation-direction: reverse;
```
9. Ở đây, chúng ta có thể thấy rằng âm thanh sẽ phát trong một vòng lặp.
Tiếp theo, chúng tôi viết một tập lệnh cho hàm
```
animation-direction: reverse;
```
7, sẽ kích hoạt khi người dùng nhấp vào gấu trúc. Kịch bản sẽ nhận được phần tử âm thanh bằng
```
animation-direction: reverse;
```
9.
Tiếp theo, chúng tôi thêm một bộ phận hoặc một phần cho gấu trúc và sau đó chúng tôi sẽ thêm một yếu tố ____10 khác cho đường phố.

À chính nó đấy. Khá đơn giản, phải không? Bây giờ, hãy để Lừa chuyển sang tệp CSS.

Đưa kỹ năng CSS của bạn lên một tầm cao mới

Tìm hiểu cách phát triển các ứng dụng nhận thức được chủ đề mà không cần thông qua các video hoặc tài liệu. Các khóa học dựa trên văn bản giáo dục rất dễ lướt web và có môi trường mã hóa trực tiếp, làm cho việc học nhanh chóng và hiệu quả.

CSS theo chủ đề cho các chuyên gia

Viết mã CSS

Bây giờ cho hoạt hình CSS! Hãy xem mã dưới đây và tiếp tục đọc để giải thích chi tiết về từng phần.

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

Đầu tiên, chúng ta sẽ thêm hình ảnh nền cho cơ thể. Nó sẽ bao gồm toàn bộ màn hình. Sau đó, chúng tôi thêm

Panda Walking Animation

3 để kiểm soát bố cục cửa sổ chính.

Tiếp theo, chúng tôi sẽ thêm một số phong cách vào gấu trúc của chúng tôi. Chúng tôi đặt nó
```
Panda Walking Animation
```
4 từ trên cùng và thêm hình ảnh thực tế của gấu trúc. Tệp Panda của chúng tôi có chiều rộng
```
Panda Walking Animation
```
5, nhưng chúng tôi chỉ muốn hiển thị hình ảnh đầu tiên trong số 12 hình ảnh. Để làm điều đó, chúng tôi thay đổi chiều rộng và chiều cao.

Chiều cao cho gấu trúc đầu tiên sẽ là
Panda Walking Animation
6. Đối với chiều rộng, chúng tôi chia nó thành 12 phần bằng nhau cho mỗi khung, vì vậy, chiều rộng sẽ là
Panda Walking Animation
7.

Bây giờ chúng tôi thêm hình ảnh động. Hoạt hình đầu tiên được gọi là

Panda Walking Animation

8. Nó sẽ đi qua tất cả 12 hình ảnh của gấu trúc, nhưng nó đã giành được di chuyển từ vị trí ban đầu của nó. Để làm cho nó di chuyển trên trục X, chúng tôi thêm một hình ảnh động khác gọi là

Panda Walking Animation

9 sẽ di chuyển hình ảnh từ trái sang phải trên màn hình.

Panda Walking Animation

8 sẽ đi qua tất cả 12 hình ảnh của gấu trúc. Để làm điều này, chúng tôi di chuyển

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

1 từ

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

2 sang

Panda Walking Animation

var audio = document.getElementById("audio");

audio.play();

}

5, đó là chiều rộng của hình ảnh.

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

4 sẽ di chuyển gấu trúc trên trục x bằng thuộc tính Transform. Chúng tôi sẽ sinh ra gấu trúc tại

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

5, và nó sẽ đi đến cuối màn hình.

Bây giờ chúng tôi thêm đường phố bên dưới gấu trúc. Để làm điều đó, chúng tôi chỉ cần thêm

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}
@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}
@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}
#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}

6 và sau đó đặt vị trí.

Hoan hô! Bây giờ bạn nên có một hoạt hình gấu trúc hoạt động. Hãy xem mã hoàn chỉnh bên dưới và nhấp vào Run Run để xem nó hoạt động trên tab đầu ra.“Run” to see it in action on the Output tab.

Viết Betpratik ShuklaPratik Shukla

Tham gia một cộng đồng gồm hơn 1,4 triệu độc giả. Một email miễn phí, hai tháng một lần với một loạt các bài viết hàng đầu của giáo dục và các mẹo mã hóa.

HTML có thể được sử dụng cho hoạt hình không?

Bạn có thể tạo hình ảnh động với HTML5 bằng cách kết hợp HTML, CSS và JavaScript (JS), mà bạn có thể xây dựng hình dạng. Ngoài ra, bạn có thể kiểm soát hình ảnh động và chỉnh sửa hình ảnh, video và âm thanh bằng các phần tử JS hoặc CSS, tất cả sau đó bạn thêm vào bảng vẽ mà bạn thiết lập với phần tử., with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the

CSS có thể được sử dụng cho hoạt hình không?

Hoạt hình CSS giúp có thể làm động các chuyển tiếp từ cấu hình kiểu CSS này sang cấu hình kiểu CSS khác. Hoạt hình bao gồm hai thành phần, một kiểu mô tả hình ảnh động CSS và một bộ các khung chính biểu thị trạng thái bắt đầu và kết thúc của phong cách hoạt hình, cũng như các điểm trung gian có thể.. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

Có phải tốt hơn để sinh động với CSS hoặc JavaScript?

Tóm lại, chúng ta nên luôn luôn cố gắng tạo hình ảnh động của mình bằng cách sử dụng chuyển đổi/hình ảnh động CSS nếu có thể.Nếu hình ảnh động của bạn thực sự phức tạp, bạn có thể phải dựa vào hình ảnh động dựa trên JavaScript.we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.

Hoạt hình được thực hiện như thế nào trong CSS?

Để tạo hoạt hình CSS, bạn cần ba điều: một yếu tố HTML thành Animate, một quy tắc CSS liên kết hoạt hình với yếu tố này và một nhóm các khung chính xác định các kiểu ở đầu và kết thúc hoạt hình.Bạn cũng có thể thêm khai báo để tùy chỉnh thêm hoạt hình của bạn, như tốc độ và độ trễ.an HTML element to animate, a CSS rule which binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation. You can also add declarations to further customize your animation, like speed and delay.

Hình ảnh CSS có thể được hoạt hình không?

Với CSS, bạn cũng có thể tạo các hiệu ứng động, một trong số đó là một trong số đó là di chuột.Kiểu dáng này, thay đổi phần tử đã chọn trên một con chuột của phần tử, tạm thời áp dụng 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 nó hoặc hiển thị văn bản trên nó.you can also create dynamic effects, a common one of which is hover. This styling, which changes the selected element on a mouseover of the element, temporarily applies another image effect. For example, you can change the image itself or its size, or display text over it.

programming html Animation CSS Keyframe CSS Hover animation CSS Text animation CSS Animation JS animation-iteration-count animation-duration Animation infinite

Hướng dẫn can we make animation using html and css? - chúng ta có thể tạo hoạt ảnh bằng html và css không?

Đưa kỹ năng CSS của bạn lên một tầm cao mớiTìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.CSS theo chủ đề cho các chuyên gia

Khái niệm cơ bản về hoạt hình CSS

Tìm hiểu các phương pháp thực tế xung quanh ứng dụng theo chủ đề và có được trải nghiệm thực hành với chủ đề CSS.

Tổng quan về hoạt hình gấu trúc

Viết mã HTML

Đưa kỹ năng CSS của bạn lên một tầm cao mới

Viết mã CSS

HTML có thể được sử dụng cho hoạt hình không?

CSS có thể được sử dụng cho hoạt hình không?

Có phải tốt hơn để sinh động với CSS hoặc JavaScript?

Hoạt hình được thực hiện như thế nào trong CSS?

Hình ảnh CSS có thể được hoạt hình không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội