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 中的一个函 ...