前端开发Animate.css 一款牛逼的css3动画库
摘要： 前端页面开发一个页面多少钱 公众号前端页面开发 前端静态页面开发 Animate.css是一款很牛逼的，跨浏览器的css3动画库，使用方法也很简单只要引入一个animate.min.css就可以了， 简单使用 1 首先引……
| 前端页面开发一个页面多少钱 |
| 公众号前端页面开发 |
| 前端静态页面开发 |
Animate.css是一款很牛逼的，跨浏览器的css3动画库，使用方法也很简单只要引入一个animate.min.css就可以了，
简单使用
1 首先引入 animate的 css 文件样式
cdn文件html 代码
<head>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css”
/>
</head>
下载到本地html 代码
<head>
<link rel=”stylesheet” href=”animate.min.css” />
</head>
2 给指定元素止指定样式
我们看到有三个class ，其中第一个animated 是基本样式，所有要产生动画的元素都需要，第二个infinite是可 选的,如果加了这个类，动画将循环执行，第三个就是动画特效了 ，目前animated 已经有很多动画特效了具体可 以点击这里查看 [www.siyouku.cn/wenqing/animation](http://www.siyouku.cn/wenqing/animation)html 代码
<div id=”demoimg” class=”animated infinite bounce”>
<img
style=”width: 200px; height: 200px;”
src=”http://img.siyouku.cn/img24.jpg”
/>
</div>
3 当动画效果执行完成可以通过以下代码添加事件
javascript 代码
$(‘#demoimg’).one(
‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’,
doSomething,
)
4 有时候我们需要自定我们对动画的一些设置我们可以用下面的代码实现
css 代码
#demoimg {
-vendor-animation-duration: 3s; //动画持续时间
-vendor-animation-delay: 2s; //动画延迟时间
-vendor-animation-iteration-count: infinite; //动画执行次数,这里是一直执行
}
| 前端页面开发 api接口 |
| 前端开发如何调试页面 |
| 页面前端开发与设计的区别 |
» 本文来自：前端开发者 » 《前端开发Animate.css 一款牛逼的css3动画库》
» 本文链接地址：https://www.rokub.com/8047.html
» 您也可以订阅本站：https://www.rokub.com
近期评论