首页 专题 H5案例 前端导航 UI框架

仿Material UI框架的动画特效

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

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

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

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

为了效果,我这里特意将波浪的颜色加深。
先看效果:

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

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 = '<div class="ripple"></div>';   

  $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布局:

<div class="material-box">   

  <input type="text" placeholder="text" />   

  <div>   

    <hr/>   

  </div>   

</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布局:

<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>

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


后续会继续添加!

关注”全栈技术杂货铺“

全栈技术杂货铺