Tạo hiệu ứng button chuyển màu cực cool bằng CSS3

Việc hiểu biết CSS3 sẽ giúp ích rất nhiều cho các bạn tìm được việc làm ưng ý sau này. Vì thế hôm nay mình xin chia sẻ với các bạn một hiệu ứng đơn giản mà CSS3 mang lại cho chúng ta, qua bài viết này, các bạn sẽ có thể hiểu rõ hơn về cách sử dụng animation và @keyframes rule có trong CSS3. Trước hết các bạn nên xem Demo của bài viết này,hoặc download trực tiếp về máy.

Xem Demo | Download

Đầu tiên chúng ta sẽ tạo một file html để chứa các button cần tạo hiệu ứng.

<a class="button" id="rgb">RGB</a>
<a class="button" id="namedcolors">Named Color</a>
<br />
<a class="button" id="hue">HUE</a>
<a class="button" id="saturation">Saturation</a>
<a class="button" id="lightness">Lightness</a>
<br />
<a class="button" id="topflat">Top Flat</a>
<a class="button" id="bottomflat">Bottom Flat</a>

Bây giờ chúng ta sẽ lần lượt tạo hiệu ứng chuyển màu cho từng nút bấm (button) bằng CSS3 :

Bước 1 : Tạo thuộc tính chung cho các nút bấm (button)

.button {
	/*
		Chúng ta sẽ tạo một hiệu ứng màu đen trắng kiểu gradient bằng cách giảm Opacity xuống còn 60%.
		Với hiệu ứng gradient này, chúng ta sẽ kết hợp với 'background-color' để tạo ra các hiệu ứng chuyển động màu sắc sau này.
	*/
	background-image: linear-gradient(
		rgba(255,255,255,0.6),
		rgba(0,0,0,0.6)
	);

	display: inline-block;
	height: 70px; awidth: 120px;
	line-height: 70px;
	margin: 5px;
	color: white;
	font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

Bước 2 : Chúng ta sẽ tạo hiệu ứng chuyển màu  đầu tiên cho nút bấm RGB (với id=”rgb”)

#rgb {
	background-color: #FF0; /* Màu vàng */
	animation: rgb 3s infinite alternate;
	-webkit-animation: rgb 3s infinite alternate; /*Dùng cho Safari và Chrome*/
}
@keyframes rgb {
	/* 0% sẽ có màu mặc định là màu vàng */
	50% {background-color: #06F; /* Màu xanh*/ }
	100% {background-color: #F00; /* Màu đỏ */}
}

/*Dùng cho Safari và Chrome*/
@-webkit-keyframes rgb {
	/* 0% sẽ có màu mặc định là màu vàng */
	50% {background-color: #06F; /* Màu xanh*/ }
	100% {background-color: #F00; /* Màu đỏ */}
}

Trong đoạn css trên , hiệu ứng của chúng ta sẽ chuyển màu trong khoảng thời gian 3s, lặp lại liên tục. Để có thể thời gian cũng như số lần lặp lại của hiệu ứng thì các bạn thay đổi ở phần animation  , còn nếu muốn hiệu ứng sẽ thay dổi thế nào thì các bạn chỉnh sửa ở phần @keyframes với giá trị từ 0% -> 100%.

Bước 3 : Làm tượng tự cho các nút bấm còn lại, tùy vào việc hiển thị màu mà chúng ta sẽ có những hiệu ứng khác nhau, các bạn thử tham khảo những hiệu ứng sau đây cho các button còn lại nhé.

#namedcolors {
	background-color: red;
	animation: namedcolors 0.3s infinite alternate;
	-webkit-animation: namedcolors 0.3s infinite alternate;/*Dùng cho Safari và Chrome*/
}
@keyframes namedcolors {
	100% {background-color: orange;}
}
/*Dùng cho Safari và Chrome*/
@-webkit-keyframes namedcolors {
	100% {background-color:orange;}
}

#hue {
	background-color: hsl(0, 100%, 50%); /* Màu đỏ */
	animation: hue 3s infinite alternate;
	-webkit-animation: hue 3s infinite alternate;
}
@keyframes hue {
	/* hue sẽ chuyển màu từ giá trị 0 -> 360 */
	20% {background-color: hsl(72, 100%, 50%);}
	40% {background-color: hsl(144, 100%, 50%);}
	60% {background-color: hsl(216, 100%, 50%);}
	80% {background-color: hsl(288, 100%, 50%);}
	100% {background-color: hsl(360, 100%, 50%);}
}

@-webkit-keyframes hue {
	/* hue sẽ chuyển màu từ giá trị 0 -> 360 */
	20% {background-color: hsl(72, 100%, 50%);}
	40% {background-color: hsl(144, 100%, 50%);}
	60% {background-color: hsl(216, 100%, 50%);}
	80% {background-color: hsl(288, 100%, 50%);}
	100% {background-color: hsl(360, 100%, 50%);}
}

#saturation {
	/*0% = màu xám */
	background-color: hsl(0, 0%, 50%);
	animation: saturation 3s infinite alternate;
	-webkit-animation: saturation 3s infinite alternate;
}
@keyframes saturation {
	/*100% = màu đỏ */
	100% {background-color: hsl(0, 100%, 50%); }
}

@-webkit-keyframes saturation {
	/*100% = màu đỏ */
	100% {background-color: hsl(0, 100%, 50%); }
}

#lightness {
	/*0%  = màu đen */
	background-color: hsl(0, 100%, 0%);
	animation: lightness 3s infinite alternate;
	-webkit-animation: lightness 3s infinite alternate;
}
@keyframes lightness {
	/*50%  = màu đỏ */
	50% {background-color: hsl(0, 100%, 50%); }
	/*100% = màu trắng */
	100% {background-color: hsl(0, 100%, 100%); }
}

@-webkit-keyframes lightness {
	/*50%  = màu đỏ */
	50% {background-color: hsl(0, 100%, 50%); }
	/*100% = màu trắng */
	100% {background-color: hsl(0, 100%, 100%); }
}

#topflat {
	color: #999;
	background-color: white;
	background-image: linear-gradient(rgba(0, 0, 0, 0), black);
	animation: topflat 3s infinite alternate;
	-webkit-animation: topflat 3s infinite alternate;
}
@keyframes topflat {
	100% {background-color: black;}
}

@-webkit-keyframes topflat {
	100% {background-color: black;}
}

#bottomflat {
	color: #999;
	background-color: black;
	background-image: linear-gradient(white, rgba(255, 255, 255, 0));
	animation: bottomflat 3s infinite alternate;
	-webkit-animation: bottomflat 3s infinite alternate;
}
@keyframes bottomflat {
	100% {background-color: white;}
}

@-webkit-keyframes bottomflat {
	100% {background-color: white;}
}

Các bạn có thể làm theo các màu mà mình đã làm ở bên trên hoặc sáng tạo theo cách của mình để có những hiệu ứng đẹp hơn.

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

Chuyên Mục: Css

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