Animate.css插件与CSS动画

最新推荐文章于 2024-04-15 01:02:39 发布

catherine_sfy

最新推荐文章于 2024-04-15 01:02:39 发布

阅读量514

点赞数 1

分类专栏： javaweb CSS

本文链接：https://blog.csdn.net/qq_40826169/article/details/86631822

版权

CSS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javaweb

3 篇文章 1 订阅

订阅专栏

Animate.css动画效果演示
http://www.jq22.com/yanshi819

引入animate.css的几种方法
官网下载地址：
https://raw.github.com/daneden/animate.css/master/animate.css
或者使用在线cdn：
https://unpkg.com/animate.css@3.5.2/animate.min.css

使用方法

Animate.css是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" type="text/css" />
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>

<body>
	<div class="box animated bounce"></div><!--直接在元素上添加animated和对应的类名即可-->
</body>
	
</html>

animate.css主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。

通过自定义动画的配置参数，比如动画持续时间，动画的执行次数等等，以达到增强动画效果的目的。

.box{
	height: 100px;
	width: 100px;
	background-color: lightblue;
	animation-duration: 3s;/*动画持续时间*/
	animation-delay: 2s;/*动画执行延迟时间*/
	animation-iteration-count: 3;/*动画执行次数*/
}

catherine_sfy

关注

1
点赞
踩
0

收藏

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

Animate.css动画效果演示：http://www.jq22.com/yanshi819引入animate.css很容易，有以下几种方法：官网下载地址：https://raw.github.com/daneden/animate.css/master/animate.css或者使用在线cdn：https://unpkg.com/animate.css@3.5.2/animate....
复制链接

扫一扫