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. RedHat下编译安装Boost

    1.解压boost_1_54_0.tar.gz 2.进入目录后,运行 ./bootstrap.sh ,会生成一个 bjam 的可执行程序 3.运行 ./bjam release install 进行编 ...

  2. Aborting commit: 'XXX' remains in conflict

    Aborting commit: 'XXX' remains in conflict 错误   本地也删除了一个文件夹,用svn 的repo-brower 删除了服务器上的对应的文件夹 ,再次comm ...

  3. Ajax2

    一.完整版Ajax $.ajax({ url: "Ashxs/Login.ashx", data: { "name": name, "pwd" ...

  4. DataTable 怎样设置列宽？ DataTable中已经有数据了怎样在现实的时候设置它的列宽？

    首先要理解 DataTable是一个虚拟表,里面存有数据列,既然是虚拟的就不能够为它去设置宽度,如果设置的话可以对其绑定的控件进行设置.例如:绑定的控件对象为DataGridView那么可以这样 da ...

  5. ZT 趋势移动安全apk

    趋势移动安全 应用截图   应用简介 趋势移动安全( Mobile Security) 是一款专业的Android移动安全软件.利用趋势科技世界领先的云安全技术,保护用户避免被移动恶意程序骚扰,避免个 ...

  6. WKWebView与Js (OC版)

    OC如何给JS注入对象及JS如何给IOS发送数据 JS调用alert.confirm.prompt时,不采用JS原生提示,而是使用iOS原生来实现 如何监听web内容加载进度.是否加载完成 如何处理去 ...

  7. 基本套接字编程（1） -- tcp篇

    1. Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机 ...

  8. linux 管道命令 竖线 ‘ | ’

    管道符号,是unix功能强大的一个地方,符号是一条竖线:"|", 用法: command 1 | command 2 他的功能是把第一个命令command 1执行的结果作为comm ...

  9. web cookie and session

    一.什么是会话? 打开一个浏览器,访问多个网址后,再关掉浏览器,这一整个过程就是会话. 二.cookie技术 这是客户端保存临时数据的技术,主要用于保存用户的登录信息及其它需要保存的数据,如购买与结帐 ...

  10. github 仓库管理

    一.远程仓库有master和dev分支1. 克隆代码 git clone https://github.com/master-dev.git # 这个git路径是无效的,示例而已 2. 查看所有分支 ...