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
时间： 2024-10-25 08:47:24