仿 Material UI 框架的动画特效Material UI 是一款功能非常强大，界面却十分清新简洁的 CSS 框架

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

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

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

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

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

先看效果：

 点我

CSS样式：

button {   
  outline: none;
  position: relative;   
  overflow: hidden;   
  padding: 5px 10px;   
  background: #fff;   
  border: 1px solid #d9d9d9;   
  transition: all .3s;   
}
			
			.ripple {   
  width: 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;   
  }   
}

js:

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 = '';   
  $this.prepend(span);   
  $(".ripple").css({   
  width: 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));   
});

二、表单获取焦点的动画

效果如下：

div布局：

CSS样式：

.material-box {
				position: relative;
				width: 200px;
				height: 30px;
			}
			
			.material-box input {
				border: none;
				width: 100%;
				height: 30px;
				border-bottom: 1px solid rgb(224, 224, 224);
				outline: none;
			}
			
			.material-box hr {
				position: absolute;
				top: 100%;
				width: 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;
			}

js脚本：

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));
			});

三、checkbox

下面用到了字体图标fontawsome

div布局：

CSS样式：

.ww-checkbox {
				display: inline-block;
				position: relative;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox input {
				opacity: 0;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox-box {
				width: 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;
			}

js脚本：

$(".ww-checkbox").on("click", function() {
				if ($(this).hasClass("active")) {
					$(this).removeClass("active");
				} else {
					$(this).addClass("active");
				}
			});

后续会继续添加！