仿Material UI框架的动画特效

Material UI 是一款功能非常强大，界面却十分清新简洁的CSS框架，Material UI利用了Google的Material Design 全新设计语言，并且让每一个UI组件都变得非常独立，因此开发者使用Material UI也会比较简单。和Bootstrap类似，Material UI提供了很多常用的UI组件，除了最基本的菜单、按钮、滑动杆、进度条、单选框/复选框外，它还提供了一个非常有趣的日历组件，另外还提供了一些很有趣的图标。

不过，这里我并不打算介绍Material UI的使用，而是介绍如果实现Material UI内的动画特效，比如点击按钮会出现波浪扩散的动画效果、表单获取焦点动画等等。

注意：要使用下面的动画效果，必须引入jQuery。

一、点击按钮会出现波浪扩散的动画效果

为了效果，我这里特意将波浪的颜色加深。

先看效果：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.1.js"></script>
		<style type="text/css">
			button {
				outline: none;
				position: relative;
				overflow: hidden;
				padding: 5px 10px;
				background: #fff;
				border: 1px solid #d9d9d9;
				transition: all .3s;
			}
			
			.ripple {
				 0;
				height: 0;
				border-radius: 50%;
				background: rgba(0, 0, 0, .5);
				-webkit-transform: scale(0);
				transform: scale(0);
				position: absolute;
				opacity: 1;
			}
			
			.rippleEffect {
				-webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
				animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
			}
			
			@keyframes rippleEffect {
				100% {
					transform: scale(2);
					opacity: 0;
				}
			}
			
			@-webkit-keyframes rippleEffect {
				100% {
					-webkit-transform: scale(2);
					opacity: 0;
				}
			}
		</style>
		<script type="text/javascript">
			$(function() {
				function ripple(event, $this) {
					event = event || window.event;
					var x = event.pageX || event.originalEvent.pageX;
					var y = event.pageY || event.originalEvent.pageY;
					var wx = $this.width();
					x = x - $this.offset().left - wx / 2;
					y = y - $this.offset().top - wx / 2;
					var span = '<div class="ripple"></div>';
					$this.prepend(span);
					$(".ripple").css({
						 wx,
						height: wx,
						top: y + "px",
						left: x + "px"
					}).addClass("rippleEffect");
					$(document).one("webkitAnimationEnd animationend", ".ripple", function() {
						$(".ripple").remove();
					});
				}

				$("button").on("click", function(e) {
					ripple(e, $(this));
				});
			})
		</script>
	</head>

	<body>
		<button type="button"> 点我 </button>
	</body>

</html>

二、表单获取焦点的动画

效果如下：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script src="js/jquery-3.1.1.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.material-box {
				position: relative;
				 200px;
				height: 30px;
			}
			
			.material-box input {
				border: none;
				 100%;
				height: 30px;
				border-bottom: 1px solid rgb(224, 224, 224);
				outline: none;
			}
			
			.material-box hr {
				position: absolute;
				top: 100%;
				 100%;
				margin: 0 auto;
				border-top: 2px solid rgb(0, 188, 212);
				transform: scale(0);
				transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
			}
		</style>
		<script type="text/javascript">
			$(function() {

				var inputs = document.querySelector("input");
				var hr = document.querySelector("hr");
				inputs.addEventListener("focus", function() {
					hr.style.transform = "scale(1)";
				});
				inputs.addEventListener("blur", function() {
					hr.style.transform = "scale(0)";
				});
				$("button").on("click", function(e) {
					ripple(e, $(this));
				});
			})
		</script>
	</head>

	<body>
		<div class="material-box">
			<input type="text" placeholder="text" />
			<div>
				<hr/>
			</div>
		</div>
	</body>

</html>

三、checkbox

下面用到了字体图标fontawsome

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.ww-checkbox {
				display: inline-block;
				position: relative;
				 20px;
				height: 20px;
			}
			
			.ww-checkbox input {
				opacity: 0;
				 20px;
				height: 20px;
			}
			
			.ww-checkbox-box {
				 20px;
				height: 20px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				line-height: 16px;
				border: 1px solid #D9D9D9;
				text-align: center;
			}
			
			.ww-checkbox-box .fa {
				display: none;
				font-size: 12px;
				font-weight: normal;
				color: #fff;
			}
			
			.ww-checkbox.active .ww-checkbox-box {
				background-color: #49be38;
				border: 1px solid #fff;
			}
			
			.ww-checkbox.active .fa {
				display: inline;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$(".ww-checkbox").on("click", function() {
					if($(this).hasClass("active")) {
						$(this).removeClass("active");
					} else {
						$(this).addClass("active");
					}
				});
			})
		</script>
	</head>

	<body>
		<div class="ww-checkbox">
			<div class="ww-checkbox-box"><span class="fa fa-check"></span></div>
			<input type="checkbox" class="ww-checkbox-input" value="">
		</div>
	</body>

</html>

参考：http://ghmagical.com/article/page/id/eJ6csiu8FkcD