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. python 操作exls学习之路1-openpyxl库学习

    这篇要讲到的就是如何利用Python与openpyxl结合来处理xlsx表格数据.Python处理表格的库有很多,这里的openpyxl就是其中之一,但是它是处理excel2007/2010的格式,也 ...

  2. asp.net GDI+ 使用PathGradienBrush类实现彩色渐变

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. scala 学习：object 和class， trait

    object: Scala中没有静态修饰符,static,在object下的成员全部都是静态的,如果在类中声明了与该类相同的名字的object则该object是该类的"半生对象", ...

  4. 双等位基因(biallelic sites )和多等位基因(multiallelic sites)

    双等位基因(biallelic sites ):表示在基因组的某个位点上有两个等位基因,如下图第七个位点所示,有G/-两种形式: 多等位基因(multiallelic sites):表示在基因组的某个 ...

  5. 大道至简之编程的精义读后感（Java伪代码）

    import.java.大道至简.*; import.java.愚公移山.*; public class YuGongYiShan { 愚公={项目组织者,团队经理,编程人员,技术分析师}: //沟通 ...

  6. POJ2309 -- BST

    找找规律,实际上是二分查找的过程,只要找到了mid与输入的n相同的话,直接输出left和right就可以了. 代码如下: #include <iostream> using namespa ...

  7. iscsi: 环境搭建

    组网环境 +----------+---------------+---------------+ | hostname | ip address | iscsi role | +---------- ...

  8. STF（SmartPhone Test Farm）Mac版本环境搭建

    它的github页面为: https://github.com/openstf/stf 1.Linux一些基本包的安装: 在控制台分别运行 sudo apt-get update sudo apt-g ...

  9. firemonkey中stringgrid属性大全

    StringGrid之属性大全: Align:                            //确定组件在父类组件区内的对齐方式(alScale:随窗口 放大缩小) AlterRowBack ...

  10. Ubuntu和Windows的交互工具---Samba环境配置

    Samba软件安装 使用源代码安装samba,在终端输入如下指令: #sudo apt-get install samba #sudo apt-get install smbclient #sudo ...