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. js中数组

  2. asp.net mvc 如何将controller 里一个action 返回值为list<>的值输出到view

    在controller中:return View(myRole.ToList());在view文件开头加上:@model IEnumerable<LTXYCallCenter.Models.Ro ...

  3. Python随机森林算法的使用

    #coding:utf-8 # from python.Lib.packages.sklearn.tree import DecisionTreeClassifier # from python.Li ...

  4. ASP.NET ZERO 学习 事件总线

    用于注册和触发客户端的全局事件. 介绍 Pub/sub事件模型广泛用于客户端,ABP包含了一个简单的全局事件总线来 注册并 触发事件. 注册事件 可以使用abp.event.on来注册一个全局事件.一 ...

  5. android 编译错误 com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0

    解决方案一: JDK版本不一致造成的,指的是高版本的JDK编译的class不能放在低版本的JDK上运行. 如果是Version 52,就表示JDK8编译的class不能运行在JDK7上,所以需要在本地 ...

  6. DIV半透明，内层不受影响的代码

    <div style=" background:rgba(0, 0, 0, 0.1)"><br /> <img src="http://im ...

  7. 网页中的JavaScript

    变量的声明和赋值 var count;定义变量 count = 5;赋值 var” - 用于声明变量的关键字 “count” - 变量名 同时声明和赋值变量 var count = 10; 声明多个变 ...

  8. StyleCop源码分析

    前言: 由于最近在进行项目配置,配置内容:根据一个结构体,一一对应地配置xml文件(两个) 写一个和此结构体对应的类(只包含属性,字段).反复配置后,觉得太繁琐,因此想到使用程序完成自动配置,网上搜索 ...

  9. oracle学习

    在平时的工作学习中,经常需要使用到oracle数据库,将平时用到的一些技巧记录在这里,以便以后随时可以翻阅. 1.日期类型的比较 插入日期时,经常会使用sysdate来插入数据,但sysdate插入的 ...

  10. centos 6.5 + php5.5.31 fastcgi (fpm) 编译安装

    yum intsall zlib zlib-devel //gzip 压缩和解压 yum install openssl openssl-devel yum install libxml2 libxm ...