Animate.css动画库的使用

来源:互联网 发布:沈阳有几种打车软件 编辑:程序博客网 时间:2024/05/22 00:11

Animate.css动画库是一个跨浏览器的有趣的css3动画库。

在应用这个库前,你需要把这个库下载并解压取出animate.min.css文件,把取出的文件放到对应的css文件夹中;

然后代码引用:<link rel="stylesheet" href="css/animate.min.css" />

然后在应用这个库的元素中的名加上class="animated bounceInLeft"

animated代表引用这个css动画库,是基本的,必须添加的样式名,任何想实现的元素都得添加这个;

bounceInLeft代表引用库里面的bounceInLeft动作样式,指定的动画样式名;

应用Animate.css动画库就是这么简单,当然还有通过jquery来实现给某个元素动态添加动画样式,这个应用方法我后面再分享给大家

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/animate.min.css" />
        <style>
            div{font-size: 20px; color: orangered;}
            
        </style>
        
    </head>
    <body>
        <div class="animated bounceInLeft">这是一段animate.min.css库中的bounceInLeft动画特效</div>
    </body>
</html>


0 0
原创粉丝点击