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. spring3.0事务管理配置

    转载:http://war-martin.iteye.com/blog/1396335 第一种配置方法:基于XML的事务管理 这种方法不需要对原有的业务做任何修改,通过在XML文件中定义需要拦截方法的 ...

  2. Oracle 取随机数（转）

    1.从表中随机取记录 select * from (select * from staff order by dbms_random.random)      where rownum < 4 ...

  3. Spring MVC Web框架

      1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...

  4. Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

    1.下载angularjs 进入其官网下载:https://angularjs.org/‎,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angular ...

  5. Memcache学习php完整一例

    header("Content-Type:text/html;charset=utf-8"); /* PHP设置分布式memcache存取 */ //创建memcache对象 $m ...

  6. （Python）集合、集合的函数

    本节我们将学习python的另一种数据类型:集合(set) 1.集合(set) 集合在Python中是一种没有重复元素,且无序的数据类型,且不能通过索引来引用集合中的元素 >>> b ...

  7. LeetCode（93） Restore IP Addresses

    题目 Given a string containing only digits, restore it by returning all possible valid IP address comb ...

  8. android system.img

    哥们要我做些模拟包,给过来的是mtk的底包,需要从system.img中提取部分文件. 网上一找资料,说是yaffs2文件系统,同时以前做linux的时候也是用yaffs2,感觉碰到老朋友了,不管三七 ...

  9. 理解浏览器的重绘与回流（repaint&&reflow）

    今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...

  10. python基础语法（1）

    一.基本概念 1. python中数有四种类型:整数.长整数.浮点数和复数. 整数, 如 1 长整数 是比较大的整数 浮点数 如 1.23.3E-2 复数 如 1 + 2j. 1.1 + 2.2j 2 ...