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 {
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;
}
}
</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({
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));
});
})
</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;
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;
}
</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;
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;
}
</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

 

仿Material UI框架的动画特效的更多相关文章

  1. Jquery之家5个顶级Material Design框架

    谷歌Material Design在如今的前端页面设计中非常流行.Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案. Material Design是如此的简洁美 ...

  2. Material UI – Material Design CSS 框架

    Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...

  3. paip.关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  4. Material UI:很强大的CSS框架

    Material UI 是一款功能很强大,界面却十分清新简洁的CSS框架.Material UI利用了Google的Material Design 全新设计语言.而且让每个UI组件都变得很独立.因此开 ...

  5. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  7. Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  8. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  9. Materialize - 响应式 Material Design 框架

    由谷歌创建和设计的 Material Design(材料设计)是一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验. Mate ...

随机推荐

  1. nwe

    SELECT  SUBSTR('20150601', 1, 6) AS CALC_MONTH,       CHN.EMPLOYEE_CODE,       CHN.CHANNEL_TYPE,     ...

  2. Json在前台与后台之间的使用

     一.将前台数据,使用ajax中的post.get传到后台 $.ajax({ type: 'post', url: 'your url', data: $("form").seri ...

  3. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  4. 第一章 JacksonUtil 序列化与反序列化属性总结

    1.json-lib与Jackson 关于json-lib与Jackson对比总结如下: 1).性能方面,Jackson的处理能力高出Json-lib10倍左右. 2).json-lib已经停止更新, ...

  5. iOS 不让自动锁屏

    [UIApplication sharedApplication].idleTimerDisabled=YES;

  6. [MyBean-插件]MyBean通用报表免费无限制版本发布

      [优点]    1.开发时无需安装报表组件(可以直接用编译好的文件,注意版权说明,请自行编译一次相应的报表插件文件).    2.无带包烦恼所有版本Delphi都可以使用,不拖累Delphi版本的 ...

  7. oracle 中文乱码---查看和修改客户端字符集

    客户端NLS_LANG的设置方法 Windows: # 常用中文字符集set NLS_LANG=SIMPLIFIED CHINESE_CHINA.ZHS16GBK # 常用unicode字符集 set ...

  8. SQL基础分类

    我们可以把学习过的sql语言,进行分类: 1. DDL : 数据定义语言 a) 操作库表结构的语言. Create drop alter 2. DML : 数据操作语言 a) 操作数据的语言: upd ...

  9. ooad单例模式-Singleton

                                                单例模式Singleton 主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 比如建立目录 ...

  10. C++中new和malloc的区别

    原文:http://blog.163.com/ji_wei8888/blog/static/4868044620117361747282/ 1.new 是c++中的操作符,malloc是c 中的一个函 ...