CSS3 Tạo hiệu ứng lá thu rơi

Hôm nay mình hướng dẫn các bạn tạo hiệu ứng lá thu rơi bằng CSS3. Nếu kết hợp với JavaScript thì sẽ đẹp và hay hơn, nhưng nội dung đó xin dành cho bài viết tiếp theo.

CSS3 tạo hiệu ứng lá thu rơi

Lưu ý: Chỉ trình duyệt Chrome hỗ trợ các thuộc tính CSS3 này.

Các thẻ HTML

Bạn tạo file HTML và thêm section sau vào.

<section id="falling-demo">
	<div id="container">
		<div class="leaf-01">
			<img src="images/leaves-01.png">
		</div>
		<div class="leaf-02">
			<img src="images/leaves-02.png">
		</div>
		<div class="leaf-03">
			<img src="images/leaves-03.png">
		</div>
	</div>
</section>

Định dạng bằng CSS

Định dạng chung. Tạo khung viền, ẩn nội dung tràn ra ngoài, căn giữa khung…

#container {
	border: 2px solid yellow;
	width: 400px;
	height: 400px;
	margin: auto;
	overflow: hidden;
	position: relative;
	top: 100px;
}

Cho những chiếc lá vị trí ban đầu là bên ngoài khung. Thiết lập hiệu ứng animation là fall, trình diễn tuyến tính, thời gian 5 giây và lặp vô tận.

.leaf-01,
.leaf-02,
.leaf-03 {
	top: -100px;
	position: absolute;
	-webkit-animation: fall linear 5s infinite;
}

Thiết lập riêng vị trí ban đầu – tính từ bên trái – cho từng chiếc lá. Và thời gian hoãn.

.leaf-01 {
	left: 150px;
	-webkit-animation-delay: 0s;
}

.leaf-02 {
	left: 050px;
	-webkit-animation-delay: 2s;
}

.leaf-03 {
	left: 250px;
	-webkit-animation-delay: 5s;
}

Cuối cùng, tạo các @keyframes tên fall. Tùy từng thời điểm trên timeline, bạn cho trạng thái của lá khác nhau để có cảm giác như lá đang rơi thật.

@-webkit-keyframes fall {
	0% {
		top: 000px;
		-webkit-transform: rotate(30deg);
		opacity: 1;
		-moz-opacity: 1;
		filter:alpha(opacity=10);
	}

	40% {
		-webkit-transform: rotate(50deg);
	}

	80% {
		-webkit-transform: rotate(80deg);
	}

	95% {
		opacity: 1;
		-moz-opacity: 1;
		filter:alpha(opacity=10);
	}

	100% {
		-webkit-transform: rotate(100deg);
		top: 300px;
		left: 0px;
		opacity: 0;
		-moz-opacity: 0;
		filter:alpha(opacity=0);
	}
}

Xong. Mặc dù hiệu ứng còn đơn giản. Nhưng hy vọng qua bài viết này, các bạn hiểu rõ thêm cách sử dụng thuộc tính animation, sử dụng @keyframes cùng các thuộc tính transform, animation-delay…

3 thoughts on “CSS3 Tạo hiệu ứng lá thu rơi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s