最近开始关注一些关于特效的使用,当然一开始是解析我们最常用的animate.css咯
直接上代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/animate.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<style>
span {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
border: 1px solid #000000;
display: block;
}
</style>
<body>
<div id="_div" style="background: #000000;width: 200px;height: 200px;">
</div>
<span data-classname="flash">flash</span>
<span data-classname="bounce">bounce</span>
<span data-classname="pulse">pulse</span>
<span data-classname="rubberBand">rubberBand</span>
<span data-classname="shake">shake</span>
<span data-classname="swing">swing</span>
<span data-classname="tada">tada</span>
<span data-classname="wobble">wobble</span>
<span data-classname="jello">jello</span>
<span data-classname="bounceIn">bounceIn</span>
<span data-classname="bounceInDown">bounceInDown</span>
<span data-classname="bounceInLeft">bounceInLeft</span>
<span data-classname="bounceInRight">bounceInRight</span>
<span data-classname="bounceInUp">bounceInUp</span>
<span data-classname="bounceOut">bounceOut</span>
<span data-classname="rollOut">rollOut</span>
<span data-classname="zoomIn">zoomIn</span>
<span data-classname="zoomOut">zoomOut</span>
<script>
$("span").each(function() {
$(this).bind("click", function() {
var str = $(this).attr("data-classname");
str += " animated";
$("#_div").addClass(str);
console.log(str);
setTimeout(function() {
$("#_div").removeClass();
}, 1000);
});
});
</script>
</body>
</html>
都是直接使用的animate.css,是不是绝得有点无聊,那么我们就来试试怎么去使用它
接下来就来模拟一下这个效果,毕竟用框架是快速开发,但是我们也是需要知道原理的,嘻嘻
就以最后的那个 zoomOut 为例(需要有css3的动画还有transform的基础)
首先,我们先馆擦出那个效果,一个一个来,会发现第一个效果是缩小,于是代码先这样写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes zoomOut {
0% {}
100% {
transform: scale3d(0, 0, 0);
}
}
.zoomOut {
animation-name: zoomOut;
}
</style>
</head>
<body>
<div style="background: #000000;width: 200px;height: 200px; animation-name:zoomOut;animation-duration: 10000ms;"></div>
</body>
</html>
为了便于观察,我把时间设置为10s,先运行一波先
然后再观察一波,发现还会变透明,嗯。肯定是opacity的问题,于是代码再改改:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes zoomOut {
0% {
opacity: 100%;
}
100% {
opacity: 0;
transform: scale3d(0, 0, 0);
}
}
.zoomOut {
animation-name: zoomOut;
}
</style>
</head>
<body>
<div style="background: #000000;width: 200px;height: 200px; animation-name:zoomOut;animation-duration: 10000ms;"></div>
</body>
</html>
写到最后发现,丢,效果没人家的好看。(所以说框架可以节约很多时间,但是原理还是要知道的)然后看看源码怎么用的:
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
看来我还是太年期了,好了,就这么愉快的使用这个框架了,具体效果,还有原理,肯定是要自己去挖掘才有那个乐趣
参考文档:传送门:animate.css文档