Background animations là một kỹ thuật mạnh mẽ, tạo được hiệu quả bất ngờ nếu bạn biết sử dụng một cách đúng đắn. Trước kia, để làm được việc này, ta phải dùng JavaScript khá phức tạp. May thay, từ khi CSS3 ra đời vài năm gần đây, mọi việc trở nên đơn giản hơn. MyLớp.edu.vn xin giới thiệu tới bạn một ví dụ đơn giản tạo hoạt hình đám mây trôi bằng cách cuộn ảnh nền từ phải sang trái.

CSS Background Animations – Tạo hoạt hình đám mây trôi đơn giản

CSS Background Animations – Hoạt hình mây trôi đơn giản

View Demo   Download Files

Bước 1: Tạo một phần tử trong HTML

Hết sức đơn giản, chỉ cần thế này:

1

<div id="animate-area"></div>

Bước 2: Làm việc với CSS

Các bạn tạo ra một hoạt hình có tên là animatedBackground:

1
2
3
4

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Đoạn hoạt hình này sẽ làm thay đổi tọa độ chiều ngang của ảnh nền từ 0 đến 100%, tức là kéo ảnh nền từ phải sang trái cho đến khi cạnh phải của ảnh nền trùng với cạnh phải của phần tử. Để tương thích với nhiều trình duyệt, đoạn code CSS có thể sẽ dài hơn thế này:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Cuối cùng, áp dụng hoạt hình animatedBackground vào phần tử có id là animate-area:

1
2
3
4
5
6
7
8
9
10
11
12

#animate-area	{ 
	width: 560px;
	height: 210px;
	background-image: url(bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
 
	animation: animatedBackground 40s linear infinite;
	-ms-animation: animatedBackground 40s linear infinite;
	-moz-animation: animatedBackground 40s linear infinite;
	-webkit-animation: animatedBackground 40s linear infinite;
}

Thuộc tính animation: animatedBackground 40s linear infinite; sẽ áp dụng hoạt hình animatedBackground trong khoảng thời gian 40 giây và lặp lại mãi mãi nhờ giá trị infinite.

Đây là một ví dụ hết sức đơn giản, ở các bài viết sau, MyLớp.edu.vn sẽ cùng bạn tìm hiểu về kỹ thuật tạo hiệu ứng đám mây chuyển động phức tạp, hấp dẫn hơn.

View Demo   Download Files

Theo: David Walsh

Cheers,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017