CSS3 3D Butterfly – Con bướm xinh phiên bản CSS3

Lục Đức Thành

Tết sắp đến rồi, làm cái gì cho nó có không khí Tết không khí xuân nhỉ? Nhớ tầm này năm ngoái, đi đâu cũng nghe thấy Con bướm xuân remix của Hồ Quang Hiếu, rộn ràng lắm. Năm nay MyLop.BanMai.Info sẽ cho ra mắt Con bướm xinh phiên bản CSS3, hứa hẹn sẽ rộn ràng không kém, các bạn chờ nha! 😀

CSS3 3D Butterfly – Con bướm xinh phiên bản CSS3

View Demo   Download Files


Xem bản Con bướm xinh Web Screensaver   Download Files

Bước 0: Chuẩn bị

Bạn chỉ cần chuẩn bị một ảnh nền mùa xuân, thật đẹp vào:

Ảnh nền hiệu ứng Con bướm xinh phiên bản CSS3

Và một nửa cánh bướm như thế này:

wing butterfly - một nửa cánh bướm

Rồi, hãy đưa bướm cho tôi, việc của bạn đã xong, tất cả các việc còn lại để tôi lo!

Bước 1: Viết code HTML

Cực kỳ đơn giản, chỉ cần 4 thẻ <div> như thế này:

HTML Code:
1
2
3
4
5
6
7
8

<div id="container">
	<div id="butterfly">
		<div id="leftwing">
		</div>
		<div id="rightwing">
		</div>
	</div>
</div>

Chúng ta sẽ ghép 2 nửa cánh bướm #leftwing và #rightwing thành một con bướm #butterfly.

Bước 2: Viết code CSS định vị trí bướm

CSS cho #container phía ngoài cùng:

CSS Code:
1
2
3
4
5
6
7
8
9

div#container{
	background: url(../img/wiese.jpg) no-repeat;
	background-size: 100% 100%;
 
	perspective: 600px;
	perspective-origin: 0% 0%;
 
	width: 100%; height: 100%; color: white; margin: 0 auto;
}

CSS cho con bướm #butterfly bao ngoài:

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

div#butterfly{
	position: absolute;
	left: 0px; top: 0px;
	width: 366px; /* Bề rộng = 2 nửa cánh bướm */
	height: 208px; /* Chiều cao bướm */
 
	transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	transform-origin: 80% 50%;
 
	transform-style: preserve-3d;
	animation: butterflyAni 5s linear infinite;
}

Con bướm #butterfly sẽ bay một vòng tròn nhờ vào hoạt hình butterflyAni được mô tả ở bước sau.

CSS cho 2 cánh bướm #leftwing và #rightwing:

CSS Code:
1
2
3
4
5
6
7
8
9
10

div#leftwing{
	position: absolute;
	left:0px; top:0px; width: 178px; height: 208px;
	background: url(../img/wing.png) no-repeat;
 
	transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
	transform-origin: top right;
 
	animation: leftWingAni 0.2s linear infinite;
}

Cánh bướm trái #leftwing sẽ vỗ quanh nó nhờ vào hoạt hình leftWingAni được mô tả ở bước sau.

CSS Code:
1
2
3
4
5
6
7
8
9
10

div#rightwing {
	position: absolute;
	left:178px; top:0px; width: 178px; height: 208px;
	background: url(../img/wing.png) no-repeat;
 
	transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg) ;
	transform-origin: top right;
 
	animation: rightwingani 0.2s linear infinite;
}

Cánh bướm phải #rightwing sẽ vỗ quanh nó nhờ vào hoạt hình rightWingAni được mô tả ở bước sau.

Bước 3: CSS để tạo các hoạt hình

Tạo hoạt hình butterflyAni để cả con bướm #butterfly bay một vòng tròn:

CSS Code: butterflyAni
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@-keyframes butterflyAni {
	from {
		transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	25% {
		transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	50% {
		transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	75% {
		transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	to {
		transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
}

Tạo hoạt hình leftWingAni để cánh bướm trái #leftwing vỗ cánh:

CSS Code: leftWingAni
1
2
3
4
5
6
7
8
9
10
11

@-keyframes leftWingAni {
	from {
		transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
	}
	50% {
		transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
	}
	to{
		transform:rotateX(90deg) rotate3d(0, 1, 0, 00deg);
	}
}

Tạo hoạt hình rightWingAni để cánh bướm phải #rightwing vỗ cánh:

CSS Code: rightWingAni
1
2
3
4
5
6
7
8
9
10
11

@-keyframes rightWingAni {
	from {
		transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
	50% {
		transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
	}
	to {
		transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
}

Vậy là xong rồi đấy, tận hưởng thành quả nhé:

View Demo   Download Files

Bạn có thể xem bản con bướm bay một vòng tròn mà cánh không vỗ để hiểu rõ vấn đề hơn:

Xem bản không vỗ cánh   Download Files

Để ngắn gọn, xúc tích, dễ hiểu, các đoạn code trên đã bỏ qua việc cấu hình để chạy được trên tất cả các trình duyệt. Bạn tải file về tìm hiểu kỹ hơn nhé, đó là bản đầy đủ nhất

Bài này rất dễ hiểu về ý tưởng, dễ làm nếu các bạn chỉ copy, paste, chứ nếu các bạn tự code thì chắc là xác định cũng căng đấy! Chúc các bạn làm thực hành thành công!

Theo: eleqtriq.com

P.S: Khi xem Demo, các bạn nhấn F11 để xem toàn màn hình nhé, như vậy là chúng ta đã có một màn hình chờ Con bướm xinh đón Tết rộn ràng rồi đấy!

Cheers,

The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy YouTube channel

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.

Các bài viết tương tự:

  1. Create a CSS Flipping Animation – Tạo hiệu ứng lật 3D bằng CSS3
  2. Tổng hợp một số công cụ tạo mã CSS3 nhanh chóng
  3. CSS Background Animations – Tạo hoạt hình đám mây trôi đơn giản
  4. CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS
  5. Một số hiệu ứng text-shadow đẹp mắt [Phần 1]
  6. The Shapes of CSS – Tạo các khối hình học bằng CSS
  7. Image Map Rollover Effect Tutorial with Dreamweaver, CSS3 and jQuery
  8. Tìm hiểu về CSS Triangle bằng hoạt hình

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website