Làm Web

  • Design
  • Freebies
  • Tuts
  • Tools
  • Development
    • HTML / CSS
    • JavaScript
    • PHP
    • Ghost
  • WordPress
  • Info
    • Photography

Flappy Bird Bay Khắp Trang Web Với CSS3

By Thien Do • 15/02/2014 • Tuts

Thời gian vừa qua chắc hẳn các bạn đã nghe nhiều về game Flappy Bird trên di động làm mưa làm gió trên toàn thế giới, do lập trình viên Nguyễn Hà Đông thực hiện, và hình ảnh chú chim mỏ đỏ chắc đã “ám ảnh” các bạn trong suốt những ngày qua. Trong bài viết hôm nay, mình sẽ hướng dẫn các bạn làm thế nào để có một vật thể bay khắp trang web với CSS3 (mình đem con flappy bird ra làm ví dụ để giúp các bạn “ám ảnh” hơn nữa thôi).

Demo

Đang bay ở trên

Flappy Bird gif

flappy-bird

HTML

<div class="flappybird"></div>

CSS

.flappybird {
	background:url('http://www.lamweb.com/wp-content/uploads/2014/02/flappy-bird.gif') no-repeat;
	background-position: 0 0;
	width:85px;
	height:60px;
	opacity:0;
	right:0;
	top:150px;
	position:absolute;
	z-index:100;
	-webkit-animation: flappybirdAnimation infinite 20000ms linear 2s;
	-moz-animation: flappybirdAnimation infinite 20000ms linear 2s;
	-ms-animation: flappybirdAnimation infinite 20000ms linear 2s;
	-o-animation: flappybirdAnimation infinite 20000ms linear 2s;
}

@-moz-keyframes flappybirdAnimation{
	from {
		background-position:-85px 0;
		-webkit-transform: translate(700px, -60px) rotate(-37deg);
		opacity:1;
	}
	17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
	20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
	22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
	25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
	27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
	30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
	50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
	51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
	71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
	73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
	76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
	78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
	81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
	83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
	to {
		background-position:0 0;
		-webkit-transform: translate(700px, 369px) rotate(37deg);
		opacity:1;
	}
}

@-webkit-keyframes flappybirdAnimation{
	from {
		background-position:-85px 0;
		-webkit-transform: translate(700px, -60px) rotate(-37deg);
		opacity:1;
	}
	17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
	20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
	22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
	25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
	27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
	30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
	50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
	51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
	71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
	73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
	76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
	78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
	81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
	83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
	to {
		background-position:0 0;
		-webkit-transform: translate(700px, 369px) rotate(37deg);
		opacity:1;
	}
}

@-ms-keyframes flappybirdAnimation{
	from {
		background-position:-85px 0;
		-webkit-transform: translate(700px, -60px) rotate(-37deg);
		opacity:1;
	}
	17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
	20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
	22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
	25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
	27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
	30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
	50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
	51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
	71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
	73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
	76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
	78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
	81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
	83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
	to {
		background-position:0 0;
		-webkit-transform: translate(700px, 369px) rotate(37deg);
		opacity:1;
	}
}

Animation trong CSS3

Để tạo ra các animation trong CSS3, bạn sẽ phải hiểu về quy tắc @keyframes.

Quy tắc @keyframes là nơi mà animation được tạo ra. Chỉ định một style CSS bên trong quy tắc @keyframes và animation sẽ dần thay đổi từ style hiện tại sang style mới.

Một animation là một hiệu ứng cho phép một yếu tố dần dần thay đổi từ một style này qua một style khác. Bạn có thể thay đổi nhiều thành nhiều style mà bạn muốn.

Xác định khi nào thì sự thay đổi sẽ xảy ra theo phần trăm ( % ), hoặc các từ khóa “from” và “to”, nó cũng giống như 0% và 100% vậy.

0% là lúc bắt đầu của animation, 100% là khi animation hoàn tất. Để các trình duyệt hỗ trợ tốt nhất, bạn nên luôn định nghĩa cả 0% và 100%.

Theo ví dụ trên, animation flappybirdAnimation được tạo ra và có sự thay đổi từ 0% (from) đến 100% (to).

Khi các animation được tạo ra trong @keyframes, bạn cần phải gọi nó trong selector, nếu không các animation sẽ không có hiệu lực.

Ví dụ:

-webkit-animation: flappybirdAnimation infinite 15000ms linear 3s;
-moz-animation: flappybirdAnimation infinite 15000ms linear 3s;
-ms-animation: flappybirdAnimation infinite 15000ms linear 3s;
-o-animation: flappybirdAnimation infinite 15000ms linear 3s;

Hỗ Trợ Trình Duyệt

Internet Explorer 10, Firefox, and Opera hỗ trợ quy tắc @keyframes và các animation property.

Chrome and Safari yêu cầu prefix -webkit-.

Lưu ý: Internet Explorer 9 và các phiên bản trước đó không hỗ trợ @keyframes hoặc animation property.

bài học CSS3CSS animationsCSS3flappy birdhiệu ứng CSShiệu ứng CSS3học CSShọc CSS3thủ thuật CSS3
Tweet
0
12 E-Book Miễn Phí Cho Các Web Designer
Download Miễn Phí Các Square Icon PSD

About the Author

Thien Do

Là một PHP developer nhưng mình muốn tìm hiểu nhiều hơn về CSS và JavaScript. Mình yêu thích những trang web đẹp và sáng tạo, đó là lý do tại sao mà mình thích chia sẻ chúng với các bạn.

You Might Also Like

  • leave page

    Xác nhận chuyển trang

  • border radius

    Bo góc với CSS3

  • jquery_show_pass1

    Hiển thị password với jquery

  • Form vaidation

    Kiểm tra dữ liệu của form với HTML5

Liên hệ mua trang web này

Email: info@thiendo.com
Phone: 0914 22 12 02

Bài viết được quan tâm

CSS position: fixed Trong Các Trình Duyệt Di Động

On 08/07/2013
01

Xu Hướng Mới Trong Thiết Kế Web

On 06/08/2013
02

19 Ví Dụ về Thiết Kế Web Tối Giản

On 16/07/2013
03

25 Bài Hướng Dẫn Tạo Hiệu Ứng Chữ Đẹp với CSS3

On 16/06/2013
04

Fontbox.vn – Thư viện Font Tiếng Việt tuyệt đẹp

On 05/06/2013
05

Find us on Facebook

Lamweb.com
Facebook Twitter

LÀM WEB - CHIA SẺ THÔNG TIN, XU HƯỚNG, CÔNG NGHỆ VÀ CÁC THỦ THUẬT WEB

© 2019 LamWeb.com - All rights reserved.