Google Doodle animation bằng CSS3

Hẳn là các bạn đã từng quen với các hiệu ứng động mà Google thường mang đến cho chúng ta ngay trên trang chủ của họ, được gọi với cái tên là Google Doodle. Hôm nay chúng ta sẽ bắt chước làm một kiểu đơn giản của họ, điều đặc biệt trong hiệu ứng này là tất cả đều được làm bằng html và CSS3, không sử dụng bất kì một đoạn script nào.

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần có khung html như sau :

<div id="logo">
	<div class="frame">
		<img src="muybridge12-hp-v.png" />
	</div>

	 
	<label for="play_button" id="play_label"></label>
	<input type="checkbox" id="play_button" name="play_button" />

	 
	<span id="play_image">
		<img src="muybridge12-hp-p.jpg" />
	</span>

	<div class="horse"></div>
	<div class="horse"></div>
	<div class="horse"></div>
</div>

Trong đoạn html bên trên chúng ta có sử dụng vài hình ảnh , và các ảnh này các bạn có thể save tại mục demo hoặc tải về máy tại mục download nhé.

CSS

Đây chính là phần trọng tâm của bài viết này, các bạn tham khảo chi tiết để thấy được những khả năng mà CSS3 mang lại cho chúng ta nhé.

* {margin: 0; padding: 0;}

#logo {position: relative;}

.horse {
	awidth: 469px; height: 54px;
	background: url(https://www.google.co.in/logos/2012/muybridge12-hp-f.jpg);
}

.frame {position: absolute; left: 0; top: 0; z-index: 1;}

/*Clicking the label will select the checkbox which will be used to
trigger the animation of the horses*/

#play_button:checked ~ .horse {
	-webkit-animation: horse-ride 0.5s steps(12, end) infinite;
	-webkit-animation-delay: 2.5s;
	-moz-animation: horse-ride 0.5s steps(12, end) infinite;
	-moz-animation-delay: 2.5s;
	/*Lets add a pre-anim which will start slowly and merge into the fast animation*/
	background-position: -2412px 0;
	-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
	-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

/*Hide the play image*/
#play_button:checked ~ #play_image img{
	left: -68px;
	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
}

/*804px is the awidth of the image with 12 horse frames
steps are used in the animation to have the best animation effect
it will position the horse frames accurately in the boxes instead of
tweening it px by px all the way through*/
@-webkit-keyframes horse-ride {
	0% {background-position: 0 0;}
	100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
	0% {background-position: 0 0;}
	100% {background-position: -804px 0;}
}

#play_button {display: none;}
#play_label {
	awidth: 67px; height: 54px;
	display: block;
	position: absolute; left: 201px; top: 54px; z-index: 2;
}
#play_image {position: absolute; left: 201px; top: 54px; z-index: 0;
	overflow: hidden; awidth: 68px; height: 55px;
}
#play_image img {position: absolute; left: 0; top: 0;}

Mình hy vọng qua bài viết này, các bạn sẽ hiểu rõ hơn về những tính  năng có trong CSS3 cũng như cách làm hiệu ứng động với thuộc tính animation.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster