如何使用动画库animate.css

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>Documenttitle>
    
    <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>Documenttitle>
    
    <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>Documenttitle>
    
    <link rel="stylesheet" href="./css/animate.css">
    
    <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)