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?

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

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

function play[]

{

var audio = document.getElementById["audio"];

audio.play[];

}

Đầ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[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }
```
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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

  
```
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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }
```
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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }
```
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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

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


Panda Walking Animation
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

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[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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
      function play[] 
      {
        var audio = document.getElementById["audio"];
        audio.play[];
      }

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

body
	{
		background: url[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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[//git.io/JUW4t];
		background-size: cover;
		overflow: hidden;
	}
#panda
	{
		position:relative;
		top:600px;
		background: url[//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 element.

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.

Đư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

Toplist mới

Bài mới nhất

Chủ Đề