Animate动画插件

最新推荐文章于 2024-05-13 10:23:57 发布

@半笺寄幽怀

最新推荐文章于 2024-05-13 10:23:57 发布

阅读量3.7k

点赞数 1

文章标签：动画

本文链接：https://blog.csdn.net/qq_45848432/article/details/120807727

版权

上次我们讲了一下swiper插件如何使用，这节我们来讲一下animate插件如何使用。同样，先打开官网：Animate中文网 – Animate安装、Animate使用、Animate下载。然后到代码托管平台GitHub上将文件下载：GitHub - animate-css/animate.css。便于使用，下图中圈起来的文件是我们所需要使用的文件。(animate.css文件和animate.min.css文件是一样的，带min的是压缩过后的，运行不会有任何影响)

一、使用

同样，我们先在一个空白文件上面引入我们需要的css文件，这里写了一点内容方便做演示。

然后我们需要打开官网的演示网站

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="animate.min.css"/>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 100px;
				background-color: #0000FF;
			}
			.box2 {
				width: 200px;
				height: 100px;
				background-color: red;
			}
		</style>
		
	</head>
	<body>
		<div class="box1">
			
		</div>
		<div class="box2">
			
		</div>
		<h1 class="">我们是animate动画鸭</h1>
		<h4 class="">我们是animate动画鸭</h4>
		<h6 class="">我们是animate动画鸭</h6>
		
	</body>
</html>

animate.css动画演示_dowebok

找到合适的效果样式，例如这个，我们只需要把他的名字copy一下。然后按照教程中如何添加类名的方法，在html对应的位置添加类名就好了。这个版本的animate动画类名添加方法是

animate__animated animate__自己需要动画的类名

例如我们需要下面这个类名为bounceInDown的动画，则在对应的class类中加入animate__animated animate__bounceInDown就有对应的动画了

下面我们为上面样式的盒子添加动画，效果如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="animate.min.css"/>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 100px;
				background-color: #0000FF;
			}
			.box2 {
				width: 200px;
				height: 100px;
				background-color: red;
			}
		</style>
		
	</head>
	<body>
		<div class="box1 animate__animated animate__bounceInLeft">
			
		</div>
		<div class="box2 animate__animated animate__fadeInRight">
			
		</div>
		<h1 class="animate__animated animate__backInDown">我们是animate动画鸭</h1>
		<h4 class="animate__animated animate__flipInY">我们是animate动画鸭</h4>
		<h6 class="animate__animated animate__rotateInDownLeft">我们是animate动画鸭</h6>
		
	</body>
</html>

2、修改

如果需要修改，比如动画时间，官网也为我们提供了方法，修改属性值即可。

例如：我需要将第一个盒子动画时间为3s，只需要在css中找到对应的类，重写animation-duration: 3s;这个语句即可。

或者我需要动画在1s后执行，重写animation-delay: 1s;这个语句即可

本次这个插件的使用方法就讲到这，许多功能都需要自己去看文档然后操作就会发现他的效果。

@半笺寄幽怀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Animate动画插件

上次我们讲了一下swiper插件如何使用，这节我们来讲一下animate插件如何使用。同样，先打开官网：Animate中文网 – Animate安装、Animate使用、Animate下载。然后到代码托管平台GitHub上将文件下载：GitHub - animate-css/animate.css。便于使用，下图中圈起来的文件是我们所需要使用的文件。(animate.css文件和animate.min.css文件是一样的，带min的是压缩过后的，运行不会有任何影响)一、使用同样，我们先在一个空.
复制链接

扫一扫