animate.css是一个CSS3动画库，里面预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。你可以点击打开它的 官网  查看演示，里面几乎包含了所有常见的动画效果。妈妈在也不用担心我不会写动画了！！！

演示地址 动画演示地址。

下载地址链接 点击下载地址链接下载，打开的是一个css文件 直接Ctrl+A全选 Ctrl+C复制即可。

如何使用：

先来看一个简单的示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 引入 animate.css -->

    <link rel="stylesheet" href="./css/animate.css">

    <style>

        .box {

            width: 200px;

            height: 200px;

            margin: 0 auto;

            background-color: pink;

        }

    </style>

</head>

<body>

    <!-- 打开浏览器就可以看到其效果了 -->

    <div class="box animated bounce">盒子</div>

</body>

</html>

首先页面引入 animate.css。 把 animated 添加到类属性上， animated 是动画的一个基类每个动画都必须添加紧接着后面就是 动画名。 

 例如：

<div class="box animated jello">盒子</div>

原生js添加动画示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 引入 animate.css -->

    <link rel="stylesheet" href="./css/animate.css">

    <style>

        .box {

            position: relative;

            left: 78px;

            width: 200px;

            height: 200px;

            margin: 0 auto;

            background-color: pink;

        }

        button { display: block; margin: auto;}

    </style>

</head>

<body>

    <div class="box" id="box">盒子</div>

    <button id="btn">点我</button>

    <script>

        // 获取盒子和按钮

        var box = document.getElementById('box');

        var btn = document.getElementById('btn');

        // 给 按钮 绑定一个单击事件只要触发了就执行这个匿名函数

            btn.onclick = function() {

                // 给盒子添加动画 基类 和类名

                box.classList.add('animated','bounce');

        }

    </script>

</body>

</html>

jQuery添加动画类示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 引入 animate.css -->

    <link rel="stylesheet" href="./css/animate.css">

    <!-- 引入 jquery.js -->

    <script src="./js//jquery3.4.1min.js"></script>

    <style>

        .box {

            position: relative;

            left: 78px;

            width: 200px;

            height: 200px;

            margin: 0 auto;

            background-color: pink;

        }

        button { display: block; margin: auto;}

    </style>

</head>

<body>

    <div class="box" id="box">盒子</div>

    <script>

       $(function() {

         var $this = $('#box');

            $this.hover(function() {

               $this.addClass('box animated bounce');

           },function() {

               $this.removeClass('animated bounce');

           })

       })

    </script>

</body>

</html>

至于动画其他的配置参数，如动画持续时间,动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就好了。

如何使用动画库animate.css的更多相关文章

  1. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  4. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  5. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

  6. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

  7. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  8. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  9. CSS3动画库——animate.css

    初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...

随机推荐

  1. 从网络架构方面简析循环神经网络RNN

    一.前言 1.1 诞生原因 在普通的前馈神经网络(如多层感知机MLP,卷积神经网络CNN)中,每次的输入都是独立的,即网络的输出依赖且仅依赖于当前输入,与过去一段时间内网络的输出无关.但是在现实生活中 ...

  2. PJzhang：经典子域名爆破工具subdomainsbrute

    猫宁!!! 参考链接: https://www.waitalone.cn/subdomainsbrute.html https://www.secpulse.com/archives/5900.htm ...

  3. 苦逼三流小公司程序员这半年找工作经历(3)——选择offer

    本文按照企业规模.性质.规模,分成三类,点评一下遇到的这些公司.也算是为半年找工作经历的一个总结. 1,三流小公司 公司规模类似于笔者跳槽前所在企业,性质有外商独资.合资,当然大多数都是民营企业,规模 ...

  4. Python基础:模块化来搭项目

    简单模块化 import 最好在最顶端 sys.path.append("..")表示把当前程序所在位置向上提了一级 在python3规范中,__init__.py并不是必须的. ...

  5. [Android基础]Android四大组件之Activity总结

    1.Activity简介 Activity是Android一个非常重要的用户接口(四大组件之一),是可见的,主要是用户和应用程序之间进行交互的接口.在每个Activity中都可以放很多控件,所以也可以 ...

  6. Codeforces 140D（贪心）

    要点 跟大家打acm的策略一样,为了做更多的题数肯定做最简单的题目,为了罚时更少肯定从易到难做 虽然有个12:00之限不同于往常比赛,但细想还是要从易到难贪:做这些题的总时间肯定是不变的,只是顺序可变 ...

  7. MyIfmHttpClient

    package com.yd.ifm.client.caller.util.http; import java.util.Map; import com.yd.ifm.client.caller.mo ...

  8. NETCOREAPI 跨域处理

    ASPNETCOREAPI 跨域处理 AspNetCoreApi 跨域处理 如果咱们有处理过MV5 跨域问题这个问题也不大. (1)为什么会出现跨域问题: 浏览器安全限制了前端脚本跨站点的访问资源,所 ...

  9. 后台任务利器之Hangfire

    后台任务利器之Hangfire 一.简述 Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在.net core的环境中,由Core自带的DI管理着生命周期,免去了在NF4 ...

  10. 线段树 & 题目

    首先说下我写的线段树吧. 我是按照线段树[完全版]那个人的写法来写的,因为网上大多数题解都是按照他的写法来写. 确实比较飘逸,所以就借用了. 节点大小是maxn是4倍,准确来说是大于maxn的2^x次 ...