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. 安装和部署ZkeaCMS

    ZkeaCMS是基于EasyFrameWork,使用ASP.NET MVC4开发的开源CMS. ZkeaCMS一个内容管理软件(网站).ZkeaCMS不仅只是管理内容,更是重新定义了布局.页面和组件, ...

  2. UML类图画法及其之间的几种关系

    最近做重构项目,需要画一下类图,发现类图的画法及其之间的几种关系已经淡忘了很多,所以整理总结一下,有问题的地方大家可以一起讨论下. 文章目录如下: 类图画法 类之间的几种关系:泛化(Generaliz ...

  3. 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数:\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误! \n"); } else { if(

    1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...

  4. SQL中的循环、for循环、游标

    我们使用SQL语句处理数据时,可能会碰到一些需要循环遍历某个表并对其进行相应的操作(添加.修改.删除),这时我们就需要用到咱们在编程中常常用的for或foreach,但是在SQL中写循环往往显得那么吃 ...

  5. Particle Playground 3.03 - 粒子特效王者

    <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op ...

  6. JProfiler使用入门(一)——准备工作

      JProfiler是一个全功能的Java剖析工具(profiler),主要用于检查和跟踪系统(限于Java开发的)的性能. JProfiler可以通过时时的监控系统的内存使用情况,随时监视垃圾回收 ...

  7. POJ2309 -- BST

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

  8. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  9. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  10. VB6.0 获取Excel文件工作表Sheet的名称

    获取Excel文件工作表Sheet的名称 '产生Excel文档 Dim xlapp, xlbook As Object Dim sSheetName As String Set xlapp = Cre ...