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

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

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:

HTML Code:
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:

CSS Code:
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:

CSS Code:
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ó idanimate-area:

CSS Code:
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,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
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.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website