Animate.css的使用

最新推荐文章于 2023-07-06 16:28:28 发布

mkmin

最新推荐文章于 2023-07-06 16:28:28 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/79065221

版权

插件专栏收录该内容

13 篇文章 1 订阅

订阅专栏

最近开始关注一些关于特效的使用，当然一开始是解析我们最常用的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文档

mkmin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Animate.css的使用

最近开始关注一些关于特效的使用，当然一开始是解析我们最常用的animate.css咯直接上代码： span { width: 120px; height: 20px; text-align: center; line-height: 20px; cursor: pointer; border: 1px soli
复制链接

扫一扫