animate.css的使用——老板再也不用担心我没有特效了!

animate.css—— 一款强大的预设css3动画库!

你还在使用hover?还在自己写动画帧?

一个人的脑洞总是有限,让我们一起来看看一仓库的创意,从中启发属于你的动画效果!!!

animate.css体验(附带下载):https://daneden.github.io/animate.css/

或这git下载:https://github.com/daneden/animate.css

使用非常简单,直接引入animate.css

建议第一次使用的朋友,先用未压缩的开发版animate.css,并先浏览一遍内容。

熟悉后或上线在改换成.min.css。
在这里插入图片描述

当然效果还是要看上面的体验网站(官网)——https://daneden.github.io/animate.css/
在这里插入图片描述
体验使用。

还需要了解一下animation这个css3属性

animation 属性是一个简写属性,用于设置六个动画属性:

1、animation-name
2、animation-duration
3、animation-timing-function
4、animation-delay
5、animation-iteration-count
6、animation-direction

值 ------------------------------------------------------------描述
animation-name -----------------------规定需要绑定到选择器的 keyframe 名称。。
animation-duration-------------------- 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function------------规定动画的速度曲线。
animation-delay -----------------------规定在动画开始之前的延迟。
animation-iteration-count -----------规定动画应该播放的次数。
animation-direction------------------- 规定是否应该轮流反向播放动画。

大家引入animate.css后可以直接使用以下代码,感受一下快感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        div{
            animation-name:bounce ;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
<div>
    我是一只小小小小鸟,想要飞呀飞,却飞也飞不高啊~~~
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值